响应式字体大小的公式

尊重用户字体偏好 vs. 设计师控制

  • 许多人认为网站不应覆盖根字体大小:会调整浏览器文字大小(或最小字号)的用户,期待这一设置得到尊重。
  • 也有人认为,大多数用户从不调整 font-size 设置,因此“合理”的响应式默认值对他们有帮助,而且不会明显伤害高级用户。
  • 反方观点:糟糕的默认值和可发现性问题是浏览器厂商的问题,不应由每个网站通过自定义缩放来“修复”。
  • 关于第三类人群也有争论:那些在每台设备上只设置一次字体大小、之后从不调整的人;有人认为他们很重要,也有人认为他们规模太小,不值得优先考虑。

基于视口的缩放与限制

  • 一些评论者批评根据视口宽度缩放字体大小,称 CSS 像素本身已经是“虚拟”的,并警告在超宽显示器上会出现巨大的文字。
  • 也有人认为,只要严格限制范围,适度的基于视口缩放是可以接受的,例如使用 clamp(min, fluid, max) 来防止极端情况。
  • 线性缩放会增加测试负担:不再是检查几个断点,而是要考虑许多不同宽度。

单位:rem、em、px,以及 62.5% 技巧

  • 普遍共识:文本应使用 rem/em,这样能跟随用户偏好;避免在根元素上硬编码 px。
  • em 与 rem:rem 适合一致的全局缩放;当元素(如标题)应相对于其局部上下文缩放时,em 很有用。
  • html { font-size: 62.5%; } 这个技巧(把 rem 当作“10px”来用)遭到强烈批评:概念上不正确且脆弱;支持者则认为,只要正文文本按相应比例重新缩放,它仍可保持比例一致。

更广泛的排版系统与工具

  • 有人强调,响应式排版必须包含行高、间距和布局栅格,而不只是 font-size。
  • 推荐使用 Utopia、modular scales、RFS,以及用于 clamp() 的 Sass 辅助工具,来自动化字体和间距尺度。

无障碍性与现实世界的视力需求

  • 一位视力受损的评论者强调,需求不仅仅是大小:还包括更粗的笔画、高对比度,以及覆盖“审美性”的低对比度主题。
  • 另一些人建议用浏览器扩展、阅读模式和用户 CSS 来缓解糟糕的排版,这反映出他们对网页默认并不尊重用户控制的挫败感。