Typography

Typography is the craft of arranging type so text is legible, readable and appropriate to the product, covering typeface, size, spacing and hierarchy.

beginner

Every interface is full of text. Headings, labels, body copy, buttons, error messages and tooltips are all type. Every piece of text is a design decision, because its typeface, size, weight and colour all communicate something. Good typography disappears when it is working. Bad typography is noticed immediately.

How it works

A type scale is a system of sizes that creates consistent hierarchy. It defines how large headings are relative to body text and how the system grows. Modular scales use a mathematical ratio. Practical scales are defined by what the interface needs. Either way, a consistent scale is one of the most effective ways to create visual order.

Line height, called leading in print, is the vertical space between lines. Too tight and text feels cramped. Too loose and the eye loses its place. Body text usually wants a line height around 1.5 to 1.75 times the font size.

Measure, or line length, is how many characters fit on a line. The comfortable range for body text is roughly 45 to 75 characters per line. Longer lines make it hard to find the start of the next line. Shorter lines create excessive breaks.

Hierarchy is created through size, weight, colour and spacing together. A clear typographic hierarchy tells users what to read first and how the content is organised. It should be obvious at a glance.

When to use it

Typography decisions matter in every interface, because every interface has text.

System fonts when speed and familiarity matter. System fonts like SF Pro and Roboto load instantly and match platform conventions. They are a deliberate choice, not a fallback.
Custom fonts when brand character matters. A distinctive typeface strengthens identity. The trade-off is load time and familiarity.
Variable fonts when you want flexibility with less weight. A variable font is one file that interpolates between weights and widths, reducing file size and enabling more fluid expression.

The choice between system and custom fonts is a product decision, not a typography rule.

Common mistakes

Treating all text the same. Headlines, body, labels and captions have different jobs and need different sizes, weights and spacing. A single size for everything produces a flat interface with no hierarchy.
Ignoring contrast. Text that looks elegant at 3:1 contrast is unreadable for many users. WCAG AA requires 4.5:1 for normal text and 3:1 for large text.
Picking display typefaces for body text. Romantic, decorative and highly stylised typefaces work at large sizes. They are poor for body text. The job of body type is to be invisible.
No type scale. Ad-hoc sizes create visual noise and make the interface feel unfinished. Design a scale and use it.
Forgetting internationalisation. A typeface needs glyph coverage for the scripts you support. Different scripts have different baseline behaviours and typical sizes. A system that works for Latin text may need adjustment for Cyrillic or Arabic.

Key takeaways

Typography is not making text look good. It is making text work: legible, readable and appropriate.
A type scale creates hierarchy. Without one, the interface has no visual order.
Line height and line length both affect readability. Body text wants roughly 1.5 to 1.75 line height and 45 to 75 characters per line.
System fonts are a deliberate, defensible choice. Custom fonts are a brand decision with a load-time cost.
Accessibility and typography are deeply connected: contrast, size, line height and typeface choice all determine who can read the interface.

No lessons cover this yet

This term is defined ahead of the curriculum — the definition above stands on its own, and lessons will link here once they exist.

Browse what is published

Common questions

What is the difference between a typeface and a font?: A typeface is the design of the letterforms, the visual identity. Helvetica is a typeface. A font is a specific file or instantiation of that typeface at particular sizes and weights. Helvetica Bold 16px is a font. Designers choose typefaces, then work with fonts as the implementation of those choices. The distinction matters when you are deciding what to buy, what to load and what to specify.
Should I use a system font or a custom font?: It depends on what the product is optimising for. System fonts load instantly, match platform conventions and are familiar to users. They are a strong default. Custom fonts give you more control over visual character and can strengthen brand identity, but they cost load time and may be less familiar. A content product where reading comfort is central may justify a custom body font. A tool where speed matters may not.
What makes a typeface good for body text?: Open counters, clear letterforms and generous spacing at small sizes. A body typeface should be boring in the best sense, comfortable over long reading, distinguishable at small sizes, and not calling attention to itself. Decorative typefaces that look striking at a heading size often become muddy and tiring at body size. The job of body type is to let the reader focus on the words, not the type.