3.6 KiB
title | localeTitle |
---|---|
Legibility and Readability | 易读性和可读性 |
易读性和可读性
易读性
易读性意味着能够区分文本中的不同字符。易读的文字意味着它可以很容易地解释。 考虑易读性时,请考虑字体的独特特征。一些考虑因素如下:
- 您应该根据其_上下文和预期用途_使用每种字体。查看它的历史记录,它是最好的用例场景。例如:Garamond最适合用于印刷的大型文本,而格鲁吉亚则用于屏幕。
- 请记住,字体是用于_显示文本还是正文_ 。
- 字体的x高度是字体中小写的“x”的大小。具有_中等到高x高度的_字体使得文本在甚至小尺寸下都清晰可辨。
- 传统上, 衬线字体对于身体文本比其无衬线对应物更易读。
可读性
可读性意味着以这样的方式安排一组单词或一组文本,以使文本更易于访问。这个想法是减少阅读文本正文所需的工作量。
斯蒂芬科尔斯评论说,可读性不仅仅引出了“你能读懂它吗?”的问题。但是否**“你想读它吗?”** 。
Jason Santa Maria在他的“ _网络版式”_一书中指出,阅读不是线性活动。我们读了一个叫做saccades的来回运动,这是我们的眼睛从一个点跳到另一个点。此外,熟悉单词的文字使我们更容易阅读。在考虑可读性时要记住的一些基本要点如下:
-
对比度是指字母不同部分的笔划粗细变化。对比度越高,中风的变化越大。对于长文本文本,请使用中低对比度字体。
-
线高是指两行文本之间的距离。你不想让文本块既不太紧也不太松。您可以通过属性“line-height”控制CSS中的行高。对于大多数文本,您可以将其设置在1.2到1.5之间(没有任何单位)。
-
行长度 (度量)是指一行文本中的平均字符数。较长的线条长度会妨碍我们的眼睛扫描文本,从而妨碍可读性。通常,每行大约45-75个字符对于文本正文是最佳的。如果您计划增加超出该行的行长度,那么还要注意增加行高,以便在两行文本之间有足够的空间。在CSS中,您可以设置容器的宽度,并且通过使用em单元,您可以接近一定数量的字符,具体取决于字体的宽高比。示例:width:35em;
-
跟踪是指调整文本中字符之间的间距。添加跟踪意味着在字符之间添加空白,反之亦然。在较小的字体大小(即小于10磅)下,添加跟踪有助于提高可读性。同样,对于大标题,使用负跟踪来使字母更接近。您可以通过'letter-spacing'属性控制CSS中的跟踪。例如:letter-spacing:0.05em;
-
字体大小是指文本中使用的字体大小。对于移动显示器,使用至少12px的尺寸。您可以通过'font-size'属性控制CSS中的字体大小。示例:font-size:48px;
如您所见,您需要考虑很多因素以确保最佳的易读性和可读性。请记住,对于任何上述因素,没有严格的规则。它们仅仅是可以帮助您更好地训练印刷眼睛的指南。
附加链接:
- 排版基础知识的实用排版。
- Tutsplus网页设计 - 关于易读性和可读性的文章
- 在Web排版 - 一本关于Web排版的书。