CSS Primer For the AI Era

A vocabulary for shaping interfaces with AI

User Tools

Site Tools


vocabulary:css_visual_vocabulary:weight_contrast

Typographic Weight Contrast

the difference in boldness
that shapes how text speaks

Typographic weight contrast is the contrast of boldness
— the difference between light, regular, medium, semibold, bold,
and black weights.
It is the simplest, most immediate way to change the voice of text.

Weight contrast is not decoration.
It is volume
.

  • Light text whispers
  • Regular text speaks
  • Bold text calls attention
  • Heavy text demands it

Weight contrast tells the reader what matters
before they read a word.


What weight contrast does

  • Reveals hierarchy — headings vs. body text
  • Creates emphasis — bold for importance, light for subtlety
  • Shapes tone — lighter weights feel calm; heavier weights feel strong
  • Improves scannability — bold anchors help the eye navigate
  • Supports rhythm — predictable weight changes create structure

Weight contrast is the backbone of
typographic clarity
.


How we describe weight contrast when working with AI

These phrases give AI clear, predictable direction:

“Increase weight contrast between the heading and body text.”
“Use a lighter weight for a quieter tone.”
“Reduce weight contrast to keep the hierarchy subtle.”
“Use bold only for true emphasis.”
“Keep weight contrast consistent across sections.”

This turns weight
into intention
rather than ornament
.


The main forms of weight contrast

  • Light vs. Regular — soft vs. neutral
  • Regular vs. Bold — everyday vs. emphasized
  • Bold vs. Heavy — emphasis vs. dominance
  • Mixed-weight systems — predictable steps across a scale

Each form expresses a different
kind of typographic voice
.


Why weight contrast matters

Weight contrast is the foundation of:

  • Hierarchy — bold speaks first
  • Tone — weight sets emotional temperature
  • Readability — weight anchors guide the eye
  • Rhythm — weight changes create pacing

Without weight contrast,
everything speaks at the same volume
.


Tony de Araujo —New York | Lisbon


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