Utility	Properties
fs-xs	`font-size: 0.75rem;`
fs-sm	`font-size: 0.875rem;`
fs-md	`font-size: 1rem;`
fs-lg	`font-size: 1.125rem;`
fs-xl	`font-size: 1.25rem;`
fs-xxl	`font-size: 1.5rem;`
fs-3xl	`font-size: 1.875rem;`
fs-4xl	`font-size: 2.25rem;`
fs-5xl	`font-size: 3rem;`
fs-6xl	`font-size: 3.75rem;`
fs-7xl	`font-size: 4.5rem;`
fs-8xl	`font-size: 6rem;`
fs-9xl	`font-size: 8rem;`

Extra Small

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

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

Small

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

<div class="bg-indigo-1 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 1rem. This is the standard size for body text.

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

Large

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

<div class="bg-indigo-1 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 1.25rem. This size is typically used for major headings or titles.

<div class="bg-indigo-1 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 1.5rem. This size is often used for very prominent headings.

<div class="bg-indigo-1 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 1.875rem. This size is typically used for the largest headings.

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

4XL

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

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

5XL

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

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

6XL

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

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

7XL

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

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

8XL

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

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

9XL

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

<div class="bg-indigo-1 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>

Font Size