Font style

Class reference

# No Italics

Use the .not-italic utility to display text normally. This is typically used to reset italic text at different breakpoints.

<p class="not-italic ...">The quick brown fox ...</p>

# Italics

Use the .italic utility to make text italic.

<p class="italic ...">The quick brown fox ...</p>

# Responsive

To control the font style of an element at a specific breakpoint, add a {screen}: prefix to any existing font style utility. For example, use md:not-italic to apply the not-italic utility at only medium screen sizes and above.

<p class="italic md:not-italic ...">
  The quick brown fox jumped over the lazy dog.
</p>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.