vocabulary:css_visual_vocabulary:size_contrast
Table of Contents
Typographic Size Contrast
the difference in text size
that shapes hierarchy and pacing
Typographic size contrast is the contrast of scale within typography
— the step‑changes between headings, subheads,
body text, and captions.
It is one of the clearest signals in visual design because
the eye responds to size before it interprets meaning.
Size contrast is not decoration.
It is hierarchy made visible.
- Large text speaks first.
- Medium text guides.
- Small text supports.
What size contrast does
- Creates hierarchy — clear levels of importance
- Improves scannability — the eye lands on larger anchors
- Shapes rhythm — size steps create pacing
- Supports tone — large feels bold; small feels quiet
- Clarifies structure — sections become visually distinct
Size contrast is the
architectural skeleton
of typography.
Forms of typographic size contrast
- Heading vs. body — primary vs. narrative
- Subhead vs. heading — secondary emphasis
- Body vs. caption — supportive, quiet text
- Typographic scales — consistent size steps across the system
Each form expresses a different level of importance.
How we describe size contrast when working with AI
“Increase size contrast between the heading and body text.”
“Reduce size contrast for a calmer hierarchy.”
“Use a larger subhead to guide the eye.”
“Keep size steps consistent across breakpoints.”
“Use small text only for supportive information.”
This turns size into intention
rather than guesswork.
Why size contrast matters
Typographic size contrast is the foundation of:
- Hierarchy — size signals importance
- Rhythm — size steps create pacing
- Tone — bold vs. quiet layouts
- Readability — clear separation of roles
Without size contrast,
everything speaks at the same volume.
Tony de Araujo —New York | Lisbon
vocabulary/css_visual_vocabulary/size_contrast.txt · Last modified: by editor