Document style switch: Google Docs' Arial, or a serif reading setting

#3
by thomwolf HF Staff - opened

A second axis in the header beside the theme toggle. Docs is what the editor has always been — Arial 11pt at 1.15, no space between paragraphs. Reading is a long-form magazine setting: Libre Baskerville at 16px on 28.8px, 17.6px between paragraphs, section heads in small caps at 0.075em with 2em of air above.

The proportions come from measuring a Foreign Affairs article rather than from taste alone. Worth recording how that went, because it is the kind of thing that reads as settled when it is not:

  • The article sets its body in Ubique Text, a face Matthijs Herzberg cut for the Council on Foreign Relations, which owns it. No substitute can be exact, so the comparison had a floor.
  • Nine free serifs were measured against it — x-height and cap-height from the font tables, set width and copyfit from rendering the article's own paragraphs. Source Serif 4 was tried first and is 18% wider than Ubique, two extra lines a paragraph. Newsreader is the closest on the numbers.
  • Libre Baskerville was chosen anyway, on looks, from a slider panel over the candidates. It is further from Ubique than Newsreader is. That is a deliberate aesthetic call, not a measurement result.
  • Where it lands: 10.69 words a line against Docs' 13.54 and the article's 9.88 — nearer the magazine. Switching styles reflows the document, which is a real consequence of a wide face at an open size.

Fonts: four files, 132KB, each inside the ~100KB the Hub allows a non-LFS binary. Variable, carrying wght 400–700, so bold and bold italic interpolate from the real design rather than being synthesised. Nothing references them until data-doc-style="reading" is stamped, and an unused @font-face is never fetched — Docs-style readers pay nothing.

The sheet is untouched. Docs' 8.5in page with 1in margins already leaves a 624px column; only type and vertical rhythm change. No colour is hardcoded either — every rule inherits --doc-text and friends, so Reading works in dark mode without a block of its own. The choice is stamped on <html> before first paint like the theme, so there is no flash of the wrong face, and a stored Reading choice preloads the serif from the head.

Test pins the measured values as exact numbers — 16px on 28.8px, 17.6px between paragraphs, 25.6px small-caps heads with 0.075em tracking and 2em above. They were chosen by eye, so nothing else in the code records why these and not others; an earlier version of this style carried a 1.2 heading leading against the article's 1.45 for exactly that reason.

Independent of the other PRs in this set, but it touches client/src/doc.js, client/app.css, client/doc.html, client/src/common.js and test/browser.js, which they also touch — expect textual conflicts depending on merge order.

lvwerra changed pull request status to merged

Sign up or log in to comment