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;
}