vocabulary:css_visual_vocabulary:typographic_contrast
Table of Contents
Typographic Contrast
the differences in weight, size, style,
and spacing that shape how text speaks
Typographic contrast is how typography
creates hierarchy, emphasis,
and tone through variation.
It is the contrast of voice
— how text whispers, speaks, or calls attention.
Where color contrast guides the eye through difference in value or hue,
typographic contrast guides the eye through difference in form.
Typographic contrast is not decoration.
It is communication.
The main forms of typographic contrast
- Weight contrast — light vs. regular vs. bold
- Size contrast — headings, subheads, body text
- Style contrast — italic, small caps, monospace
- Case contrast — uppercase vs. lowercase
- Spacing contrast — line-height, letter-spacing
- Font contrast — pairing typefaces with distinct roles
Each one expresses
a different kind of difference.
What typographic contrast does
- Reveals hierarchy — headings vs. body text
- Creates emphasis — bold, italic, or size shifts
- Shapes tone — soft, loud, restrained, expressive
- Improves readability — clear separation of roles
- Establishes rhythm — predictable patterns of text sizes
Typography becomes
a system of signals.
How we describe typographic contrast when working with AI
These phrases give AI clear, predictable direction:
“Increase typographic contrast between the heading and body text.”
“Use a lighter weight for a quieter tone.”
“Reduce size contrast to keep the hierarchy subtle.”
“Add spacing contrast to improve readability.”
“Keep typographic contrast consistent across sections.”
This turns typography into intention
rather than ornament.
Why typographic contrast matters
vocabulary/css_visual_vocabulary/typographic_contrast.txt · Last modified: by editor
