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