Tomasz tunes pianos in Kraków. He is very good at it, and his website says so in pale grey 13-pixel text, centered, running the full width of a 27-inch monitor.
A choir director finds him through a search. She reads the first line, loses her place on the way back to the start of the second, tries again, and gives up halfway down the paragraph. She is not annoyed. She just quietly decides to call the tuner whose page felt calmer.
Nothing on Tomasz's page was wrong, exactly. The words were accurate and the prices were fair. The type simply made reading feel like work, and people tend to read that feeling as a property of the business.
Tomasz and the choir director are imagined. The research, rulings and standards below are real.
Legible is not the same as readable
Typographers use two words that sound alike and mean different things. Legibility is about letters: can you tell an I from an l from a 1, a rn from an m? Readability is about text: can you keep reading a paragraph, then another, without your eyes getting lost or tired?
Most typefaces you would pick for a website are legible enough. The failures on small-business sites are nearly always readability failures: lines too long, text too small or too faint, lines packed too tightly, headings that all look equally important. Those are layout decisions, not font decisions, which is good news. You can fix them without a designer or a new typeface.
Do this first: open your own homepage on a laptop and a phone, and read one full paragraph out loud. Wherever you stumble, slow down or lose your place, you have found a readability problem. The rest of this chapter explains which dial to turn.
How long a line should be
The length of a line of text is called the measure, and it is the setting most often broken on the web, because a paragraph left to itself will stretch to fill whatever screen it lands on.
Bringhurst's guideline counts letters and spaces, for a single column of serif text at reading size. For multi-column layouts he suggests 40 to 50. It is a print tradition, not a lab result, which is why the screen research below is worth knowing.
Screen studies complicate the picture in an interesting way. Mary Dyson's 2004 review of reading from screen found that most studies report faster reading with longer lines, and that the number of characters per line, not the physical width, is what matters. In one study she cites, lines of about 100 characters were read faster than lines of 25, with comprehension holding steady.
Speed is not the whole story. In Dyson and Haselgrove's 2001 experiment, people read texts set at 25, 55 and 100 characters per line, at normal speed and at a trained fast speed, then answered detailed questions. Lines of 55 characters produced better comprehension than lines of 100. The shortest lines fell in between.
Dyson's review adds the twist that explains why designers keep recommending moderate lines anyway: people prefer them. Readers judged moderate lines as better even in studies where long lines were read faster. On a landing page, where you want visitors to absorb and remember a few points rather than race through, both the comprehension result and the preference point the same way.
The Web Content Accessibility Guidelines draw a firm outer line. Success criterion 1.4.8 (Level AAA, the strictest tier) asks for a way to get blocks of text no wider than 80 characters. Few laws require AAA, but it is a sensible ceiling for body copy.
The fix is one line of CSS: give your text column a maximum width in ch or em units rather than pixels, so the measure stays put when someone enlarges the text. Something like max-width: 65ch lands most fonts inside the comfortable band. Try it below.
A piano drifts out of tune slowly, a few cents each season, until one day the music simply sounds tired. Regular tuning keeps the strings at an even tension, protects the soundboard, and makes practice feel rewarding again. Most home pianos need attention once or twice a year, more often if the room is dry in winter or the instrument has just been moved.
Inside Bringhurst's 45–75 range.
Notice two things while you play. Larger text shortens the line in characters even when the column stays the same width, and on a phone the screen itself becomes the limit. That is why the measure is set relative to the type, not to the window.
Size, spacing and the 16-pixel floor
Browsers set body text to 16 pixels by default, and that default is not an accident or a minimum to shrink from. On most sites it is the smallest body size worth considering. Many reading-focused sites go larger.
The best recent evidence comes from Rello, Pielot and Marcos (2016). In an eye-tracking study presented at CHI, 104 people read Wikipedia articles at six font sizes from 10 to 26 points and four line spacings. According to the paper, readability and comprehension improved steadily up to 18 points. Smaller sizes meant longer fixations and lower comprehension scores.
Line spacing mattered less than size in that study. It did not significantly change reading time, though the tightest and loosest settings went with weaker comprehension answers. In practice, a line height of about 1.5 for body copy sits comfortably in the middle, and it happens to be the figure the accessibility guidelines use.
Participants read on desktop screens at a fixed distance. Point sizes on screen depend on the device, and a phone held at 30 cm is a different situation from a monitor at arm's length. The robust lesson is the direction: small text costs comprehension, and more size helps up to a generous point.
1.4.4 Resize text: text can be resized up to 200% without assistive technology and without losing content or function. 1.4.12 Text spacing: nothing breaks when a user sets line height to 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times. Level AA is the level sites usually aim for in practice.
Source: W3C, WCAG 2.2. General information, not legal advice; whether these rules bind your site depends on your sector, size and jurisdiction. See Accessibility as conversion.
Contrast is part of size, too. Pale grey text on white is the most common way small sites make good type unreadable. The contrast rules, and a checker you can try, are in Color and emotion.
Do this: set body text to at least 16 px (17 to 20 px is often better), line height around 1.5, and test by pressing Ctrl or Cmd and + until the page is at 200%. Nothing should overlap or disappear.
Does good type change how people feel?
Here is the awkward part for typographers. Many classic studies found that refinements they care about deeply make no measurable difference to reading speed or comprehension. That is exactly what Kevin Larson (Microsoft) and Rosalind Picard (MIT) set out to work around in “The Aesthetics of Reading” (2005).
Their idea: if good typography is pleasant, it should behave like other small mood boosts, such as a gift of candy, which earlier research had linked to better performance on creative problem-solving. So they measured mood indirectly.
Twenty participants read an issue of The New Yorker on a tablet for 20 minutes. Half saw a carefully set version: the magazine's own typeface, ClearType rendering, good hyphenation and justification. Half saw a deliberately poor version in bitmap Courier with extra space between words. The content was identical.
Time flies when you are having a better time: the good-typography readers felt they had been reading for much less time than they had. In a second study with 20 new participants, the time effect appeared again (5 min 12 s against 2 min 21 s), and this time the good version was also rated easier to read. The creative-task benefit did not repeat: on a word-association test, the difference (52% against 48% correct) was not reliable.
So what does it show? Good type plausibly makes reading feel more pleasant and more engaging, even when people cannot say why. It is a small, early study: 40 people, a stark contrast between versions, readers free to choose different articles (the authors worried about one sad story about a dog). The candle-task result rests on four people, and its reported test statistic is weaker than the paper's p < .05 suggests. Treat it as a promising signal, not proof that typography makes your visitors smarter.
The Baskerville question
In 2012 the filmmaker Errol Morris ran a hidden experiment on the New York Times website, designed with Cornell psychologist David Dunning and Benjamin Berman. About 45,000 readers took what looked like an optimism quiz about a passage from physicist David Deutsch claiming that we live in an era of unprecedented safety. Each reader was randomly shown the passage in one of six typefaces: Baskerville, Computer Modern, Georgia, Helvetica, Comic Sans or Trebuchet.
Baskerville drew the most agreement. Dunning, who analyzed the data, put its edge at roughly 1.5% relative to the average of the other fonts, and noted that many online companies would welcome a bump that size. Morris himself said it was not exactly a true scientific experiment. The fonts also differed in size and spacing, not just letter shapes, and readers saw them on whatever screen they had.
The fair conclusion is narrow: typeface can nudge how believable a sentence feels, by a small amount, in at least one large online sample. It is not a reason to set your site in Baskerville. It is a reason to avoid fonts whose personality fights your message.
Do this: ask three people who do not know your business to describe your homepage in three adjectives after ten seconds. If “playful” comes back for an accountancy firm, the type may be talking over you.
Pairing and hierarchy
A page reads as organized when the reader can tell, without reading, what is a headline, what is a section title, what is body copy and what is a caption. That is hierarchy, and it does more for perceived quality than the choice of font.
The simplest reliable system is a modular scale. Tim Brown, writing in A List Apart in 2011, described it as a sequence of numbers that relate to one another in a meaningful way: pick a base size and a ratio, multiply up for headings and divide down for small print. Sizes chosen this way look related because they are.
On pairing, the boring advice is the good advice. One well-made family with several weights can carry a whole landing page. If you pair two families, give them clearly different jobs, such as a serif for headlines and a sans serif for text, and keep it to two. Contrast in size and weight does the work; a third typeface usually adds noise, not elegance.
Do this: list every font size used on your page (your browser's inspector shows them). If you find nine sizes, collapse them onto five or six steps of one scale, and check that each step has one job.
Fonts and page speed
Web fonts are files, and files take time. While a font downloads, the browser has to decide what to show. If it hides the text, you get a flash of invisible text (FOIT). If it shows a fallback font and swaps later, you get a flash of unstyled text (FOUT), and possibly a layout jump when the real font arrives.
The CSS font-display property lets you choose. Google's font best-practices guide on web.dev summarizes the options and notes that, by default, Chromium browsers and Firefox hide text for up to three seconds while Safari can hide it indefinitely.
font-display values behave on one slow load. Block, swap and fallback periods follow the web.dev summary (block 2–3 s, fallback about 100 ms then a 3 s swap window); exact timings vary by browser. With optional, the late font is typically cached and used on the next page view. Original illustration.A practical recipe from that guide: swap for a brand or headline face that must appear, optional for body text where speed matters more than the exact font. Serve WOFF2 only, subset the font to the characters you actually use, and preload at most the one file that renders above the fold.
Variable fonts pack many weights and widths into one file, along axes such as weight (wght) and width (wdth). The web.dev introduction cites a Monotype experiment in which 48 separate styles became one file 88% smaller. The catch is in the same article: if you only use one or two weights, a variable font may be larger than the static files it replaces.
Or skip the download entirely. A system font stack (font-family: system-ui, sans-serif) costs nothing, renders instantly and looks native on every device. For a small business, that is a perfectly respectable choice. Speed matters for trust too; see Core Web Vitals in plain words.
The €100 font
If your site loads fonts directly from Google's servers, every visitor's browser connects to Google and, in doing so, shares their IP address. In January 2022 a German court decided that this, without consent, was unlawful.
The Munich Regional Court ordered the site operator to stop disclosing the claimant's IP address to Google through Google Fonts (under threat of a penalty of up to €250,000 per breach), to provide information about the data processed, and to pay €100 in damages plus interest.
The court treated the dynamic IP address as personal data. It rejected “legitimate interest” (Art. 6(1)(f) GDPR) as a legal basis because the fonts can be used without any connection to Google's servers. It based the damages under Art. 82 GDPR on the claimant's loss of control over his data, noting that it went to the United States, which the court said lacked adequate data protection at the time.
Source: full judgment, Bavarian state portal. A first-instance decision binding only the parties. General information, not legal advice; check your own jurisdiction.
The sum was tiny. What followed was not. Within months, letters went out across Germany demanding settlements from site owners who used Google-hosted fonts. In December 2022, according to Legal Tribune Online, Berlin prosecutors searched premises of a lawyer and his client on suspicion of fraud and attempted extortion in at least 2,418 cases. Prosecutors alleged that software had found sites embedding Google Fonts, that automated visits were used to manufacture the claimed “harm”, and that letters demanded €170 each. These were allegations at the investigation stage, not findings.
The legal ground has shifted since. In July 2023 the European Commission adopted an adequacy decision for the EU–US Data Privacy Framework, covering transfers to certified US organizations, which undercuts part of the Munich court's reasoning. And on 28 August 2025, Germany's Federal Court of Justice (BGH, VI ZR 258/24) referred questions to the EU Court of Justice: when is a dynamic IP address personal data, can someone who deliberately provokes a violation claim damages, and when is such a claim an abuse of rights. In that case the lower court in Hanover had found no personal data and no damage. We found no ruling from Luxembourg at the time of writing.
You do not need to wait for it. Self-host your fonts. Download the font files, serve them from your own domain with an @font-face rule, and remove the link to fonts.googleapis.com. It is often faster too, since it saves a connection to another server, and it removes the question entirely. Then open your browser's network tab and confirm that no font request leaves your domain.
Who owns your font
Fonts are software, and you license them rather than buy them. The licence decides where you may use the font, and a desktop licence for designing flyers does not automatically cover embedding the same font on a website.
The good news is that the most popular free web fonts come with generous terms. According to the Google Fonts repository, most fonts in its collection use the SIL Open Font License 1.1, some use Apache 2.0, and the Ubuntu family has its own licence. The OFL lets you use, study, modify, embed and redistribute the fonts, including commercially. Its main conditions: you may not sell the font on its own, and a modified version may not keep a “Reserved Font Name” without permission.
| You have… | Can you self-host it on your site? |
|---|---|
| An OFL font (most Google Fonts) | Yes. Keep the licence file with the font files. |
| A commercial font with a webfont licence | Usually, within its limits. Many are sold per site or by monthly pageviews; read the EULA. |
| A commercial font with only a desktop licence | Probably not. Web embedding is often a separate licence. |
| A font that came with your computer or design app | Check its terms before embedding it on a website. |
Two small traps. Subsetting (removing glyphs to shrink the file) changes the font, so web.dev's guide specifically reminds you to check the licence before subsetting or self-hosting. And a designer who sets up your site with their own font licence may have licensed it to themselves, not to you. Ask whose name is on it.
Do this: make a one-line record of every font on your site, where it came from and which licence covers it. Store the licence files in the same folder as the fonts.
What to change tomorrow
None of this requires a rebrand. Most small-business sites can move from tiring to comfortable in an afternoon.
Cap your text column
Set body copy to about
max-width: 65chso lines land between 45 and 75 characters on large screens. Check with the demo above or by counting a line.Raise the floor
Body text at 16 px minimum, ideally 17–20 px; line height near 1.5; real contrast, not pale grey. Then zoom to 200% and check nothing breaks.
Build one scale
Pick a base size and a ratio, map every heading and caption onto it, and delete the in-between sizes. One or two typefaces, with clear jobs.
Load fonts deliberately
WOFF2, subset,
font-display: swapfor headlines andoptionalfor body, or a system font stack. Preload at most one file.Self-host and file the licences
Remove links to third-party font servers, confirm in the network tab, and keep each font's licence next to its files.
Tomasz did all five on a Sunday. His text is now 19 pixels, dark grey on white, 62 characters to a line, in a self-hosted serif. Nobody has mentioned it. The choir director, if she came back, would just read to the end.
What the research supports
Screen studies support moderate line lengths for comprehension (around 55 characters beat 100 in one controlled experiment) and show people prefer moderate lines even when longer ones are read faster. A large eye-tracking study supports body text bigger than many sites use. Evidence that good typography lifts mood or credibility is real but small and early: a 40-person study with a stark contrast, and a 45,000-person newspaper quiz with a roughly 1.5% edge that its own author called not exactly scientific. No study shows that a particular font increases conversions.
Sources
- Dyson, M. C. & Haselgrove, M. (2001). The influence of reading speed and line length on the effectiveness of reading from screen. International Journal of Human-Computer Studies, 54(4), 585–612. Findings consulted via Dyson (2004), which reports the 25/55/100 cpl comprehension results; bibliographic record verified.
- Dyson, M. C. (2004). How physical text layout affects reading from screen. Behaviour & Information Technology, 23(6), 377–393. Full text consulted: speed with longer lines, characters per line as the key variable, preference for moderate lengths.
- Bringhurst, R. The Elements of Typographic Style, section 2.1.2, as quoted in Rutter, R. The Elements of Typographic Style Applied to the Web. Wording of the 45–75 and 66-character guideline.
- Rello, L., Pielot, M. & Marcos, M.-C. (2016). Make It Big! The Effect of Font Size and Line Spacing on Online Readability. CHI 2016, 3637–3648. Bibliographic record and a detailed published summary (BYU Editing Research) consulted; the ACM full text was not accessible to us.
- Larson, K. & Picard, R. W. (2005). The Aesthetics of Reading. MIT Media Lab / Microsoft. Full paper consulted: both studies, stimuli, results, and the authors' stated limitations.
- Morris, E. (2012). Hear, All Ye People; Hearken, O Earth, part 2. The New York Times, Opinionator, 8 August 2012. The original was not accessible to us; setup and figures cross-checked via Pentagram Papers 44, AIGA Eye on Design, The Scholarly Kitchen and Kieran Setiya, who quotes Dunning's 1.5% estimate.
- Brown, T. (2011). More Meaningful Typography. A List Apart, 3 May 2011. Definition and construction of a modular scale.
- W3C (2023). Web Content Accessibility Guidelines (WCAG) 2.2. Normative text of SC 1.4.4, 1.4.8 and 1.4.12.
- web.dev. Best practices for fonts and Introduction to variable fonts on the web. Font-display behavior, default blocking, WOFF2, subsetting, licence reminder, variable-font trade-offs.
- LG München I, judgment of 20 January 2022, 3 O 17493/20. Full text, Bavarian state portal. Operative part and reasoning.
- Legal Tribune Online (2022). Report on the Berlin searches over Google Fonts warning letters, 21 December 2022. Prosecutors' allegations, case count and settlement amount.
- heise online (2026). Google Fonts warning wave: BGH sends IP questions to ECJ. BGH VI ZR 258/24 and the three referred questions, cross-checked with TCI Rechtsanwälte for the 28 August 2025 date.
- European Commission. Implementing Decision (EU) 2023/1795 of 10 July 2023 on the EU–US Data Privacy Framework.
- SIL International. SIL Open Font License 1.1; Google. google/fonts repository README. Licence permissions and conditions; licence mix in the Google Fonts collection.
Sources checked 18 October 2026. Court decisions are described as reported in the cited documents; the German proceedings and the CJEU reference may have moved on since. Tomasz and his website are fictional, and all figures and the demo are original illustrations.