Typography
text-size
Style utility for setting optimally proportioned font size, line height and letter spacing all at once.
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
Use tokens like text:sm, text:md, and text:lg to style body text, descriptions, and paragraphs.
text:sm
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
text:md
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
text:lg
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
<p class="text:sm">Design is not just about aesthetics—it’s...</p><p class="text:md">Design is not just about aesthetics—it’s...</p><p class="text:lg">Design is not just about aesthetics—it’s...</p>If you don't want to include line height, use the font:<size>.
Headings
Use tokens like text:lg, text:xl, and text:2xl to style article headings.
text:2xl
heading 2
Shifting Dimensions Unfold Gently Beneath Layers of Balanced Design.
text:xl
heading 3
Shifting Dimensions Unfold Gently Beneath Layers of Balanced Design.
text:lg
heading 4
Shifting Dimensions Unfold Gently Beneath Layers of Balanced Design.
<h2 class="text:2xl">Design is not just about aesthetics—it’s...</h2><h3 class="text:xl">Design is not just about aesthetics—it’s...</h3><h4 class="text:lg">Design is not just about aesthetics—it’s...</h4>Page titles, hero sections
Use tokens like text:3xl and text:4xl to style page titles and hero sections.
text:4xl
Designing for clarity and consistency across every platform.
text:3xl
Designing for clarity and consistency across every platform.
<h1 class="text:4xl">Designing for clarity and consistency...</h1><h1 class="text:3xl">Designing for clarity and consistency...</h1>Use a precise size
Use text:* when the type scale utility should set font size, line height, and letter spacing together.
<p class="text:16px"> Body copy</p>Generated CSS
@layer utilities { .text\:16px { font-size: 16px; line-height: max(1.8em - max(0rem, 16px - 1rem) * 1.12, 16px); letter-spacing: clamp(-.072em, calc((16px - 1rem) * -.048), 0em) }}Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="text:1.25rem:hover text:40px@sm text:16px@print">...</div>