font-size
Set type size independently, using scale tokens, explicit values or a fluid formula.
Overview
| Class | Declarations |
|---|---|
font-3xs | font-size: var(--font-size-3xs);
|
font-2xs | font-size: var(--font-size-2xs);
|
font-xs | font-size: var(--font-size-xs);
|
font-sm | font-size: var(--font-size-sm);
|
font-md | font-size: var(--font-size-md);
|
font-lg | font-size: var(--font-size-lg);
|
font-xl | font-size: var(--font-size-xl);
|
font-2xl | font-size: var(--font-size-2xl);
|
font-3xl | font-size: var(--font-size-3xl);
|
font-4xl | font-size: var(--font-size-4xl);
|
font-5xl | font-size: var(--font-size-5xl);
|
font-6xl | font-size: var(--font-size-6xl);
|
font-7xl | font-size: var(--font-size-7xl);
|
font-8xl | font-size: var(--font-size-8xl);
|
font-9xl | font-size: var(--font-size-9xl);
|
font-10xl | font-size: var(--font-size-10xl);
|
font-size:<size> | font-size: <size>;
|
Examples
Basic usage
Choose a step for the role of the text, then check it at the actual reading width.
Use font:* size tokens to change font size without setting line height or letter spacing. These specimens share leading-md, so their line height scales with their size.
<!-- font-xs --><p id="target" class="m:0 font-xs leading-md">Design with clarity.</p><!-- font-sm --><p id="target" class="m:0 font-sm leading-md">Design with clarity.</p><!-- font-md --><p id="target" class="m:0 font-md leading-md">Design with clarity.</p><!-- font-lg --><p id="target" class="m:0 font-lg leading-md">Design with clarity.</p><!-- font-xl --><p id="target" class="m:0 font-xl leading-md">Design with clarity.</p><!-- font-2xl --><p id="target" class="m:0 font-2xl leading-md">Design with clarity.</p>With line height
Pair font:* with leading:* to control size and line height independently. Both paragraphs below use the same 16px type and line width.
<!-- leading-xs --><p id="target" class="max-w:24ch m:0 font-md leading-xs">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p><!-- leading-lg --><p id="target" class="max-w:24ch m:0 font-md leading-lg">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>Use text:* when you want the combined size, leading and tracking treatment.
Use an explicit font size
A clamp() formula can respond to the viewport while keeping a minimum and maximum. Adjust this real viewport: at a 16px root size, the title grows from 20px to 32px between 1000px and 1600px.
<!-- 20px minimum · 2vw preferred · 32px maximum --><h2 id="target" class="m:0 font-size:clamp(1.25rem,2vw,2rem) font-medium leading-xs">A clearer canvas</h2>Prefer a named token when a value is reused across the interface.
Apply conditionally
Resize the viewport to cross the sm and lg breakpoints. The print rule returns the type to font-sm; use Print preview to inspect the actual print layout.
<!-- Responsive supporting text --><p id="target" class="m:0 font-sm leading-md font-sm@print font-md@screen@sm font-lg@screen@lg">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>