Typography is 90% of web design. Get your type scale right and everything else falls into place.
Choose Two Fonts Maximum
One for headings, one for body — or use a single versatile family with multiple weights. System font stacks load instantly and look native on every platform.
Build a Type Scale
Use a modular scale (1.25 or 1.333 ratio). A practical starting point:
- Body: 16px / 1.6 line-height
- H3: 20px
- H2: 24px
- H1: 32–40px
Weight and Color Create Hierarchy
Not everything needs to be bigger. Use font-weight (400 vs 600 vs 700) and color (full vs muted) to differentiate levels without size inflation.
Limit yourself to 3–4 distinct text styles per page. More creates visual noise.