vocabulary:css_visual_vocabulary:case-contrast
Table of Contents
Typographic Case Contrast
the difference between uppercase, lowercase, and small caps
— shaping structure, tone, and emphasis
Typographic case contrast is the contrast of letterform structure.
It describes how text changes when its shape changes
— not its size, weight, or style.
Case contrast is subtle but powerful:
- Uppercase feels strong, architectural, formal
- Lowercase feels natural, flowing, conversational
- Small caps feel structured, quiet, refined
- Case contrast is the difference between voice and register.
What case contrast does
- Creates emphasis — uppercase draws attention without increasing weight
- Shapes tone — lowercase feels gentle; uppercase feels assertive
- Improves clarity — case changes help differentiate labels, metadata, acronyms
- Supports hierarchy — uppercase headings, lowercase body text
- Adds structure — small caps create quiet, formal emphasis
Case contrast is how typography signals role
through shape alone.
Forms of typographic case contrast
- Uppercase vs. lowercase — assertive vs. natural
- Small caps vs. lowercase — formal vs. flowing
- Title case vs. sentence case — structured vs. conversational
- Acronym contrast — uppercase blocks vs. text rhythm
Each form expresses a different
typographic register.
How we describe case contrast when working with AI
“Increase case contrast by using uppercase for labels.”
“Use lowercase for a softer, more conversational tone.”
“Switch to small caps for quiet emphasis.”
“Reduce case contrast to keep the text feeling calm.”
“Use uppercase sparingly to avoid shouting.”
These instructions keep intention clear
without micromanaging CSS.
Why case contrast matters
Typographic case contrast is the foundation of:
- Tone — emotional temperature of the text
- Hierarchy — structural clarity
- Readability — differentiation through shape
- Rhythm — variation without noise
Without case contrast,
everything shares the same
typographic posture.
Tony de Araujo —New York | Lisbon
vocabulary/css_visual_vocabulary/case-contrast.txt · Last modified: by editor
