当你正在纠结选择什么样的字体大小,尤其是在您尝试适应不同的屏幕和场景时。回顾一下网页字体发展的历史变化,或许会给你一个新的视角。
当我在 2005
年左右开始研究 Web
的东西时,有两种非常流行的正文字体样式:
10px Verdana
;11px Arial
。这两种样式可能出现在 90%
的专业网站上,供 Windows XP
和更早版本的IE5、IE5.5
和 IE6
的用户看到。由于重字体提示,缺乏字体平滑或亚像素渲染,以及 Verdana
具有更大的 x-height
,因此 10px Verdana
大致等于11px Arial
,但字母略宽,它们的外观也相似。
今天,10px
和 11px
似乎微不足道,但是在 2000
年代初,由于两个原因,它们被认为是可读的:
1990
年代末和 2000
年代初的 800×600
和 1024×768
屏幕的像素很大,因此选择的像素虽然偏小,但不像今天看起来的那么小。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
所描述的那样),笔记本电脑和台式机使用的预期效果是,读者向后倾斜,并使其面朝屏幕而不是朝向屏幕。这种设计可以吸引您的时间,而不是浏览文本。
虽然这种设计可以在较小的屏幕(尤其是智能手机和平板电脑,在我的测试中)上提供良好的阅读体验,但我发现在较大的屏幕上很难。我的主要问题是:
假设某人坐在沙发上,笔记本电脑放在膝上,目前正在阅读文章。并假设对于这种人,在这种设置中,他们有自己的偏好和当前的疲劳程度等,因此存在一个理想的字体大小,可以阅读他们正在阅读的任何文本。例如,它可以是 22px
。
阅读过程涉及扫视和注视。在每个注视中(可能跨越四分之一秒),他们只会看到一小部分焦点文本:
现在,如果相同的文本更大,但是其他参数(如眼屏距离)没有变化,我猜结果将如下所示:
由于聚焦区域保持不变,并且文字较大,我怀疑眼睛在每次注视上正确识别的字母会更少。这就是为什么我的假设是,对于真正的大文本(如 Resilient Web Design 250%
在更大屏幕上的正文),读者将需要使用更多的注视力来阅读同一文本,并且可能会失去阅读速度并更快地感到疲劳。我没有检验该假设所需的技能,但我会对很大的文本趋势保持警惕。
就我个人而言,我更喜欢对字体大小进行有限的调整。我喜欢从100%的小屏幕开始,然后在大屏手机或平板电脑上使用(比如 110%
或 115%
),在笔记本电脑和大屏幕上使用可能达到 125%
。然后,根据我使用的字体、我想要的外观以及我在各种设备上测试的结果,我调整这些值。
对于我们一直在追逐设备制造商,操作系统和浏览器开发人员,并试图每两年调整字体大小以适应市场上的情况,我也感到难过。根据屏幕宽度稍微增加字体大小的概念很容易引起人们的注意。设备的工作不就是确保字体大小 100%
是可读的吗?
从理论上讲,CSS像素应该匹配一个定义为视角的“参考像素”:
参考像素是设备上一个像素的视角,像素密度为 96dpi
,与阅读器的距离为一臂长。因此,一臂的标称长度为28
英寸,其视角约为 0.0213
度。在臂长范围内,1px
相当于 0.26
毫米( 1/96
英寸)。
但只有在硬件制造商、操作系统和浏览器开发人员都为实现这一目标而合作的情况下,才能遵循这一规则。特别是硬件供应商更有兴趣销售针对视频分辨率(1080p
、4K
)进行优化的屏幕,即使它会让整个 UI
变得非常小。
从理论上讲,浏览器制造商应该能够改变 16px
的默认字体大小以适应现代设备。但是太多的现有内容依赖于这个默认的大小,而这个大小是不会改变的。
所以,我们猜测;我们测试;我们调整:
68dpi
),72dpi
分辨率允许设计师轻松地将点大小转换为像素大小。因为一英寸有72个印刷点,在 72dpi
时每个像素正好是一个点。2×2
平方的物理像素上。由于 CSS px
单元的工作方式类似于这些设备上的系统点,并且将物理像素分辨率提高一倍并不会影响 HTML
文本的大小,所以我跳过了讨论以物理像素(例如 320ppi
)测量的分辨率。Web
设计技术,当屏幕变得更小或更大时,允许您在两个属性值之间平稳转换。