A formula for responsive font-size
Web developers are debating whether responsive formulas that scale font size with viewport width improve readability or undermine user preferences. Many argue that sites should respect the browser’s default or user-configured font size and rely on full-page zoom or reader mode for accessibility, while others defend fluid sizing (often with CSS `clamp()` or tools like Utopia and modular scales) to adapt typography across devices. The exchange highlights broader tensions between design control, accessibility for users with low vision, and the limits of current browser mechanisms for expressing and detecting user preferences.
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.