Type Scale
字号阶梯
Aliases:字号阶梯标题比例字级字体大小层级字号系统type scalemodular scale
What is it
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.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- The page carries multiple text levels — headings, body, captions
- Teams need one shared size system instead of ad-hoc 13px and 15px
- Responsive type should scale fluidly or step at breakpoints with restraint
✕ When not to use
- Icon toolbars and micro UI where one size is enough
- Pixel-exact design reproduction that forbids any rounding
- More than eight steps — the hierarchy stops being legible
Variants
Modular scale
模数比例
Base size times a fixed ratio per step — discrete and rhythmic
Fluid type
流式字号
clamp(min, viewport interpolation, max) — continuous across viewports
T-shirt sizes
尺码档位
Semantic sm / md / lg / xl tokens — easy to reference in code
Implementation
clamp()remcalc()font-size: var(--text-lg)Define six to eight rem size variables (--text-xs … --text-3xl) with the ratio noted in a comment. Jump levels rather than stacking near-equal sizes — adjacent steps need at least a 1.15× gap to read. Fluid steps look like clamp(0.95rem, 0.8rem + 0.6vw, 1.25rem) with both ends capped. CJK body starts at 15–17px, Latin at 16px. Any size change must re-check leading and measure.
Platform API
font-sizeclamp()remcalc()In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| CSS | clamp() The go-to for fluid type steps |
| CSS | font-size |
| Tailwind CSS | text-sm / text-base / text-lg |
Compare
Full comparison →| Type Scale字号阶梯 | Line Height行高 | Measure行宽 | |
|---|---|---|---|
| Best for text | Every heading and body level | Body paragraphs mainly; display tightens separately | Long-form body and explanatory copy |
| Adjust granularity | Steps by ratio — one level at a time | Continuous — 0.05 is already perceptible | Drag container width, measured in ch |
| Responsive | High — continuous with clamp() | Medium — two steps across breakpoints | High — max-width inside a fluid container |
Related concepts
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.
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 withHow many characters fit on one line — it decides whether the eye can return to the next line without effort. The comfort zone is roughly 45–75 Latin characters (28–40 CJK glyphs), with 65ch the usual target. Too narrow and the eye turns constantly; too wide and it loses the line. Control it with max-width in ch rather than guessing in pixels.
FoundationUsed withA visual language that lays out the page like a magazine spread: serif display headings, drop caps, hairline column rules, issue numbering and generous margins, with imagery woven into a page-turning rhythm. Black, white and grey grounds, serif-and-sans pairing — the layout tells the story, not ornament.
StylesUsed with