archilyzer

commit 75ac8bd01ae8199c81e738e07c71938e4b732557
parent 4ac9196b7f79f74b45a4c4101f6e40441a23383d
Author: I Mean I'm Just Saying <imeanimjustsaying@kiwifarms.st>
Date:   Fri, 25 Sep 2026 22:30:33 -0400

common: text lays out at its design widths (text-rendering: geometricPrecision) (brand S2 review)

The 390 px shots read "Lig ht", "Sig nal" and "Me nu" at a device pixel ratio of 2 or 3, even after document.fonts.ready and without mobile emulation, and cleanly at DPR 1. The cause is hinting, not letter-spacing or font-stretch. IBM Plex Sans ships TrueType hinting, and Chromium on Linux (FreeType) rounds every hinted advance to a whole CSS pixel: at 14px the g of "Light" measured 9px against a 7.41px design width. geometricPrecision on <html> turns hinting off, and the same word measures its design widths. Text that is not hinted (macOS, iOS, Android) is unaffected. themeTokens.test pins the rule.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Diffstat:
M
common/components/themeTokens.test.ts
 | 
2
++
M
common/styles/tokens.css
 | 
11
+++++++++++

2 files changed, 13 insertions(+), 0 deletions(-)
diff --git a/common/components/themeTokens.test.ts b/common/components/themeTokens.test.ts
@@ -160,6 +160,8 @@ test(":root sets the one radius and a Signal --brand-mark default; .font-display
   assert.equal(root.decls.get("--radius"), "0.375rem");
   assert.equal(root.decls.get("--brand-mark"), ACCENTS.signal.onDark);
   assert.equal(rule(".font-display").decls.get("font-stretch"), "112%");
+  // Hinted integer advances split words at DPR ≥ 2 on Linux ("Lig ht").
+  assert.equal(rule("html").decls.get("text-rendering"), "geometricPrecision");
 });
 
 test("no retired theme family is left in the sheet", () => {
diff --git a/common/styles/tokens.css b/common/styles/tokens.css
@@ -125,6 +125,17 @@
   font-stretch: 112%;
 }
 
+/* Fractional glyph advances. IBM Plex Sans ships TrueType hinting, and
+   Chromium on Linux (FreeType) applies it at a device pixel ratio of 2 and
+   up, rounding each advance to a whole CSS pixel: at 14px the `g` of "Light"
+   or "Signal" measured 9px against its 7.41px design width, which read as
+   "Lig ht" and "Sig nal". geometricPrecision turns hinting off and lays text
+   out at the design widths. It changes nothing where text is not hinted
+   (macOS, iOS, Android's subpixel layout). */
+html {
+  text-rendering: geometricPrecision;
+}
+
 /* ---------------------------------------------------------------------------
    LIGHT — bone ground, graphite ink. The former Archilyzer light face, with a
    neutral primary and the accent from data-accent. Also the `:root` fallback.