TypographyFont Size
Yumma CSS 3.5 is live! 🎉

Font Size

Controls the font size of an element.

ClassStyle
fs-xsfont-size: 0.75rem;
fs-smfont-size: 0.875rem;
fs-mdfont-size: 1rem;
fs-lgfont-size: 1.125rem;
fs-xlfont-size: 1.25rem;
fs-xxlfont-size: 1.5rem;
fs-3xlfont-size: 1.875rem;
fs-4xlfont-size: 2.25rem;
fs-5xlfont-size: 3rem;
fs-6xlfont-size: 3.75rem;
fs-7xlfont-size: 4.5rem;
fs-8xlfont-size: 6rem;
fs-9xlfont-size: 8rem;

Extra Small

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-slate">Aa</p>
</div>

Small

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-slate">Aa</p>
</div>

Medium

Initial value

This is the standard size for body text.

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

Large

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-slate">Aa</p>
</div>

Extra Large

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-slate">Aa</p>
</div>

XXL

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-slate">Aa</p>
</div>

3XL

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-slate">Aa</p>
</div>

4XL

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-slate">Aa</p>
</div>

5XL

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-slate">Aa</p>
</div>

6XL

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-slate">Aa</p>
</div>

7XL

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-slate">Aa</p>
</div>

8XL

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-slate">Aa</p>
</div>

9XL

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-slate">Aa</p>
</div>

Using utility variants

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

Using media queries

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

Using hover states

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