Font size

Utilities for controlling the font size of an element.

In this article

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",
);

Questions or feedback about this article? Let us know