Font style

Utilities for controlling the style of text.

In this article

Class Properties
.italic font-style: italic;
.normal font-style: normal;


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

<p class="normal ...">The quick brown fox jumped over the lazy dog.</p>

Use the .italic utility to make text italic.

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


By default, only responsive variants are generated for font style utilities.


To control the font size of an element at a specific breakpoint, add a {screen}: prefix to any existing font style utility.

For example, use .md:italic to apply the italic utility at only medium screen sizes and above.


To include hover-state variants like .hover:italic, add "font-style" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...

Questions or feedback about this article? Let us know