Font Size
The size of rendered text, forming the foundation of typographic hierarchy.
Plain English
Font size is not just about legibility — it communicates importance. Large text says "this is the headline, start here." Small text says "this is supporting detail, read if you need it." The most important design decision is not which size to use, but the ratio between your sizes. A flat hierarchy where everything is 16px forces the eye to read everything to understand priority.
Technical
Font size in CSS is set via the font-size property and accepts px, rem, em, %, vw, or clamp() values. rem is relative to the root font size (typically 16px browser default), making it the preferred unit for accessibility — it respects user browser font preferences. A type scale is a set of sizes derived from a ratio (commonly 1.25 Major Third or 1.333 Perfect Fourth).
Live Demo
Type scale
Each step up the scale roughly multiplies size by 1.25× — the Major Third ratio.
Usage
✓ Good usage
Establish a 5-stop scale: 12 / 14 / 16 / 24 / 48px and use each step consistently for captions / secondary / body / headings / hero text.
✗ Bad usage
Using 8 different arbitrary font sizes (13, 15, 17, 19, 22, 27, 33, 45px) creates visual noise — without a system, sizes feel random.
Recommended values
- 12px — captions, metadata, fine print
- 14px — secondary labels, supporting text
- 16px — base body copy (browser default, minimum for comfort)
- 18–20px — large body, intro paragraphs
- 24px — H3 / card headings
- 30–36px — H2 / section headings
- 48–60px — H1 / hero headlines
Common mistakes
- Setting body text below 16px — smaller text increases cognitive load and fails accessibility audits.
- Using px units everywhere — rem scales with user browser preferences; px overrides them.
- Creating too many stops in the scale — 4–6 distinct sizes are enough for most UIs.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use a type scale of 12 / 14 / 16 / 24 / 36 / 48px. Body text at 16px, card headings at 24px, page titles at 48px.