Website typography is the invisible infrastructure of your web design. Most visitors cannot articulate why a website feels authoritative, readable, or polished — but typography is doing most of that work. The typefaces you choose, the sizes you set, the line heights you use, and the contrast between heading and body text together determine whether your website communicates competence or carelessness at a level visitors feel before they consciously notice. In the US, UK, Canada, and Australia, typography mistakes are among the most common reasons professional websites fail to build credibility — and they are entirely fixable.
This guide covers how to choose the right typefaces, build a readable type scale, and apply typography consistently across your business website.
What Is Web Typography and Why Does It Matter?
Web typography is the selection, sizing, and arrangement of typefaces on a website. It encompasses:
- Typeface selection: Which fonts you use for headings, body text, and UI elements
- Type scale: The range of sizes from small captions to large display headings
- Line height (leading): The vertical space between lines of text
- Letter spacing (tracking): The horizontal space between characters
- Contrast: The visual distinction between heading and body styles
Typography matters because it governs readability — the ease with which a visitor processes your content. Poor typography (low contrast, tight line spacing, text too small on mobile, too many typefaces) creates cognitive friction that visitors experience as fatigue. Well-set typography disappears, allowing the content to communicate without resistance.
What Are the Main Categories of Typefaces?
Serif: Typefaces with small strokes (serifs) at the ends of letterforms. Garamond, Times New Roman, Georgia, Tiempos, Freight. Associations: tradition, authority, trust, intelligence. Used widely in publishing, legal, finance, and established professional services.
Sans-serif: Typefaces without serifs. Inter, Helvetica, Aktiv Grotesk, DM Sans, Gill Sans. Associations: modernity, clarity, approachability, technology. Used widely in tech, SaaS, healthcare, and contemporary professional services.
Slab serif: Serif typefaces with pronounced, block-like serifs. Rockwell, Clarendon, Courier. Associations: confidence, distinctiveness, vintage. Used selectively for brand differentiation.
Display / Decorative: Typefaces designed for large headline use, not body text. Used for brand personality in headings only — never for body copy.
Monospace: Fixed-width typefaces (each character occupies the same width). JetBrains Mono, Courier. Used for code blocks and technical content.
For most business websites: one or two typefaces, one of which is a legible sans-serif or serif for body text, is the correct approach. More than two typefaces creates visual noise.
How Do You Choose the Right Typeface for a Business Website?
Match typeface personality to brand positioning:
- Legal, financial, management consulting: Serif (Garamond, Tiempos, Freight Display) signals authority and tradition
- Tech, SaaS, startup: Clean sans-serif (Inter, DM Sans, Neue Haas Grotesk) signals clarity and modernity
- Healthcare, wellness: Humanist sans-serif (Gill Sans, Myriad Pro, Aktiv Grotesk) signals approachability
- Creative agency, design studio: A distinctive serif or geometric sans-serif signals aesthetic sensibility
- Luxury, premium: An exclusive, refined serif or high-quality sans-serif (Canela, Söhne, Editorial New) signals premium positioning
Prioritise readability for body text. Display typefaces that look beautiful in a 72px headline can be illegible at 16px body size. Test your body typeface at 16–18px before committing to it.
Check the variable font availability. Variable fonts allow a single font file to serve multiple weights and styles, significantly reducing page load time versus loading separate files for each weight.
Use Google Fonts and Adobe Fonts for licensed web use. Self-hosting a web font requires proper licensing — commercial fonts require a web license, not just a desktop license.
See brand identity design guide for how typeface selection connects to the broader visual identity.
What Is a Type Scale and How Do You Build One?
A type scale is a defined set of type sizes used consistently across a website. Using a mathematical scale — rather than arbitrary sizes — creates visual rhythm and hierarchy.
Common scale ratios:
- Minor third (1.2): Subtle, compact. Good for information-dense professional services sites
- Major third (1.25): Balanced. Good for most business websites
- Perfect fourth (1.333): Clear contrast between levels. Good for marketing and landing pages
- Perfect fifth (1.5): High drama. Good for editorial and portfolio sites
Starting from a base body size of 16px and applying the major third ratio:
- Caption: 12.8px
- Body: 16px
- Large body: 20px
- H3: 25px
- H2: 31px
- H1: 39px
- Display: 49px
On mobile: Scale down heading sizes proportionally. A 49px display heading that works on desktop often needs to be 32–36px on mobile to avoid line wrapping and visual imbalance.
What Are the Key Typography Settings for Readability?
Line height (leading): Body text should have a line height of 1.5–1.65× the font size. A 16px body size needs 24–26px line height. Tight line height (under 1.4×) makes text feel cramped and difficult to read. Excessive line height (over 1.8×) makes text feel disconnected.
Line length (measure): The optimal line length for readability is 60–80 characters per line. Wider measures require more eye movement and increase reading fatigue. Narrower measures fragment content. On desktop: constrain body text columns to 65–70ch maximum width.
Contrast: Text must meet WCAG 2.1 AA contrast requirements — minimum 4.5:1 ratio for body text, 3:1 for large text (18px+ or 14px+ bold). Low contrast grey text on white backgrounds is one of the most common accessibility failures on business websites.
Letter spacing: Most typefaces are designed with appropriate default letter spacing. Tighten letter spacing slightly on large display headings (–0.02em to –0.04em) for a more polished appearance. Never tighten body text letter spacing.
How Many Typefaces Should a Website Use?
Two typefaces: The standard for most business websites. One for headings (can be more expressive, larger sizes), one for body text (must be highly legible, used at 16–20px). Examples: Tiempos (headings) + Inter (body); DM Serif Display (headings) + DM Sans (body).
One typeface: Increasingly popular. A high-quality variable font (Inter, Instrument Sans) used across headings and body at different weights and sizes. Clean, fast-loading, and coherent.
Three typefaces: The maximum for most business sites. Justified only if the third typeface is a monospace for code or a display face for specific accent headlines.
Never: Mix four or more unrelated typefaces. It signals poor typographic judgement and creates visual noise that undermines the credibility the website is designed to build.
See website color palette guide for how typography and colour work together as the foundation of a website's visual identity.
Your Website's Typography Should Make Your Content Feel Professional
We design websites with considered typography that communicates authority, builds readability, and reflects your brand positioning — for businesses in the US, UK, Canada, and Australia.
There is no single best font — the right choice depends on your brand positioning. For authority and tradition (legal, finance, management consulting): a high-quality serif like Tiempos, Freight, or Garamond. For clarity and modernity (tech, SaaS, professional services): a humanist sans-serif like Inter, DM Sans, or Aktiv Grotesk. For premium positioning: an exclusive typeface from type foundries like Klim, Schick Toikka, or Commercial Type. Whatever the choice, the body typeface must be highly legible at 16–18px on all devices.
Two is the standard — one for headings, one for body text. One is increasingly popular (a high-quality variable font at different weights covers both roles). Three is the maximum for most business sites. Four or more unrelated typefaces create visual noise and signal poor typographic judgement. Each additional font file also adds to page load time — loading 4 typeface files in multiple weights can add 400–600KB of requests before a single image loads.
Minimum 16px for body text. This is both an accessibility standard and an iOS/Android convention — text below 16px triggers auto-zoom on form inputs in iOS, and text below 14px is consistently identified as too small in user testing across US and UK audiences. For sustained reading on long-form content (blog posts, guides), 18–20px body text with a line height of 1.6–1.7× the font size produces the best reading comfort.
Body text line height should be 1.5–1.65× the font size. At 16px: 24–26px line height. At 18px: 27–30px. Line height under 1.4× makes text feel cramped and difficult to read for more than a few sentences. Line height above 1.8× makes text feel disconnected and sparse. This range (1.5–1.65×) consistently produces the best readability across English-language content at the typical body text sizes used on business websites.
Typography is one of the primary signals visitors use to assess a website's professionalism — even when they cannot consciously articulate why. Specific typography failures that reduce credibility: text too small to read without zooming, insufficient contrast between text and background, too many different typefaces creating visual chaos, body text in display or decorative fonts, and inconsistent sizing that creates no clear visual hierarchy. Well-set typography is invisible — it allows the content to communicate without friction, which is the highest quality a typeface system can achieve.