A formula for responsive font-size

Original Article ↗ Hacker News Discussion ↗

Respecting User Font Preferences vs. Designer Control

  • Many argue sites should not override root font size: users who adjust browser text size (or minimum size) expect it to be honored.
  • Others contend most users never touch font-size settings, so “reasonable” responsive defaults help them and don’t significantly harm power users.
  • Counterpoint: poor defaults and discoverability are a browser-vendor problem, not something each site should “fix” with custom scaling.
  • There is debate over a third group: people who set font size once per device and never adjust it; some see them as important, others as too small to prioritize.

Viewport-Based Scaling and Clamping

  • Several commenters criticize scaling font size with viewport width, calling CSS pixels already “virtual” and warning of giant text on ultrawide monitors.
  • Others find modest viewport-based scaling acceptable if tightly clamped, e.g., clamp(min, fluid, max) to prevent extremes.
  • Linear scaling introduces testing burdens: instead of checking a few breakpoints, one must consider many widths.

Units: rem, em, px, and the 62.5% Trick

  • Broad agreement: use rem/em for text so it tracks user preferences; avoid hard-coded px on the root element.
  • em vs rem: rem for consistent global scaling; em useful when elements (like headings) should scale relative to their local context.
  • The html { font-size: 62.5%; } trick (to treat rem as “10px”) is heavily criticized as conceptually wrong and brittle; defenders say it can remain proportional if body text is rescaled appropriately.

Broader Typography Systems and Tools

  • Several stress that responsive typography must include line height, spacing, and layout grids, not just font-size.
  • Tools like Utopia, modular scales, RFS, and Sass helpers for clamp() are recommended to automate type and spacing scales.

Accessibility and Real-World Vision Needs

  • A visually impaired commenter highlights needs that go beyond size: bold strokes, high contrast, and override of “aesthetic” low-contrast themes.
  • Others suggest mitigating bad typography with browser extensions, reader mode, and user CSS, reflecting frustration that the web rarely honors user control by default.