Choose website fonts using real copy. Check type roles, text enlargement, fallback rendering, font loading, and permission for web use and distribution.
Choose typefaces using the copy people will read. One family can serve headings and body text; separate families can also have distinct roles. A two-font limit alone cannot establish legibility or page quality.
Compare prices, email addresses, and mixed-language content at different sizes, weights, and line heights. Decorative headings still need to coexist with readable body copy and controls.
Consider a body family with size and weight changes for headings. When adding another family, record its purpose and apply that role consistently.
Test longer explanations, prices, letters, and symbols. For Japanese content, also check coverage of the required characters. Limit emphasis to decision-relevant phrases instead of repeatedly bolding whole paragraphs.
WCAG 2.2 generally requires text to scale to 200% without loss of content or functionality, with exceptions for captions and images of text. Provide a supported resizing method and check intermediate sizes too. (W3C text resizing)
Review fixed heights, wrapping, and surrounding layout when a button or explanation becomes clipped. Shrinking price notes to fit leaves the reading problem unresolved. See Website spacing for line and paragraph relationships.
Web fonts require the browser to load font files. web.dev explains how delivery and rendering choices affect loading and layout movement. For example, font-display: swap displays a fallback before replacing it, so check changes in text width. (web.dev font rendering)
Load the families and weights actually needed. Test copy and controls with the fallback when a file is unavailable. Read the chosen font's terms for website use and file distribution, including fonts described as free.
For a template, include real body copy and long headings in the rendering and enlargement checks.
SpreadSite is a no-code website builder that lets you create, publish, and update a website from Google Sheets using ready-made templates.
To build a website while checking type choices and published text, give SpreadSite a try!
A: One family can express roles through size and weight. Assess additional families by purpose and legibility with actual content.
A: Evaluate letterforms, weight, size, and the text being published. Check each language with its actual characters.
A: Loading depends on files and delivery. Check fallback rendering and any layout movement when the font changes.
A: Read the chosen font license for website use, redistribution, and modification. A free price does not describe all permissions.
