Font size | Utilities

Class	Properties
`.font-size-xs`	`font-size: .75rem;`
`.font-size-sm`	`font-size: .875rem;`
`.font-size-md`	`font-size: .9375rem;`
`.font-size-base`	`font-size: 1rem;`
`.font-size-lg`	`font-size: 1.125rem;`
`.font-size-xl`	`font-size: 1.25rem;`
`.font-size-2xl`	`font-size: 1.5rem;`
`.font-size-3xl`	`font-size: 1.875rem;`
`.font-size-4xl`	`font-size: 2.25rem;`
`.font-size-5xl`	`font-size: 3rem;`
`.font-size-6xl`	`font-size: 4rem;`

Usage

Control the font size of an element using the .font-size-{size} utilities.

<p class="font-size-xs ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-sm ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-md ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-base ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-lg ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-xl ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-2xl ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-3xl ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-4xl ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-5xl ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-6xl ...">The quick brown fox jumped over the lazy dog.</p>

Variants

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

Responsive

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

For example, use .md:font-size-lg to apply the font-size-lg utility at only medium screen sizes and above.

Hover-state

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

$hover-variants: (
  // ...
  "font-size",
);