Typography Scales for Web Applications
Modular scales, line height, and readability for dashboards and marketing pages.
Nestlancer Editorial
Consistent type scales create rhythm across dashboards and marketing pages—users parse hierarchy unconsciously when sizes relate mathematically.
Modular scale
Common ratios: 1.125 (major second) or 1.25 (major third).
| Token | Example size |
|---|---|
text-xs | 12px |
text-sm | 14px |
text-base | 16px |
text-lg | 18px |
text-xl | 20px |
display | 32–40px |
Line height
- Body: 1.5–1.6 for paragraphs
- Headings: 1.2–1.3 tighter
- UI labels: 1.4 with single lines
Readability limits
- 45–75 characters per line for long prose
- Dashboard tables: tabular nums, 13–14px minimum
- Never below 12px for essential UI text
Font pairing
One family with multiple weights often beats two families. Variable fonts reduce payload.
Document tokens in design system—developers should not eyeball font-size: 15px per component.
Typography scales are infrastructure—change once, update everywhere.
Comments
Loading comments…
Related posts
Design
Brand Identity for Digital-First Products
Logo systems, voice, and visual language that survive app icons and social crops.
Design
Design Ops for Growing Product Teams
Rituals, tooling, and intake processes that keep design shipping with engineering.
Design
Inclusive Design Beyond Compliance Checklists
Cognitive accessibility, plain language, and trauma-informed patterns.
Design
Data Visualization UX for Dashboards
Chart selection, color semantics, and drill-down patterns for decision makers.