Font Size

Utility	Properties
Failed to load data. Please try again later.

Extra Small

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

Aa

<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.

Aa

<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

Initial value

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

Aa

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

Aa

<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.

Aa

<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.

Aa

<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.

Aa

<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.

Aa

<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.

Aa

<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.

Aa

<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.

Aa

<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.

Aa

<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.

Aa

<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 modifier

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 modifier

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>