Before a single line of code is written, the typographic decisions you make will shape whether visitors stay, trust your brand, and can actually read your content. Web typography is not simply choosing a font family, it is a system of scale, spacing, contrast and performance that runs through every page of your site. Getting it right from the start avoids costly redesigns and ensures your content is accessible to every visitor, including the roughly one in five Canadians living with a disability. This guide walks through a practical checklist covering font selection, hierarchy, spacing, accessibility, responsive behaviour and loading performance, so you can approach your next project with a clear set of decisions already made.
Why web typography deserves its own checklist
Most website projects treat typography as an afterthought. A brand guide arrives with a logo and colour palette, and the development team picks a heading font and a body font from Google Fonts at roughly the same time they wireframe the homepage. This approach creates problems that compound across the life of the site. Inconsistent type scales make it difficult to maintain visual rhythm as new pages are added. Poor line lengths and spacing cause readers to lose their place. Low-contrast text fails accessibility standards and, in Canada, can run afoul of provincial requirements under the Accessibility for Ontarians with Disabilities Act (AODA). A deliberate pre-build typography checklist forces those decisions to happen intentionally, and it gives designers and developers a shared reference point throughout the project.
Font selection: legibility before personality
The first and most consequential choice is which typeface or typefaces to use. A font that looks distinctive on a poster does not always perform well on screen, where rendering engines, pixel densities and viewing distances vary enormously. When evaluating candidates, start with readability at 16 pixels, the widely accepted minimum for body text, and work outward from there. Look for open counters, clear distinction between similar characters like the capital “I”, lowercase “l” and the number “1”, and a weight range that covers at least four or five values so you can build a meaningful hierarchy without reaching for a second family.
Serif and sans-serif pairings remain the most reliable starting point for most brands. A contemporary sans-serif for headings paired with a readable serif for extended body copy creates an obvious contrast in tone, or a single well-chosen sans-serif family with a full weight range can deliver a clean, modern look when paired with deliberate use of size, colour and spacing. The goal is not to be original for its own sake but to choose typefaces that let your content breathe and that your audience can read without conscious effort.
At Monk Creatives, our graphic design service approaches type selection as part of a broader brand system rather than an isolated preference. When we developed the identity for Alli Naturals, a Chennai-based masala manufacturer, the typographic decisions were shaped by the brand’s natural positioning. The Tamil letter அ woven into the logo mark alongside organic leaf motifs established a cultural and craft connection that the supporting type system reinforced at every touchpoint, from packaging to the supporting graphic applications.
Establishing a type scale and hierarchy
A type scale is a predefined set of font sizes that you apply consistently across headings, subheadings, body text, captions and UI labels. Without a scale, every new page invites a fresh decision about what size a heading should be, and those decisions drift over time. A modular scale, where each step up or down follows a fixed ratio such as 1.25 or 1.333, produces a rhythm that feels natural to the eye and reduces the number of choices a designer has to make for each new layout.
Pair your scale with a clear semantic strategy. Heading levels should follow a logical order: an h1 for the page title, h2s for major sections, h3s for subsections, and so on. This is not merely an accessibility concern, though screen readers do rely on heading structure to navigate. It also means your CSS can target elements by their semantic role rather than by ad-hoc class names, which keeps your stylesheet lean and your design system coherent as the site grows.
Line height, line length and white space
Three spacing properties determine whether body text feels comfortable or exhausting to read: line height (leading), line length (measure) and the white space around blocks of text. Line height that is too tight causes lines to visually collide, especially on screens with subpixel rendering. Line height that is too loose breaks the reader’s sense of connection between successive lines. For body copy, a line height of 1.5 to 1.7 times the font size is a reliable starting point, with slightly tighter ratios for large display headings and slightly looser ratios for small caption text.
Line length is equally important. Research in reading behaviour consistently points to an optimal measure of roughly 45 to 75 characters per line for comfortable reading in English and French, the two official languages most relevant to a Canadian audience. Lines that stretch across a wide viewport force the reader’s eye to travel too far before returning to the start of the next line. Lines that are too short cause the eye to jump too frequently, which disrupts rhythm. The simplest solution is to set a max-width on your text containers rather than letting paragraphs fill the full browser width, especially on larger desktop monitors that are common in Canadian office and home settings.
White space around text blocks, padding, margins and the gap between paragraphs, gives the layout room to breathe. Generous paragraph spacing, in the range of 1 to 1.5 times the font size, signals a new idea and lets the reader’s eye rest between paragraphs without requiring a visual separator.
Contrast, colour and accessibility under Canadian standards
Accessible typography means text that every visitor can read, regardless of visual ability. In Canada, provincial legislation including the AODA in Ontario and similar frameworks elsewhere set expectations that public-facing websites meet or approach WCAG 2.1 Level AA guidelines. For typography, the most directly relevant criterion is contrast: normal text below 18 pixels (or 14 pixels when bold) must achieve a contrast ratio of at least 4.5:1 against its background, and large text at or above 18 pixels needs a ratio of at least 3:1.
These ratios are easy to overlook when brand colours include light greys, pastels or other low-contrast combinations. A light grey heading on a white background may look elegant in a design tool but fails the standard in practice. The same principle applies to links that are distinguished from surrounding text only by colour, a practice that disadvantages visitors with colour vision deficiency, which affects roughly one in twelve men and one in two hundred women in Canada.
When we built the site for Baros Trust, a healthcare trust based in Chennai, accessibility was a stated requirement from the outset. The typographic system we implemented, including type scale, spacing, contrast ratios and navigation structure, was designed to meet rigorous readability standards, reflecting the trust’s commitment to serving a diverse audience. Clear content hierarchy, optimised navigation and strategic enquiry triggers all depend on type that is genuinely legible, not just legible in theory.
Responsive typography across screen sizes
A typographic system that works on a 27-inch desktop monitor will not automatically work on a six-inch smartphone screen. Responsive typography means adjusting font sizes, line heights, line lengths and spacing at defined breakpoints so the reading experience remains comfortable at every width. The most common mistake is to leave body text at a desktop size on mobile, forcing users to pinch and zoom, an experience that drives most visitors away within seconds.
Modern CSS offers tools that make fluid typography more manageable than fixed breakpoint-based sizing. The clamp() function, for example, lets you set a minimum, preferred and maximum value for a font size, allowing it to scale smoothly between viewport widths rather than jumping at each breakpoint. Combined with a consistent type scale and container-based max-widths for text, this approach produces layouts that feel native on phones, tablets and desktops without requiring a separate stylesheet for every device category that Canadian consumers use, from large-format monitors to budget Android phones.
Performance: how fonts affect page speed
Web fonts are files, and every file a browser must download before it can render text delays the moment a visitor sees your content. A single font family with multiple weights and styles can easily total several hundred kilobytes, and if your CSS references weights you do not actually use, the browser may still download them. On mobile networks, which many Canadians rely on outside major urban centres, this overhead is significant.
The most effective performance strategies are straightforward. First, limit the number of font families and weights you load. Two families with two to four weights each is usually sufficient for a complete design system. Second, use the font-display: swap descriptor so text is visible immediately in a system font while the custom font loads, rather than rendering invisible text for an unpredictable period. Third, consider self-hosting critical fonts or using a subset that includes only the characters your site actually needs, particularly useful for brands that rely on a custom logotype or specific brand language.
Speed is not merely a technical concern. Search engines including Google factor Core Web Vitals into ranking decisions, and Canadian businesses competing in local and national markets cannot afford to lose ground to faster-loading competitors. The connection between typography performance and search visibility is direct and measurable.
The web typography pre-launch checklist
The table below summarises the key dimensions to verify before a site goes live. Treat it as a shared reference for your design and development team and as a quality gate before launch.
| Dimension | Do | Do not |
|---|---|---|
| Font selection | Choose typefaces tested for screen legibility at 16 px and above, with a full weight range that supports your hierarchy. | Rely on display or decorative fonts for body copy or choose typefaces that have not been optimised for digital rendering. |
| Type scale | Define a modular scale (e.g. ratio of 1.25) and apply it consistently across headings, body text and UI labels. | Assign arbitrary sizes to headings on each page or mix multiple scales across different templates. |
| Heading structure | Use semantic HTML heading levels (h1 through h6) in logical order to support both visual hierarchy and screen reader navigation. | Apply heading styles to non-heading elements or skip heading levels for visual effect. |
| Line height | Set body text line height between 1.5 and 1.7, tightening slightly for large headings and loosening for small captions. | Use the same line height for every element regardless of size, or set body text line height below 1.4. |
| Line length | Constrain paragraph measure to 45–75 characters per line using max-width on text containers. | Allow text to fill the full viewport width on large screens or set measure so narrow that lines contain fewer than 35 characters. |
| Contrast | Verify all text meets WCAG 2.1 AA contrast ratios (4.5:1 for body text, 3:1 for large text) against its background. | Use light grey or pastel text on light backgrounds for stylistic reasons without checking contrast ratios. |
| Accessibility | Test with screen readers, ensure link text is descriptive, and confirm the site functions at 200 per cent zoom as required by AODA. | Rely on colour alone to convey meaning or assume that visual-only testing covers all users. |
| Responsive sizing | Adjust type scale and spacing at defined breakpoints, or use fluid sizing with clamp() for smooth scaling. | Leave desktop font sizes unchanged on mobile or use viewport units without fallback constraints that produce unreasonably large or small text. |
| Font loading | Limit families and weights, use font-display: swap, and subset or self-host critical fonts to reduce load time. | Load entire font families with unused weights and styles, or let custom fonts block text rendering indefinitely. |
| Consistency audit | Review every page template for type scale adherence, heading order, spacing and contrast before launch. | Assume that correct typography on the homepage extends automatically to every subpage without a manual review. |
Frequently asked questions
What is web typography and why does it matter?
Web typography is the practice of arranging type on digital interfaces to make written language legible, readable and visually coherent. It encompasses font selection, sizing, spacing, colour, hierarchy and loading behaviour. Good web typography matters because most of what visitors consume on a website is text, and the quality of that typographic experience directly affects how long people stay, how easily they find information and whether they trust your brand enough to take action.
How many fonts should I use on my website?
Stick to two typeface families at most, one for headings and display text, one for body copy, and limit each to the weights and styles you actually need. A single family with a full weight range can work well on its own if the typeface is versatile enough. Adding a third family almost always creates visual noise without adding clarity. Every additional family you load increases file size, slows your page and introduces another variable that has to be managed across templates and breakpoints.
What font size should body text be for readability?
Sixteen pixels is the accepted minimum for body text on modern screens, and many designers prefer 17 or 18 pixels for extended reading, especially on content-heavy sites. The choice should be tested against your actual typeface and layout, since a light-weight font at 16 pixels may read smaller than a bold geometric face at the same size. Always test at the size and weight combination you intend to use rather than relying on general guidelines alone.
Does typography affect my website’s accessibility rating?
Yes, significantly. Accessible typography covers contrast ratios, resizable text that does not break the layout when zoomed to 200 per cent, meaningful heading structure for screen reader navigation, and link text that describes its destination rather than repeating a phrase like “click here”. In Ontario, the AODA requires most public-facing websites to meet WCAG 2.0 Level AA standards, and typography failures are among the most common issues identified in compliance audits. Addressing them during the design phase is far less expensive than retrofitting an existing site.
Should I use system fonts or web fonts?
Both approaches have merit. System fonts, the typefaces already installed on a visitor’s operating system, such as San Francisco on Apple devices or Segoe UI on Windows, load instantly with no download required, which is a clear performance advantage. They also feel native to the platform. Web fonts give you precise control over brand expression and can deliver a more distinctive look. The best choice depends on the brand and the context. A content-heavy publication that serves readers across many devices and network conditions often benefits from the speed and reliability of a well-chosen system font stack. A brand that has invested heavily in a custom visual identity may justify the performance cost of web fonts if loading strategies like subsetting and font-display: swap are implemented correctly.
How do I make sure my typography works on mobile?
Start with a mobile-first approach: design your type scale and spacing for the smallest viewport you expect, then scale up for larger screens rather than trying to fit a desktop system onto a phone. Use fluid sizing with CSS clamp() where appropriate so font sizes adapt smoothly between breakpoints. Test on real devices rather than only in browser dev tools, because rendering engines differ and what looks acceptable in a simulator may feel cramped on an actual screen. Pay particular attention to tap targets: links and buttons need enough space around them to be comfortably tapped, which means your spacing system has to account for touch interaction as well as reading comfort.
Where to go from here
Typography is one of the most visible and consequential parts of any web project, yet it is also one of the most overlooked until problems become obvious to visitors. A structured pre-build checklist, covering font selection, type scale, spacing, contrast, accessibility, responsive behaviour and performance, gives your team a shared framework and prevents the kind of small, compounding errors that are expensive to fix later. At Monk Creatives, we build typographic systems as part of our website development service, ensuring every project has a coherent reading experience from the first page to the last. Explore more of our work in web design and development, or review our approach through the lens of Everyday Aligners, where we developed a minimalist brand and digital booking experience built on precise typographic control.
If you are planning a website project and want to make sure your typography is handled with care from the start, reach out to the team at Monk Creatives at info@monkcreatives.com, we would be glad to talk through your project.