Definition
Typography is the design discipline concerned with the selection, arrangement and styling of typefaces — including font choice, size, weight, line-height, letter-spacing, and hierarchy — to make written content legible, readable and visually expressive.
Typography is the single most load-bearing design decision in most digital interfaces. Layouts can be rough and still feel right if the type works; layouts can be perfect and still feel wrong if the type doesn't. Most amateur design that looks 'off' is type-related: wrong typeface choice, inconsistent hierarchy, awkward line-length, sloppy spacing.
Modern digital typography practice combines historical type knowledge (what makes a typeface fit its purpose), system-level decisions (a type system that scales across the product), and platform constraints (web font loading, fallback stacks, variable-font support). It's both an art and a system-engineering job.
Origin
Western typography dates to Gutenberg's movable type (~1450). The discipline of modern type design formalised through the 20th century with foundries like Linotype, Monotype, ITC and contemporary digital-native foundries (Hoefler & Co., Commercial Type, Klim Type Foundry, Pangram Pangram).
How it works
- Define the brand's type strategy — what does the typography need to communicate?
- Pick the primary type pair (or single) — display + text, or single versatile family.
- Build a type scale — size, weight, line-height for each role (H1-H6, body, small).
- Test on real content across breakpoints and platforms.
- Document the type system and roll out across all product surfaces.
- Audit ongoing — type drift happens fast in growing teams.
When to use it
Use when
- At brand and design system inception.
- During any redesign.
- When the product feels visually inconsistent across screens.
Skip when
- For very small one-off projects where established defaults are good enough.
- When dictated by platform constraints (system fonts only).
Key metrics
- Type consistency across product (qualitative audit)
- Readability scores (line-length, line-height conformance)
- Brand recognition from type alone
- Loading performance (web font payload)
Examples
- We replaced the body typeface, did nothing else, and the product felt 50% more polished.
- Our type scale had 23 levels in production. We narrowed it to 8 and everything got cleaner.
- The display font was beautiful at 96px and unreadable at 14px — wrong tool for the job.
In practice at Makreate
Makreate brand and design-system engagements treat typography as foundational, not decorative. Every project includes a typed scale (defined for each role and breakpoint), a primary/secondary type pair selected for the brand strategy, and a written rationale for the choice. We typically license type from contemporary foundries (Pangram Pangram, Klim, Commercial) rather than defaulting to Google Fonts — the increase in distinctiveness is meaningful and the licensing cost is small relative to the brand investment.
Branding →Common mistakes
- Choosing typefaces by appearance alone without testing at production sizes.
- Pairing two display typefaces (need a workhorse text face).
- Inconsistent line-height across the type scale.
- Too many type levels in production — bloat is a sign of weak system.
- Not testing at small sizes or on slow devices.
Frequently asked
What's the best web typography practice in 2026?
Variable fonts for performance, contemporary foundry licences for distinctiveness, a strict type scale (8 levels max) for consistency, and rigorous testing at small sizes on real devices.
Should I use Google Fonts or a paid foundry?
Google Fonts is fine for early-stage projects. Once the brand is established, paid foundries (Pangram Pangram, Klim, Commercial Type) offer noticeably more distinctive type at modest cost.
How many fonts should a brand use?
1-2 typefaces, used across many weights and sizes. Brands using 4+ typefaces almost always have a type-system problem.