Typography

Typography is one of the oldest design disciplines, stretching back centuries to movable type and letterpress, yet it remains one of the most critical skills in digital product design. At its core, typography is the practice of selecting, sizing, spacing, and arranging typefaces so that written language communicates clearly and beautifully. It is far more than choosing a font you like — it encompasses type scale, line height (leading), letter spacing (tracking), line length (measure), font weight, and the careful orchestration of all these variables into a system that serves the reader above all else.

In digital contexts, typography carries an outsized burden. The vast majority of information on the web is text, which means typographic decisions directly shape how users perceive and interact with your product. A poorly set paragraph — too narrow, too tightly leaded, set in a low-contrast grey on white — creates friction that compounds across every page. Conversely, well-considered type choices establish a clear hierarchy that allows users to scan, read, and act without conscious effort. The relationship between typography and white space is particularly intimate: generous margins and padding around text blocks give letterforms room to breathe, improving both legibility and the overall aesthetic.

Typography is also inseparable from accessibility. Roughly one in five users have some form of visual impairment, and your type choices determine whether they can engage with your content at all. That means respecting minimum contrast ratios, allowing text to scale without breaking layouts, avoiding long lines that strain eye tracking, and never relying on a single typographic cue (like colour alone) to convey meaning — a principle that overlaps with colour theory.

Building a typographic system rather than making one-off decisions is what distinguishes senior practitioners from beginners. When your type scale, weights, and spacing rules are codified as design tokens, they become portable across platforms, enforceable in code, and consistent no matter who is building the screen. That consistency compounds into trust — users may not articulate why a product feels polished, but they feel the coherence that a disciplined type system provides.

Why it matters

Typography is the primary vehicle for content, and content is the reason people visit your product. If your type is hard to read, nothing else matters — not your illustrations, not your animations, not your clever layout. Users will leave. Research consistently shows that improving readability increases time on page, comprehension, and task completion rates. In interfaces where users must make decisions — forms, dashboards, e-commerce checkouts — clear, well-set type reduces cognitive load and directly improves conversion.

Beyond usability, typography is one of the most powerful tools for establishing brand personality. A geometric sans-serif communicates something fundamentally different from a humanist serif, and those associations shape user perception before a single word is read. When typographic choices align with voice and tone, they amplify the message; when they clash, they create a subtle dissonance that erodes trust. This is why type selection is one of the first decisions made when building a design system — it sets the emotional baseline for everything that follows.

In practice

• Establishing a modular type scale. Rather than picking font sizes ad hoc, define a scale based on a consistent ratio (such as 1.25 or 1.333). This produces a set of sizes — say 14, 16, 20, 25, 32, 40 — where each step has a clear role: body, large body, subheading, heading, display. Encode these into your design tokens so that every engineer and designer pulls from the same system, and your hierarchy remains consistent even as new pages are added.

• Optimising long-form reading. For articles or documentation, set body text between 16px and 20px, keep line length between 50 and 75 characters, and use a line height of roughly 1.5 to 1.6. These are not arbitrary rules — they reflect decades of readability research. Pair this with generous white space between paragraphs and sections, and your content strategy team will thank you because users will actually read the words they worked so hard to write.

• Type in component design. When designing a card component in an atomic design system, typography decisions cascade through every instance. The card title might use a semi-bold H3, the description uses regular body text, and metadata sits in a smaller caption style. Getting these relationships right once means every card across the product feels consistent. Pair the text with appropriate microcopy for actions — a “Read more” link or a “Save” button — and the entire component communicates clearly at a glance.