New

Uniform CSS has now been officially released!
Read more


Sizing

Font Sizes

Visual reference of all default font sizes.


Visual Reference

The following table visually represents all the font-sizes that are available.

Size Class Pixel Rem
2xs text-2xs 10px 0.625rem
xs text-xs 12px 0.75rem
sm text-sm 14px 0.875rem
md text-md 16px 1rem
lg text-lg 18px 1.125rem
xl text-xl 20px 1.25rem
2xl text-2xl 24px 1.5rem
3xl text-3xl 28px 1.75rem
4xl text-4xl 32px 2rem
5xl text-5xl 36px 2.25rem
6xl text-6xl 40px 2.5rem
7xl text-7xl 48px 3rem
8xl text-8xl 56px 3.5rem
9xl text-9xl 64px 4rem
10xl text-10xl 72px 4.5rem
11xl text-11xl 88px 5.5rem
12xl text-12xl 104px 6.5rem
13xl text-13xl 120px 7.5rem

Basic Usage

Apply the text-<size> utility to any text based element.

<h1 class="text-6xl">
H1 Heading
</h1>

CSS Variables

Customize the font-size and line-height of each size by overriding the following CSS custom properties.

:root {
--font-2xs: 0.625rem;
--font-xs: 0.75rem;
--font-sm: 0.875rem;
--font-md: 1rem;
--font-lg: 1.125rem;
--font-xl: 1.25rem;
--font-2xl: 1.5rem;
--font-3xl: 1.75rem;
--font-4xl: 2rem;
--font-5xl: 2.25rem;
--font-6xl: 2.5rem;
--font-7xl: 3rem;
--font-8xl: 3.5rem;
--font-9xl: 4rem;
--font-10xl: 4.5rem;
--font-11xl: 5.5rem;
--font-12xl: 6.5rem;
--font-13xl: 7.5rem;

--font-2xs-leading: var(--leading-loosest);
--font-xs-leading: var(--leading-loosest);
--font-sm-leading: var(--leading-looser);
--font-md-leading: var(--leading-looser);
--font-lg-leading: var(--leading-loose);
--font-xl-leading: var(--leading-loose);
--font-2xl-leading: var(--leading-normal);
--font-3xl-leading: var(--leading-tight);
--font-4xl-leading: var(--leading-tighter);
--font-5xl-leading: var(--leading-tighter);
--font-6xl-leading: var(--leading-tighter);
--font-7xl-leading: var(--leading-tighter);
--font-8xl-leading: var(--leading-tighter);
--font-9xl-leading: var(--leading-tightest);
--font-10xl-leading: var(--leading-tightest);
--font-11xl-leading: var(--leading-tightest);
--font-12xl-leading: var(--leading-tightest);
--font-13xl-leading: var(--leading-tightest);
}