Typography

What Is Typography?

Typography is the practice of selecting and arranging type, including typefaces, sizes, line length, line spacing and hierarchy, so that text is readable and expresses the character of a brand. On the web it also covers how fonts are delivered to the browser and how text adapts to every screen size and user setting.

Web typography differs from print in one important way: you do not control the final output. Readers zoom, change default font sizes, switch to dark mode, use screen readers or translate the page. Good web type is a flexible system of rules rather than a fixed layout, built in CSS with relative units so it holds up under all of those conditions.

Why Typography Matters

• Readability: Most of a website is text. Size, spacing and line length decide whether people read it or skim and leave.
• Hierarchy: A clear scale of headings, body and labels shows what is important and helps people scan.
• Brand character: Typefaces carry tone, from technical to warm to formal, often more consistently than imagery does.
• Performance: Web fonts are downloads. Too many files or poor loading can delay text rendering and cause layout shift that hurts Core Web Vitals.
• Accessibility: Contrast, resizable text and adjustable spacing are WCAG requirements, and Ontario organizations covered by the AODA must meet them.

Key Components of Web Typography

1. Type scale: A set of related sizes generated from a base size and a ratio, for example a 16 px base with a 1.25 ratio. Using rem units respects the user's browser setting, and CSS clamp() lets headings grow smoothly between small and large screens.
2. Line length: The widely used guideline for body text is roughly 45 to 75 characters per line. In CSS, a max-width around 65ch on text containers is a practical starting point.
3. Line height: Body text usually reads well between 1.4 and 1.6; large headings need tighter leading, often 1.1 to 1.25. Set it unitless so it scales with the font size.
4. Font loading: Serve WOFF2 files, subset them to the characters you need (keeping accented characters for French), preload the one or two most important files, and use font-display: swap so text appears immediately in a fallback font.
5. Variable fonts: One file can contain a range of weights, widths or optical sizes along axes such as wght and opsz. This can replace several static files and allows precise weights, but check the file size against the number of styles you actually use.
6. Pairing: Most sites need one or two families: a display face for headings and a highly readable text face for body copy, plus a monospace for code or labels if the design calls for it.

Common Typography Mistakes

• Fixed pixel sizes everywhere: Locking text in px can ignore user font-size preferences; use rem for type.
• Full-width paragraphs: Text running the full width of a large monitor is tiring to read and easy to lose your place in.
• Loading too many fonts: Several families, each with many weights and italics, add downloads and slow the first render.
• Low-contrast text: Light grey body copy on white often fails the WCAG minimum of 4.5:1 for normal text.
• Display faces for body copy: Fonts designed for headlines become hard to read at paragraph sizes and over long passages.

Best Practices for Typography

1. Define the system as tokens: Set sizes, weights and line heights as CSS custom properties so every page draws from the same scale, and record them in your brand guidelines.
2. Design for text spacing overrides: WCAG 1.4.12 requires that content still works when users set line height to 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 em and word spacing to 0.16 em. Avoid fixed-height text boxes.
3. Test zoom to 200 percent: Text must remain readable and usable when resized, without content being cut off.
4. Tune fallbacks to reduce layout shift: Adjust fallback fonts with size-adjust and ascent-override so the swap to the web font barely moves the page.
5. Pair by contrast, not similarity: Choose a display and text face that differ clearly in role, and check that both cover the languages and characters you need.
6. Check licensing: Confirm that your font licence covers web use, self-hosting and your expected traffic, and apps if you have them.

Typography at PerfectPixels

Our own site pairs Orbitron, a geometric display face, for headings with Instrument Sans for body text, and a monospace for small labels. For clients we build type systems as part of brand identity and interface design, then implement them as fluid, accessible CSS with self-hosted, subset fonts tuned for performance.

Frequently Asked Questions

What font size should body text be on a website?

A base of 16 px (1 rem, the browser default) is a sensible minimum for body text, and many typefaces read better slightly larger. The right size depends on the typeface's x-height and the reading context, so test with real content on real devices.

Should I self-host web fonts or use a font service?

Self-hosting gives you control over caching, subsetting and preloading, and avoids sending visitor requests to a third party, which can matter for privacy. Font services are convenient, but check their privacy terms and the licence for the fonts you choose.

Are variable fonts always faster?

Not always. A variable font replaces several static files with one, which helps when you use many weights or styles. If you only need one or two weights, two small static files can be lighter than a full variable font.

Related Resources

• User Interface (UI)
• Brand Guidelines
• Core Web Vitals
• CSS

Further reading: Web fonts — MDN Web Docs.