Type with a Voice
Once you know the rules cold, you earn the right to make type perform.
The first five modules were about discipline — legibility, system, restraint. This one is the reward: expression. Type can carry personality, move, and become the loudest thing on the page instead of the quietest. But expression is earned, not sprayed on.
The trap cuts both ways: a display face dumped into body copy is unreadable, and type so cautious it has no character is forgettable. The voice lives in knowing which rule you’re breaking, and why.
Seasoning, not the meal
Expressive and display faces are built for large and short — a headline, a logo, a single word that has to land. Their personality comes from extremes (dramatic contrast, tight spacing, unusual shapes) that delight at 60px and exhaust at 16px.
So the rule is simple: be bold in the headline, calm in the body. One expressive voice up top, set on a quiet, readable base. Character where it’s seen, legibility where it’s read.
Type you can tune
A variable font exposes its design as sliders — axes like weight, slant, and (here) a “casual” axis that softens the letterforms. One file, infinite in-between states, all live in the browser.
That’s a new kind of expression: instead of picking a fixed cut, you dial in the exact voice you want. Move the sliders and watch the same word change its personality.
Character
Letters that move
On a screen, type can animate — weight that breathes, words that assemble, headlines that respond to scroll or hover. Done with intent, kinetic typography turns text into the main event, no images required. It’s a defining look of expressive web design right now.
The non-negotiable: respect prefers-reduced-motion. Some readers feel ill from motion, so any animation must gracefully switch off when they’ve asked it to. Expression never overrides access.
prefers-reduced-motion automatically.
Earned, not random
Great expressive type breaks rules on purpose — cramped tracking for tension, a wild display face for one hero word, colour where convention says ink. The difference between striking and amateur is whether the break is a decision or an accident.
The test: can you name the rule you’re breaking and the effect you’re buying? If yes, break it boldly. If you can’t, you’re not expressing — you’re just missing the rule.
Voice, earned and misused
The same expressive impulse — once where it belongs, once where it doesn’t.
PROUD
A heavy, slanted variable face as the hero — massive, short, the whole personality of the page in two words.
The exact same face as body text — exhausting and barely legible. Character in the wrong place becomes friction.
Expression is contrast turned up to its loudest — one element shouting against a quiet, well-set base. It only works because everything else obeys the rules: a disciplined scale, a readable measure, a calm body. The voice is the single deliberate difference on a page that otherwise agrees with itself. That’s where the whole craft comes together.
The Voice glossary
Six words for making type perform. Tap a card to flip it.
Questions you actually ask
Express it on purpose
Mixed formats — multiple choice, multi-correct, fill-in, match, order, read-think-connect and write-your-own — each with layered hints: a nudge, the reasoning, then a deeper connection. Served from the question bank, never hardcoded.
That’s the six
You’ve walked the whole craft — now see it come together, or revisit any module.