New

Uniform CSS v1.2 released with new localized important and JSON output mode! Release note

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 80px 5rem
12xl text-12xl 96px 6rem

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: 5rem;
--font-12xl: 6rem;

--font-2xs-leading: 1.875;
--font-xs-leading: 1.875;
--font-sm-leading: 1.75;
--font-md-leading: 1.75;
--font-lg-leading: 1.625;
--font-xl-leading: 1.625;
--font-2xl-leading: 1.5;
--font-3xl-leading: 1.375;
--font-4xl-leading: 1.25;
--font-5xl-leading: 1.25;
--font-6xl-leading: 1.25;
--font-7xl-leading: 1.25;
--font-8xl-leading: 1.25;
--font-9xl-leading: 1.125;
--font-10xl-leading: 1.125;
--font-11xl-leading: 1.125;
--font-12xl-leading: 1.125;
}