TypographyFont Size
Yumma CSS 3.5 is live! 🎉

Font Size

Controls the font size of an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari
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.

Aa

<p class="fs-xs ta-c tc-slate">Aa</p>

Small

This size is often used for slightly larger text elements.

Aa

<p class="fs-sm ta-c tc-slate">Aa</p>

Medium

Initial value

This is the standard size for body text.

Aa

<p class="fs-md ta-c tc-slate">Aa</p>

Large

This size is often used for prominent headings.

Aa

<p class="fs-lg ta-c tc-slate">Aa</p>

Extra Large

This size is typically used for major headings or titles.

Aa

<p class="fs-xl ta-c tc-slate">Aa</p>

XXL

This size is often used for very prominent headings.

Aa

<p class="fs-xxl ta-c tc-slate">Aa</p>

3XL

This size is typically used for the largest headings.

Aa

<p class="fs-3xl ta-c tc-slate">Aa</p>

4XL

This size is often used for the most prominent headings.

Aa

<p class="fs-4xl ta-c tc-slate">Aa</p>

5XL

This size is typically used for the most prominent text elements.

Aa

<p class="fs-5xl ta-c tc-slate">Aa</p>

6XL

This size is often used for the most prominent text elements.

Aa

<p class="fs-6xl ta-c tc-slate">Aa</p>

7XL

This size is typically used for the largest display text.

Aa

<p class="fs-7xl ta-c tc-slate">Aa</p>

8XL

This size is typically used for the largest display text.

Aa

<p class="fs-8xl ta-c tc-slate">Aa</p>

9XL

This size is typically used for the largest display text.

Aa

<p class="fs-9xl ta-c tc-slate">Aa</p>

Using utility variants

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

Targeting different viewports

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

Targeting hover states

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