The CSS font-size property sets the size of text in a typographic style. It shapes hierarchy, readability, responsiveness, and the spacing calculations used throughout an interface. section 8.2.4 section 8.2.3
Choose font sizes with these practical decisions in mind:
- Start with body copy, commonly 16–18px, then establish sizes for headings and supporting text. section 8.2.4
- Prefer relative units such as rem or em when users may need to enlarge text or when the typography should respond across layouts. section 8.2.4
- Keep related pages consistent with a type ramp so changes in size communicate hierarchy rather than accidental variation. section 8.2.3
- Check each typeface visually because the same numeric size can appear larger or smaller depending on the font. section 8.2.4
- Coordinate font size with line height, margins, and padding so text follows a consistent vertical rhythm. section 10.5 section 8.2.5
A small type ramp
A starting ramp can use 1rem for body text, 1.5rem for a subtitle, 2rem for a title, 2.5rem for a subheading, and 3rem for a main heading. Adjust the values after viewing them in the chosen typeface.
