Font style

Utilities for controlling the font style of an element


Class reference

ClassProperties
italicfont-style: italic;
not-italicfont-style: normal;

# No Italics

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

The quick brown fox jumped over the lazy dog.

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

# Italics

Use the .italic utility to make text italic.

The quick brown fox jumped over the lazy dog.

<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.