Most of a design is text
Strip the images, icons and colors from any app or website. What’s left is text — usually 80–90% of the page.
Buttons are text. Navigation is text. Headings, labels, prices, error messages. All text.
Typography isn’t one part of design. It is the design, more than anything else on the screen.
Good type is invisible
Nobody looks at a clean site and thinks “great line height.” They just think it looks professional. Expensive, even.
Bad typography works in reverse. A design can have a perfect palette and solid layout, but if the type is off, the whole thing feels cheap. Most people can’t explain why. They just feel it.
Same HTML, same content. Only the typography changes.
NEW
Ship faster with confidence
Every release is tested, previewed and reviewed before it reaches a single customer. Move quickly without breaking the things people rely on.
NEW
Ship faster with confidence
Every release is tested, previewed and reviewed before it reaches a single customer. Move quickly without breaking the things people rely on.
Typography is a system, not a feeling
Good typography isn’t taste, or nudging pixels until something “feels right.” It’s a small set of guidelines applied consistently: a handful of sizes instead of twenty, two weights instead of five, line heights that follow the size of the text.
Every guideline exists for a mechanical reason — how the eye tracks a line, finds the next one, tells letters apart. None of it is decoration.
That’s good news. It means typography is learnable.
One font, 7 sizes, 2 weights, 3 colors. Everything below is built from just these.
PROJECT
Aurora Dashboard
A shared workspace for tracking releases, incidents and uptime across every environment your team runs.
99.9%
Uptime
1.2k
Deploys
Guidelines, not laws
Everything in this course is a guideline, not a law. Strong defaults that work in most scenarios, across websites and apps — but context always wins.
The order matters, though. Learn the guideline, understand why it exists, then break it deliberately. Broken by accident is why designs look off. Broken knowingly is where style comes from.
Stop designing by default
Browsers ship with typography defaults, and almost all of them are wrong for real websites and apps. Default line height is too tight for body copy and too loose for headings. Paragraphs stretch to the full width of their container.
Defaults exist to render text, not to make it readable. The rest of this module is a tour of every default worth overriding — and what to replace it with.