Skip to content

Typography And Copy ​

Typography and language determine how quickly information can be scanned, understood, and acted on. Follow the established product voice and type system before introducing variation.

Build Readable Type Hierarchy ​

Use the project's typeface, scale, weights, and text tokens. Without an established system, favour a readable application typeface and a restrained scale. Add another family or weight only for a deliberate brand or information need.

Use size, weight, spacing, and placement consistently so repeated roles are recognisable. Secondary text remains legible; low emphasis does not mean low contrast.

Make Reading Comfortable ​

Give body copy sufficient size and line height. Around 1.5 line height is a useful baseline for longer text, while large headings can be tighter. Avoid text columns so wide that finding the next line becomes difficult.

Left-align normal reading content. Reserve centred treatment for short, deliberate content. Guarantee legibility when text appears over imagery or variable surfaces.

Write For Scanning ​

Be concise without removing necessary context. Use familiar words, short natural sentences, and active voice. Front-load key information in headings, labels, links, list items, and messages.

For larger blocks, use the inverted pyramid: answer or key information first, supporting detail next, and background later or behind progressive disclosure.

Use sentence case by default unless an intentional project convention says otherwise. Avoid uppercase for normal interface text.

Keep Vocabulary Consistent ​

Give one concept one name throughout a flow. Do not alternate synonyms for variety. Name things from the user's perspective rather than from internal architecture.

Technical terms are appropriate when the audience expects them or precision requires them. Explain unfamiliar terms where the user needs that knowledge to proceed.

Controls should state what happens, such as "Save changes" rather than "Submit". Keep the action name consistent through feedback: an action labelled "Publish" should lead to a state or message using "Published".

Link text should describe its destination or result and remain meaningful when scanned independently. Avoid "click here" and vague "learn more" links when a specific destination can be named.

Help Users Recover ​

A useful error message explains:

  1. what went wrong
  2. enough context to understand it
  3. what the user can do next

Use calm, direct, human language. Do not blame the user or expose irrelevant system detail. Put recovery actions where they are easy to find and associate messages with the affected content.

Treat empty states similarly: explain the state and offer the next useful action when one exists, without adding decorative filler.