Learning on Web Dev Open is free for all.

Design Craft > Type carries itType is most of the design
Phase 02Type carries it88 of 434

Type is most of the design

Before colour, before layout, before any of the fun parts: the thing on the screen is words, and how they are set is what people react to.

Concept14 minAI pair

Count the pixels on a typical product screen and text wins by a distance. Everything else is arrangement around it. This is why the fastest route from generic to considered runs through typography rather than colour, and why a page in one well-set typeface with a real scale beats a page with a beautiful palette and default type every time.

A type system is four decisions: which faces, what sizes, what weights, and how the lines sit, leading, measure and tracking. Four decisions made once and applied consistently, rather than reconsidered per component, which is the actual difference between the two versions above.

The reason generated pages read as generated typographically is that models pick a face and then set everything else per component. The heading is 24px because headings are 24px, the card title is 18px because card titles are 18px, and nothing relates to anything. There is no scale, only conventions applied locally.

You should now be able to

  • Explain why type dominates perceived quality
  • Identify the four decisions that make up a type system
  • Read an interface by its type alone
Ask the community

Loading…