Typography
text-size
Apply font size, line height and letter spacing as one size-dependent treatment.
Overview
| Class | Declarations |
|---|---|
text-3xs | font-size: var(--font-size-3xs);
line-height: max(1.8em - max(0rem, var(--font-size-3xs) - 1rem) * 1.12, var(--font-size-3xs));
letter-spacing: clamp(-.072em, calc((var(--font-size-3xs) - 1rem) * -.048), 0em);
|
text-2xs | font-size: var(--font-size-2xs);
line-height: max(1.8em - max(0rem, var(--font-size-2xs) - 1rem) * 1.12, var(--font-size-2xs));
letter-spacing: clamp(-.072em, calc((var(--font-size-2xs) - 1rem) * -.048), 0em);
|
text-xs | font-size: var(--font-size-xs);
line-height: max(1.8em - max(0rem, var(--font-size-xs) - 1rem) * 1.12, var(--font-size-xs));
letter-spacing: clamp(-.072em, calc((var(--font-size-xs) - 1rem) * -.048), 0em);
|
text-sm | font-size: var(--font-size-sm);
line-height: max(1.8em - max(0rem, var(--font-size-sm) - 1rem) * 1.12, var(--font-size-sm));
letter-spacing: clamp(-.072em, calc((var(--font-size-sm) - 1rem) * -.048), 0em);
|
text-md | font-size: var(--font-size-md);
line-height: max(1.8em - max(0rem, var(--font-size-md) - 1rem) * 1.12, var(--font-size-md));
letter-spacing: clamp(-.072em, calc((var(--font-size-md) - 1rem) * -.048), 0em);
|
text-lg | font-size: var(--font-size-lg);
line-height: max(1.8em - max(0rem, var(--font-size-lg) - 1rem) * 1.12, var(--font-size-lg));
letter-spacing: clamp(-.072em, calc((var(--font-size-lg) - 1rem) * -.048), 0em);
|
text-xl | font-size: var(--font-size-xl);
line-height: max(1.8em - max(0rem, var(--font-size-xl) - 1rem) * 1.12, var(--font-size-xl));
letter-spacing: clamp(-.072em, calc((var(--font-size-xl) - 1rem) * -.048), 0em);
|
text-2xl | font-size: var(--font-size-2xl);
line-height: max(1.8em - max(0rem, var(--font-size-2xl) - 1rem) * 1.12, var(--font-size-2xl));
letter-spacing: clamp(-.072em, calc((var(--font-size-2xl) - 1rem) * -.048), 0em);
|
text-3xl | font-size: var(--font-size-3xl);
line-height: max(1.8em - max(0rem, var(--font-size-3xl) - 1rem) * 1.12, var(--font-size-3xl));
letter-spacing: clamp(-.072em, calc((var(--font-size-3xl) - 1rem) * -.048), 0em);
|
text-4xl | font-size: var(--font-size-4xl);
line-height: max(1.8em - max(0rem, var(--font-size-4xl) - 1rem) * 1.12, var(--font-size-4xl));
letter-spacing: clamp(-.072em, calc((var(--font-size-4xl) - 1rem) * -.048), 0em);
|
text-5xl | font-size: var(--font-size-5xl);
line-height: max(1.8em - max(0rem, var(--font-size-5xl) - 1rem) * 1.12, var(--font-size-5xl));
letter-spacing: clamp(-.072em, calc((var(--font-size-5xl) - 1rem) * -.048), 0em);
|
text-6xl | font-size: var(--font-size-6xl);
line-height: max(1.8em - max(0rem, var(--font-size-6xl) - 1rem) * 1.12, var(--font-size-6xl));
letter-spacing: clamp(-.072em, calc((var(--font-size-6xl) - 1rem) * -.048), 0em);
|
text-7xl | font-size: var(--font-size-7xl);
line-height: max(1.8em - max(0rem, var(--font-size-7xl) - 1rem) * 1.12, var(--font-size-7xl));
letter-spacing: clamp(-.072em, calc((var(--font-size-7xl) - 1rem) * -.048), 0em);
|
text-8xl | font-size: var(--font-size-8xl);
line-height: max(1.8em - max(0rem, var(--font-size-8xl) - 1rem) * 1.12, var(--font-size-8xl));
letter-spacing: clamp(-.072em, calc((var(--font-size-8xl) - 1rem) * -.048), 0em);
|
text-9xl | font-size: var(--font-size-9xl);
line-height: max(1.8em - max(0rem, var(--font-size-9xl) - 1rem) * 1.12, var(--font-size-9xl));
letter-spacing: clamp(-.072em, calc((var(--font-size-9xl) - 1rem) * -.048), 0em);
|
text-10xl | font-size: var(--font-size-10xl);
line-height: max(1.8em - max(0rem, var(--font-size-10xl) - 1rem) * 1.12, var(--font-size-10xl));
letter-spacing: clamp(-.072em, calc((var(--font-size-10xl) - 1rem) * -.048), 0em);
|
text:<size> | font-size: <size>;
line-height: max(1.8em - max(0rem, <size> - 1rem) * 1.12, <size>);
letter-spacing: clamp(-.072em, calc((<size> - 1rem) * -.048), 0em);
|
Examples
Body text
Body text
One utility controls three properties. Compare the actual size, leading and tracking at the preview’s reading width.
Use the smaller type steps for supporting text and body copy. Each text:* utility sets font size, line height and letter spacing together.
<!-- text-sm --><p id="target" class="max-w:28ch m:0 text-sm font-regular">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p><!-- text-md --><p id="target" class="max-w:28ch m:0 text-md font-regular">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p><!-- text-lg --><p id="target" class="max-w:28ch m:0 text-lg font-regular">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>Use font:* when only the size should change.
Headings
Headings
One utility controls three properties. Compare the actual size, leading and tracking at the preview’s reading width.
Use the middle steps to establish a heading hierarchy. The heading element expresses structure; the class controls its visual treatment.
<!-- text-lg --><h2 id="target" class="max-w:28ch m:0 text-lg font-regular">A clearer way to work</h2><!-- text-xl --><h2 id="target" class="max-w:28ch m:0 text-xl font-regular">A clearer way to work</h2><!-- text-2xl --><h2 id="target" class="max-w:28ch m:0 text-2xl font-regular">A clearer way to work</h2>Page titles, hero sections
Page titles, hero sections
One utility controls three properties. Compare the actual size, leading and tracking at the preview’s reading width.
Larger steps use tighter leading and tracking. Keep titles short enough to wrap comfortably at narrow widths.
<!-- text-3xl --><h2 id="target" class="max-w:28ch m:0 text-3xl font-regular">Space for good ideas.</h2><!-- text-4xl --><h2 id="target" class="max-w:28ch m:0 text-4xl font-regular">Space for good ideas.</h2>Use a precise size
An explicit text:17px applies the same size-dependent formulas to a measured value outside the named scale. Inspect all three computed properties below.
Use a precise size
One utility controls three properties. Compare the actual size, leading and tracking at the preview’s reading width.
<!-- Explicit 17px combined treatment --><p id="target" class="max-w:28ch m:0 text:17px">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>Generated CSS
@layer utilities { .text\:17px { font-size: 17px; line-height: max(1.8em - max(0rem, 17px - 1rem) * 1.12, 17px); letter-spacing: clamp(-.072em, calc((17px - 1rem) * -.048), 0em) }}Apply conditionally
The title changes from text-2xl to text-4xl at sm, updating size, leading and tracking together. Print preview applies the smaller text-xl treatment.
Apply conditionally
One utility controls three properties. Compare the actual size, leading and tracking at the preview’s reading width.
<!-- Responsive combined treatment --><h2 id="target" class="m:0 text-2xl font-regular text-xl@print text-4xl@screen@sm">Space for good ideas.</h2>