Establishing Typographic Hierarchy
Hierarchy is not just about making things look pretty. It's about communicating structure to the reader. A strong typographic hierarchy guides the eye, establishes the relative importance of different elements, and makes scanning easier without sacrificing the ability to read deeply.
The Scale
A modular scale is a sequence of numbers that relate to one another in a meaningful way. Using a scale ensures your font sizes are harmonious.
| Element | Variable | Size (rem) | Usage |
|---|---|---|---|
| H1 | --text-5xl |
4.0 | Page titles, major section headers |
| H2 | --text-4xl |
3.0 | Primary subsections |
| H3 | --text-3xl |
2.0 | Secondary subsections |
| Body | --text-lg |
1.125 | Primary reading text |
| Caption | --text-sm |
0.875 | Image captions, footnotes |
Implementation Note
Always use CSS custom properties (variables) for your scale. This allows you to easily adjust the entire system across breakpoints without rewriting every rule.