it-swarm.cn

是否有最佳的字体大小/行高比?

在网页上设置文本样式时,可以设置字体大小和行高。例如,将使用font-size中的14px和(大约)line-height中的18px(使用值1.3em设置)来显示此帖子的文本。 。

在其他网站上,比率通常约为1.2。

关于此的最佳实践是什么?我可以从哪些好的资源中学习更多有关该主题的信息?

77
Yannick Blondeau

您希望在 W3.org 之类的网站上寻求建议。

当一个文本块是单个间距时,许多有认知障碍的人在跟踪文本行时会遇到麻烦。提供1.5到2之间的间距可使他们在完成前一条线之后就更容易地开始新的线。

W3C可访问性准则1.4.8 状态(强调我的):

视觉呈现:对于文本块的视觉呈现,可以使用一种机制来实现以下目的:(AAA级)

用户可以选择前景和背景色。

宽度不得超过80个字符或字形(如果为CJK,则不得超过40个字符)。

文本不合理(与左右两个边距对齐)。

段落中的行距(前导)至少为半个空格,且段落间距至少为行距的1.5倍。

在不使用辅助技术的情况下,文本的大小可以调整为200%,而无需用户水平滚动即可在全屏窗口上阅读一行文本。

34
JonW

文章 最佳行高 说:

印刷参考始终将理想的行高设置为1.2 ems(相当于字体的字母高度或磅值的字体测量)。

定义适当的行高的主要思想是使文本段落看起来坚实且易于阅读(如果您选择较大的行高,则段落和行之间的差异将变得难以区分,并且难以阅读)。行高还取决于行长(来自同一篇文章):

设计要求的线长(或度量)明显长于印刷参考中推荐的线长。增加的线长要求增加线高以辅助眼动。

实际上,这是主观的,因此,例如,Amazon Kindle使您可以从多种变体中选择行高(并且将分别增加段落之间的间距)。

16
alexeypegov

没有一个答案

不幸的是,没有line-height领先)最适合所有情况。最佳范围大约为1.3–1.7,但是要选择最佳值,我们需要查看所使用的特定字体和文本行的宽度(除其他外)。

在Troy Templeman的出色文章 良好印刷术的基本规则 中,他说(强调我的意思):

前导(或行高)是类型的行之间的垂直间距。默认的页面布局程序导入通常就足够了,但是有一些因素可能需要对其进行调整。字体可能具有较长的上升和下降长度,它们在类型的行之间相互接触,从而引起干扰。 如果字体的x高度很高,则会减小字体之间的负间距,从而产生紧缩的前导错觉。紧的开头使读者很难找到下一行的开始,这在长行中尤为明显。因此,对于宽列类型,较大的行高会导致更好的可读性。对于正文,我通常将首位设置为使首字母的高度完全适合字体之间的大小,这大约是字体大小的1.5倍。

相同大小的两种字体不一定会显示为相同大小。对于混合大小写的文本,字体的外观大小在很大程度上受x高度的影响,如下图所示:

Comparison of x-heights between fonts.

当字体的x高度较大时,它似乎在行与行之间的间距较小,因此需要更多前置才能舒适地阅读。 (您可能会猜到,对于所有大写字母设置的文本来说,大写字母的高度至关重要,而不是x高度。)

要考虑的第二个方面是文本行的宽度,也称为measure。当眼睛沿一行文本从左到右移动时,到达一行的末尾时,需要跳回到下一行的开头。随着线宽的增加,如果线高过紧,我们的眼睛将很难找到正确的下一行。 (也就是说,我们犯了更多的错误,例如开始两次读取同一行或跳过一行。)

马克·布尔顿(Mark Boulton)的文章 五个简单的步骤来改善版式 指出:

您的领导力应与您的衡量标准成比例地增加。小尺寸,较少引导。广泛测量,更领先。这是一个简单但有效的规则。

(如果您想继续阅读,他会在后面讨论颜色选择如何影响最佳线条高度。)

如您所见,不可能选择单个最佳行高。相反,您必须首先考虑字体的x高度和文本中的行长。一定要在图形设计问答网站上阅读 艾伦·吉尔伯森的出色答案

14
Chris Calo

我认为这受个人喜好和文本块宽度的影响。文本块越宽,为了使您的眼睛在阅读时保持同一行,行高应该越大。

就个人而言,我喜欢将行高设为1.5em 要么 1.6em

此博客排版交互式指南 具有 有关行高的部分 ,这也表明行高为1.5em

14
Kristof Claes

这是一个非常方便的 article 的摘录:

不幸的是,仅仅知道给定字体大小的最佳行高是不够的。

所有三个印刷尺寸(字体大小,行高和行宽)都会相互影响。因此,您不能不考虑线宽就谈论线高或字体大小。

基于此推理,还必须存在一个最佳线宽,该宽度对应于上式中的最佳线高。

问题是,您不知道线宽和线高之间的确切关系。您可以肯定知道的是,线宽明显大于线高。

借助基本的数学建模,您可以得出有根据的猜测,即最佳线高和线宽之间的关系是指数关系。

它变得更加复杂,因此这里有指向计算器的链接,该计算器可以为您处理数学。 http://www.pearsonified.com/typography/

10
Alex

请参阅此文章: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/ -非常有趣的文章,还描述了网站上文本的其他方面。

请记住,由于分辨率,屏幕尺寸以及用户观看屏幕的距离,它也始终取决于设备(在使用较小的屏幕的情况下,与台式机相比,移动电话要显着更近)。 RWD(响应式Web设计)在这里至关重要。

6
Dominik Oslizlo

在这里,您可以找到有关此主题的一些很好的资源:

最佳资源:https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height

看到所有值和为什么更喜欢使用数字值。的好例子
https://codepen.io/anon/pen/ObxKjJ

我认为,我更喜欢使用在1.5到2之间,因为在1.5到2之间提供空格可以使他们在完成前一行之后更容易地开始新的一行。

2
Artiom S.

我发现 本文 由信息架构师公司提供。很有意思。

根据它(参见第3节),1.4em对于可读性而言是一个不错的选择。

2
Daniele

我在这里看到的大多数答案都比印刷更适合印刷。阅读印刷品与在网络上阅读有所不同。

就文本大小而言,应该使用始终让用户自行决定而不是使用固定的字体大小,而应使用在浏览器中设置的默认值。在屏幕上阅读文本时,1.5是一个很好的可读行高。这使得视力障碍者更容易使用屏幕放大镜阅读您网站上的内容。

当Web开发人员违反Web标准时,即使不是没有可能,他们也会使某些人很难浏览其网站。有许多具有不同能力的人使用辅助技术来体验您的网站,并且遵守网络标准可确保这些人可以实际使用您的网站。人们以许多不同的方式访问和使用Web,并且违反标准不仅使您看起来像是一个不了解其技术的黑客,而且还缩小了网络受众的范围,实际上,这并非目的。在网络上吸引尽可能多的受众?

1
AMG

最佳字体大小是默认字体大小。信任根据监视器DPI及其内部研究选择此值的浏览器。

font-size: medium;

来自 :smashing magazine

请注意,1.5是经典印刷书籍中通常推荐的值,因此我们的研究支持这一经验法则。

根据 Eric Meyer的研究 ,也要尝试避免加单位,仅使用绝对值。

  line-height: 1.5;
0
Jacek Krawczyk

1.5em是您应该拥有的最小值。大多数字体都擅长1.6em。但这主要取决于类型家族。有些需要更多,而另一些则需要更少。有时,行高可以达到1.8em

0
Ren