Font Stack
字体栈
Aliases:字体栈字体回退备用字体字体族字体列表font stackfont-family
What is it
An ordered fallback chain of typefaces: when the first face is missing the browser walks down to the next, with a generic family as the final safety net. System stacks cost nothing and render instantly; web fonts carry brand character but need font-display to tame flashing; local-first splits the difference. The order of the stack is the order of rendering decisions.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Body and UI text must render reliably on any device
- Brand fonts cover only some weights or scripts and need a solid fallback
- First paint matters and font requests must not block text
✕ When not to use
- Layout collapses without one display face — e.g. a logotype
- Seven or eight near-identical faces — decision cost with no payoff
- Fallbacks with wildly different metrics that break the layout on swap
Variants
System stack
系统栈
Zero download, zero flash — varies with the OS
Web font + fallback
网络字体 + 回退
Brand consistency first — needs font-display and metric matching
Local-first
本地优先
Use the local face when present, download only when missing
Implementation
font-family@font-facefont-displaysize-adjustWrite the stack in one line: 'Inter', 'PingFang SC', system-ui, sans-serif. For CJK, always place a Chinese family after the Latin face or glyphs fall to an ugly default. Load web fonts with font-display: swap or optional; use size-adjust and ascent-override to match fallback metrics so nothing jumps on swap. Keep a separate mono stack for code.
Platform API
font-family@font-facefont-displayfont-weightIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| CSS | font-family |
| CSS | @font-face |
| Next.js | next/font Automatic subsetting and size-adjust matching |
Related concepts
A ratio-based set of font sizes that assigns heading and body levels a stable rhythm. Multiply a base body size by a fixed ratio (1.25 major third, 1.333 perfect fourth) to step upward, producing predictable contrast between headings instead of hand-picked pixels. Ship it as sm/md/lg tokens or fluid clamp() steps.
FoundationUsed withThe vertical space one line of text occupies — it sets how tight or airy a paragraph feels. Display type tightens (1.1–1.3) to look built; body loosens (1.5–1.8) to support line-by-line reading; quotes can go looser still. Prefer unitless multiples so leading scales with font size instead of freezing in pixels.
FoundationUsed withA visual language built on "less is more": generous whitespace, a restrained monochrome palette and very few type scales let the content speak. All decoration is stripped away; hierarchy is created purely by space, weight and rhythm. Quiet, restrained, content-first.
StylesUsed with