CSS Primer For the AI Era

A vocabulary for shaping interfaces with AI

User Tools

Site Tools


vocabulary:css_visual_vocabulary:typographic_contrast

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

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

Typographic contrast is the foundation of:

  • Hierarchy — what speaks first
  • Tone — how the text feels
  • Rhythm — how the page breathes
  • Readability — comfort and clarity

Without typographic contrast,
everything speaks in the same voice
.


Tony de Araujo —New York | Lisbon


vocabulary/css_visual_vocabulary/typographic_contrast.txt · Last modified: by editor