Web正文字体发展简史

• 英文原文：https://frontendfoc.us/link/82281/web
• 授权译者：ConardLi

当你正在纠结选择什么样的字体大小，尤其是在您尝试适应不同的屏幕和场景时。回顾一下网页字体发展的历史变化，或许会给你一个新的视角。

当我在 2005 年左右开始研究 Web 的东西时，有两种非常流行的正文字体样式：

• 10px Verdana;
• 11px Arial。

这两种样式可能出现在 90％ 的专业网站上，供 Windows XP 和更早版本的IE5、IE5.5 和 IE6 的用户看到。由于重字体提示，缺乏字体平滑或亚像素渲染，以及 Verdana 具有更大的 x-height，因此 10px Verdana 大致等于11px Arial，但字母略宽，它们的外观也相似。

今天，10px 和 11px 似乎微不足道，但是在 2000 年代初，由于两个原因，它们被认为是可读的：

1. 1990 年代末和 2000 年代初的 800×600 和 1024×768 屏幕的像素很大，因此选择的像素虽然偏小，但不像今天看起来的那么小。
2. 设计师和他们的客户习惯了 9、10和 11 点大小的印刷字体（书籍，杂志，传单等），而使用更大的字体就像对读者大喊大叫。

由于很少有设计 Web 的经验，图形设计师和市场部门依靠 QuarkXPress 和Microsoft Word 等以前的知识。“如何将传单或杂志广告中使用的字体磅值转换为HTML 字体尺寸？”

当然，由于像素没有通用的物理尺寸，因此无法可靠地将印刷点转换为像素。屏幕具有不同的每英寸像素比。原始的 Macintosh 屏幕为 72ppi（或 68ppi ？）。二十年后的 2004 年，屏幕普遍在 80-90ppi 的范围内。几年后，像素变小了，屏幕通常在 90-120ppi 的范围内，而大多数 iPhone 的分辨率为 160ppi 。尽管存在普遍的误解，甚至在 Retina 过渡开始之前，Web 的分辨率就不是72ppi。

但是，我们无需计算出每台设备的确切每英寸分辨率，即可做出明智的设计选择。试试看，应该始终胜过 dpi，ppi，Retina 甚至像素数。

在2006年11月，Oliver Reichenstein 进行了一个简单的实验：他比较了杂志的正文字体与正常人的眼睛到桌面屏幕的距离，两者的距离是正常的，而网站的文字看起来要小得多。Oliver 主张将正文副本设置为浏览器的默认值或 100%，这是常规16px 浏览器中的习惯用法。在2006年，甚至几年后，这都是一个革命性的主张。网站设计师和客户认为这是极端的。五年后，我们仍然必须为 11px 字体的死亡而战。

文字太小会花费更多时间阅读。用户可能不得不向屏幕倾斜，将移动设备靠得更近，斜视或者只是更加集中精力。作为设计师和开发人员，我们努力不要求使用或阅读我们作品的人们付出额外的努力。

平均而言，在线文字在2000年代末和2010年代初变得更大-至少在名义上是像素大小。我猜测是下面的原因：

• 由于 Oliver Reichenstein 提出的论点，媒体们纷纷改变了他们的观点。
• 在 iPhone 和其他早期的智能手机上，10-12px 范围内的文本看起来很小（分辨率在 150-200ppi 范围内）。

我记得网站设计师和开发人员在博客，专业新闻网站以及其他的客户项目中处于领先地位，这些项目都设置为 14-18px 的“更大”尺寸。这种演变渗透到新闻站点中，一个又一个引人注目的重新设计。如今，theguardian.com 的行高为 1.0625rem（17px）文本，nytimes.com 大约在 2017 年使用了 17px font-size 和 26px line-height，到了 2019 年，它在宽屏上达到了 20px font-size 和 30px line-height。

这些数字只是一个时间点。早在2003年，对于 800×600 屏幕上关闭字体平滑功能的大多数用户来说，12px Arial 可能是一个很大的可读性选项。这种浏览器的默认字体大小太大的感觉（在 Oliver 的文章于2006年发表时就非常明显），这在某种程度上是出于文化原因，但也有一些技术原因。同样，我们再次感到，除较小的屏幕外，所有像素的 16px 都非常小，这也是出于多种原因。

然后是很大的正文复制趋势。2012年4月，颇具影响力的网页设计师 Jeffrey Zeldman 重新设计了自己的网站，并在其网站上使用了 24px Georgia 的正文（每个帖子的开头部分为32px）。许多同行的设计师感到困惑，有些人抱怨该设计难以阅读，必须缩小笔记本电脑或台式计算机才能舒适地阅读。尽管如此，该设计一直持续到今天。其他设计师也使用了类似的尺寸，例如，Trent Walton 表示他偏爱 20–24 像素的文字（或 125–150％ ）。

这种趋势的最新例子是 Jeremy Keith 的 Resilient Web Design 在线电子书。Jeremy 使用 CSS锁 根据视口宽度在两个边界之间更改字体大小：100% 和 250%。320像素时（使用默认浏览器设置）的字体大小为 16px。分辨率为 1600px 时，您将获得 40px 的文字。显然，这是一种设计选择，我认为（类似于Trent Walton 所描述的那样），笔记本电脑和台式机使用的预期效果是，读者向后倾斜，并使其面朝屏幕而不是朝向屏幕。这种设计可以吸引您的时间，而不是浏览文本。

虽然这种设计可以在较小的屏幕（尤其是智能手机和平板电脑，在我的测试中）上提供良好的阅读体验，但我发现在较大的屏幕上很难。我的主要问题是：

• 一次只能看到几行文字。例如，一台13英寸笔记本电脑上有10行文字。我在阅读时有一定程度的注意力不足，当我尝试滚动阅读时，此设置消除了很多视觉环境；我通常会尝试通过选择我正在阅读的所有其他段落来解决注意力不足的问题，但是当设计一次只显示一个或两个段落时，这没有帮助。
• 每行文字实际上都很宽，要求读者的眼睛比平常更宽。这可能会产生两个不良影响：读者可能最终会花更多的精力来阅读同一行文本（例如3–5而不是2–4）；在更极端的例子中，较宽的眼球运动可能会导致眼睛疲劳或疲劳。

假设某人坐在沙发上，笔记本电脑放在膝上，目前正在阅读文章。并假设对于这种人，在这种设置中，他们有自己的偏好和当前的疲劳程度等，因此存在一个理想的字体大小，可以阅读他们正在阅读的任何文本。例如，它可以是 22px。

阅读过程涉及扫视和注视。在每个注视中（可能跨越四分之一秒），他们只会看到一小部分焦点文本：

现在，如果相同的文本更大，但是其他参数（如眼屏距离）没有变化，我猜结果将如下所示：

由于聚焦区域保持不变，并且文字较大，我怀疑眼睛在每次注视上正确识别的字母会更少。这就是为什么我的假设是，对于真正的大文本（如 Resilient Web Design 250%在更大屏幕上的正文），读者将需要使用更多的注视力来阅读同一文本，并且可能会失去阅读速度并更快地感到疲劳。我没有检验该假设所需的技能，但我会对很大的文本趋势保持警惕。

就我个人而言，我更喜欢对字体大小进行有限的调整。我喜欢从100%的小屏幕开始，然后在大屏手机或平板电脑上使用(比如 110% 或 115%)，在笔记本电脑和大屏幕上使用可能达到 125%。然后，根据我使用的字体、我想要的外观以及我在各种设备上测试的结果，我调整这些值。

对于我们一直在追逐设备制造商，操作系统和浏览器开发人员，并试图每两年调整字体大小以适应市场上的情况，我也感到难过。根据屏幕宽度稍微增加字体大小的概念很容易引起人们的注意。设备的工作不就是确保字体大小 100% 是可读的吗?

从理论上讲，CSS像素应该匹配一个定义为视角的“参考像素”:

参考像素是设备上一个像素的视角，像素密度为 96dpi，与阅读器的距离为一臂长。因此，一臂的标称长度为28英寸，其视角约为 0.0213 度。在臂长范围内，1px 相当于 0.26 毫米( 1/96 英寸)。

但只有在硬件制造商、操作系统和浏览器开发人员都为实现这一目标而合作的情况下，才能遵循这一规则。特别是硬件供应商更有兴趣销售针对视频分辨率(1080p、4K)进行优化的屏幕，即使它会让整个 UI 变得非常小。

从理论上讲，浏览器制造商应该能够改变 16px 的默认字体大小以适应现代设备。但是太多的现有内容依赖于这个默认的大小，而这个大小是不会改变的。

所以，我们猜测;我们测试;我们调整：

1. 无论在技术上是正确的还是近似的(我自己的计算显示分辨率为68dpi)，72dpi分辨率允许设计师轻松地将点大小转换为像素大小。因为一英寸有72个印刷点，在 72dpi 时每个像素正好是一个点。
2. 视网膜显示器并没有改变“每英寸系统点”的分辨率，而是将每个系统点映射到一个 2×2 平方的物理像素上。由于 CSS px单元的工作方式类似于这些设备上的系统点，并且将物理像素分辨率提高一倍并不会影响 HTML 文本的大小，所以我跳过了讨论以物理像素(例如 320ppi)测量的分辨率。
3. 响应式 Web 设计技术，当屏幕变得更小或更大时，允许您在两个属性值之间平稳转换。