The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Declare a resilient stack | body {
font-family:
Inter, ui-sans-serif, system-ui, sans-serif;
} | View examples |
| Use scalable text | body { font-size: 1rem; } | View examples |
| Set unitless line height | body { line-height: 1.5; } | View examples |
| Select a numeric weight | strong { font-weight: 700; } | View examples |
| Use italic style | em { font-style: italic; } | View examples |
| Load a web font | @font-face {
font-family: 'Example Sans';
src: url('/fonts/example.woff2') format('woff2');
} | View examples |
| Avoid blocking text indefinitely | @font-face { font-display: swap; } | View examples |
| Limit line length | article { max-inline-size: 65ch; } | View examples |
| Align by writing direction | .copy { text-align: start; } | View examples |
| Preserve breaks and wrap | .message { white-space: pre-wrap; } | View examples |
| Keep text on one line | .label { white-space: nowrap; } | View examples |
| Break emergency overflow | .content { overflow-wrap: anywhere; } | View examples |
| Enable language-aware hyphenation | p { hyphens: auto; } | View examples |
| Show a single-line ellipsis | .title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} | View examples |
| Style an underline | a {
text-decoration: underline 0.12em;
text-underline-offset: 0.18em;
} | View examples |
| Align numeric columns | .amount { font-variant-numeric: tabular-nums; } | View examples |
Typography is layout: font metrics, line height, measure, language, and wrapping all affect the size and readability of a page. Start from resilient system fallbacks, preserve user zoom, declare document language, and use truncation only when the complete text remains available elsewhere.
Step by step
Detailed examples
Build a fallback chain, not a single dependency
font-family is an ordered list. Quote names containing spaces and finish with a generic family so text remains usable when preferred fonts are unavailable. Numeric weights give variable and static font matching more information than assuming every family has just normal and bold faces.
body {
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
font-weight: 400;
}
code, pre {
font-family: "IBM Plex Mono", ui-monospace, monospace;
}Scale text without defeating user preferences
rem follows the root font size and em follows the current element, making both useful for scalable systems. Unitless line-height inherits as a multiplier instead of a fixed length. Avoid disabling zoom or shrinking essential text below readable defaults to force content into a design.
body {
font-size: 1rem;
line-height: 1.5;
}
h1 {
font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
line-height: 1.1;
}
small { font-size: 0.875rem; }Declare downloadable faces precisely
Each @font-face rule describes one range of style and weight. Prefer WOFF2, match descriptors to the actual font data, and preload only fonts that are truly critical. font-display controls the rendering timeline; swap favors immediate readable fallback but can introduce a later metric shift, so choose compatible fallback metrics.
@font-face {
font-family: "Example Sans";
src: url('/fonts/example-sans.woff2') format('woff2');
font-style: normal;
font-weight: 300 800;
font-display: swap;
}
body { font-family: "Example Sans", system-ui, sans-serif; }Control measure and logical alignment
Long lines are difficult to track, so constrain prose independently of the page shell. ch is based on the zero glyph and is an approximation rather than an exact character count. start and end alignment follow writing direction; avoid fully justified text unless hyphenation and spacing have been tested in every supported language.
article {
max-inline-size: 65ch;
margin-inline: auto;
text-align: start;
}
article p { margin-block: 0 1em; }Choose how source whitespace and wrapping interact
white-space controls collapsing and soft wrapping. pre-wrap preserves author-entered line breaks while allowing wrapping, making it useful for user text; nowrap is appropriate only when overflow has an intentional treatment. overflow-wrap:anywhere supplies emergency opportunities for URLs and identifiers without inserting characters into copied text.
.user-note {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.compact-label {
white-space: nowrap;
}Give text rules the language context they need
Automatic hyphenation depends on the element's language, so set lang in HTML and update it for passages in another language. Text transforms and line-breaking conventions also vary by language. Tabular numerals improve scanning in aligned tables, but only when the font exposes that OpenType feature.
<article lang="en" class="prose">
<p>Extraordinarily long words can use language-aware breaks.</p>
<table>
<tr><th>Subtotal</th><td class="amount">1,250.00</td></tr>
<tr><th>Total</th><td class="amount">12,000.00</td></tr>
</table>
</article>
<style>
.prose { hyphens: auto; }
.amount { font-variant-numeric: tabular-nums; }
</style>Treat truncation as data loss in the interface
text-overflow only signals clipped inline overflow; it does not itself create overflow or restrict text to one line. Combine it with overflow and white-space for a single-line ellipsis, then expose the complete value through nearby detail, an expandable view, or an accessible name. Never use color alone to distinguish links.
.item-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
a {
text-decoration-line: underline;
text-decoration-thickness: 0.12em;
text-underline-offset: 0.18em;
}Local code tester
Tune a readable text system
Adjust the font stack, scale, measure, wrapping, and numeric variants on a small article.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.