← All journal posts

Craft

Typography basics every product designer should know

A short, practical guide to type scales, line length and hierarchy — the small decisions that make interfaces feel calm and readable.

var(--variable-mrHHDijM7)

Typography is most of what people actually look at in an interface. Get it right and the rest of your design has room to breathe.

Begin with a scale. Pick a base size for body text — usually 16px on the web — and build a small set of steps above and below it. Fewer sizes make stronger hierarchy.

Watch your line length. Somewhere between 50 and 75 characters per line is comfortable for most reading. If your paragraphs stretch across a wide screen, constrain the container.

Use weight and spacing before color. A heading that’s one step larger with a little more space above it often does more than a bright accent ever could.

Finally, pair with intention. A serif for headings and a clean sans-serif for body text is a classic for a reason: it creates contrast while staying easy to read.

Create a free website with Framer, the website builder loved by startups, designers and agencies.