41 lines
3.6 KiB
Markdown
41 lines
3.6 KiB
Markdown
---
|
||
title: Legibility and Readability
|
||
localeTitle: 易读性和可读性
|
||
---
|
||
## 易读性和可读性
|
||
|
||
### 易读性
|
||
|
||
**易读性**意味着能够区分文本中的不同字符。易读的文字意味着它可以很容易地解释。 考虑易读性时，请考虑字体的独特特征。一些考虑因素如下：
|
||
|
||
* 您应该根据其_上下文和预期用途_使用每种字体。查看它的历史记录，它是最好的用例场景。例如：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;
|
||
|
||
|
||
如您所见，您需要考虑很多因素以确保最佳的易读性和可读性。请记住，对于任何上述因素，没有严格的规则。它们仅仅是可以帮助您更好地训练印刷眼睛的指南。
|
||
|
||
### 附加链接：
|
||
|
||
* [排版](https://practicaltypography.com)基础知识的[实用](https://practicaltypography.com)排版。
|
||
* [Tutsplus网页设计](https://webdesign.tutsplus.com/articles/typographic-readability-and-legibility--webdesign-12211) - 关于易读性和可读性的文章
|
||
* [在Web排版](https://abookapart.com/products/on-web-typography) - 一本关于[Web排版](https://abookapart.com/products/on-web-typography)的书。 |