UI

Typography

The craft of arranging type for legibility, hierarchy, and tone.

Typography is the selection and arrangement of typefaces, sizes, weights, line height, and spacing. It shapes both readability and personality — type carries an enormous share of a design's clarity and brand feel.

A disciplined type scale (a limited set of sizes and weights) creates hierarchy and consistency, while good line length and spacing make content effortless to read.

Key characteristics

  • The craft of arranging type — typeface, size, line height, spacing and measure — for legibility and tone.
  • A clear type scale establishes hierarchy between headings and body text.
  • Line length (measure) of roughly 45–75 characters reads most comfortably.
  • Conveys brand personality as strongly as colour or imagery.

Example

Pairing a characterful display face for headlines with a highly legible sans for body text gives a page personality without sacrificing readability.

Frequently asked questions

What is the difference between a typeface and a font?

A typeface is the design (e.g. Helvetica); a font is a specific instance of it (e.g. Helvetica Bold 12pt). In casual use the terms are often interchanged.

What line height should body text use?

Around 1.4–1.6× the font size suits most body text on screens, giving lines enough breathing room to read comfortably without feeling disconnected.

Need this done, not just defined?

I design and build it — Framer sites, product UI/UX, and more.

Get a fixed quote