Font Size

Class	Properties
fs-xs	font-size: 0.75rem;
fs-b	font-size: 1rem;
fs-sm	font-size: 1.5rem;
fs-md	font-size: 2.25rem;
fs-lg	font-size: 3rem;
fs-xl	font-size: 3.75rem;
fs-xxl	font-size: 4.5rem;
fs-3xl	font-size: 5.25rem;
fs-6xl	font-size: 6rem;
fs-9xl	font-size: 6.75rem;

Extra Small

This example sets the font size to 0.75rem. This size is typically used for smaller text elements.

Aa

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-xs p-4 rad-1 ta-c tc-lead">Aa</p>
</div>

Base

This example sets the font size to 1rem. This is the standard size for body text.

Aa

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-b p-4 rad-1 ta-c tc-lead">Aa</p>
</div>

Small

This example sets the font size to 1.5rem. This size is often used for slightly larger text elements.

Aa

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-c tc-lead">Aa</p>
</div>

Medium

This example sets the font size to 2.25rem. This size is typically used for headings or important text.

Aa

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-md p-4 rad-1 ta-c tc-lead">Aa</p>
</div>

Large

This example sets the font size to 3rem. This size is often used for prominent headings.

Aa

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-lg p-4 rad-1 ta-c tc-lead">Aa</p>
</div>

Extra Large

This example sets the font size to 3.75rem. This size is typically used for major headings or titles.

Aa

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-xl p-4 rad-1 ta-c tc-lead">Aa</p>
</div>

XXL

This example sets the font size to 4.5rem. This size is often used for very prominent headings.

Aa

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-xxl p-4 rad-1 ta-c tc-lead">Aa</p>
</div>

3XL

This example sets the font size to 5.25rem. This size is typically used for the largest headings.

Aa

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-3xl p-4 rad-1 ta-c tc-lead">Aa</p>
</div>

6XL

This example sets the font size to 6rem. This size is often used for the most prominent text elements.

Aa

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-6xl p-4 rad-1 ta-c tc-lead">Aa</p>
</div>

9XL

This example sets the font size to 6.75rem. This size is typically used for the largest display text.

Aa

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-9xl p-4 rad-1 ta-c tc-lead">Aa</p>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:fs-*,md:fs-*, lg:fs-*, and xxl:fs-* allows targeting specific utilities in different viewports.

<div class="fs-md md:fs-lg ..."></div>

Hover modifiers

Alternatively, you can apply :hover by using h:fs-* utility to override elements and change their values when hovering over them.

<div class="fs-md h:fs-lg ..."></div>