Font rendering: clarity & perf tips

font-rendering.md

🔤 Modern CSS Font Rendering — clarity & performance (practical notes)

1) text-shadow: clarity vs cost

• Use sparingly. Even a subtle shadow forces extra paint work; animated or large-blur shadows can trigger repaints every frame.
• Prefer small offsets + zero/low blur for contrast on light text.
• Avoid stacking multiple shadows on long passages; reserve for headings or UI labels.

.heading {
  text-shadow: 0 1px 0 rgb(0 0 0 / 25%);
}

Why: Shadows increase paint cost; heavy blur increases rasterization time.

---

2) Paint & compositing considerations

• Text is typically painted, not composited. Effects that change glyph appearance (shadows, filters) re‑paint text.
• will-change rarely helps text; it can worsen memory usage.
• Prefer color contrast and font weight over effects.

.body {
  color: oklch(30% 0.02 260); /* perceptual contrast without effects */
}

---

3) Variable fonts: fewer files, better rendering

• One variable font often replaces many static files → fewer requests, better caching.
• Optical sizing (opsz) improves small/large text clarity automatically.

@font-face {
  font-family: "InterVar";
  src: url("/fonts/inter.var.woff2") format("woff2");
  font-display: swap;
}

.text {
  font-family: InterVar, system-ui, sans-serif;
  font-variation-settings: "opsz" 14, "wght" 420;
}

Tip: Let font-optical-sizing: auto; handle opsz when available.

---

4) font-display: perceived performance first

• swap is still the safest default for content sites.
• optional works for secondary fonts where FOUT is acceptable.
• Avoid block unless branding absolutely requires it.

@font-face {
  font-family: "Brand";
  src: url("/fonts/brand.woff2") format("woff2");
  font-display: swap;
}

---

5) Font smoothing: handle with care

• -webkit-font-smoothing and -moz-osx-font-smoothing are non‑standard and platform-specific.
• They can reduce legibility on modern displays and variable fonts.
• Prefer proper weights, line-height, and contrast instead.

/* Use only if you fully understand the platform tradeoff */
.subtle-ui {
  -webkit-font-smoothing: antialiased;
}

---

6) Line metrics matter more than effects

• Set a stable line-height to avoid reflow during font swap.
• Use font-size-adjust (when appropriate) to maintain x‑height consistency across fallbacks.

.text {
  line-height: 1.5;
  font-size-adjust: 0.52;
}

---

Authoritative references

• MDN Web Docs — font-display, variable fonts, text rendering
• W3C — CSS Fonts Module Level 4
• Google Fonts Knowledge — variable fonts & performance guidance
• Chromium Dev Blog — rendering & paint performance deep dives

Bottom line: prioritize contrast, weights, and variable fonts; treat visual effects as exceptions. Clean typography beats clever tricks for both clarity and speed.