Guide
Type scale for the web without drama
Build a type scale that is easy to implement in CSS, matches your content and works across viewports.
Typography on the web is fluid. It scales with screens, preferences, and zoom levels. Attempting to control it down to the pixel is a losing battle.
Embrace REMs
REM units are relative to the root font size (usually 16px). Why use them? Basically if a user sets their browser default font size to "Large" for accessibility, your REM-based layout scales up beautifully. Pixel-locked text stays small and unreadable.
Scale simply
You don't need a complex modular scale with standard deviations. Just pick enough sizes to show hierarchy.
- Body: 1rem (16px) - Readable base.
- Small: 0.875rem (14px) - For hints and secondary values.
- Headings: 1.5rem, 2rem, 2.5rem - Big enough to scan.
Use our REM to PX converter to check your math, but keep your CSS in REMs.