在他的经典字体风格的元素罗伯特·布林赫斯特将印刷术定义为“赋予人类语言以持久的视觉形式的手艺”。在大多数情况下，这种视觉形式需要是易读的，它必须设置正确的基调。如果你的版式让一段文字难以阅读或完全无法阅读，那么它就毫无用处——不管它看起来有多棒。

想象一下，如果《圣经》以蓝色背景上的绿色独立花字体排版，历史会有多大的不同:

我不确定人们是否会把它当回事。

这就引出了印刷术中的三个关键概念:色调、可读性和易读性

语气是你的版式在视觉上传达的情绪或感觉，它与内容本身的基调截然不同。语气的范围从非正式到正式，你要确保你的排版为信息和品牌设置了正确的语气。上面的排版很好地说明了这一点。字体的年轻、俏皮感无法支撑这句话的庄重。

易读性定义区分单个字母形式(字母的形状)的容易程度，这是在用户界面中设置类型的一个重要考虑因素。例如，有些字体很难区分大写的I和小写的l。(明白我的意思吗?)这通常是字体设计的功能，尽管某些设计选择，如设置过高或过低的字母间距，或设置全部大写文本，都会影响易读性。

可读性定义阅读段落内容的难易程度。这是由字体的设计决定的而且您自己的设计选择，包括尺寸、间距和颜色。

我将更详细地讨论所有这些方面，但让我们从一个最重要的决定开始:字体本身。

字体种类繁多

排版师对字体的分类有很多不同的方法，但下面的分类在网页排版中是最常见的:

衬线-作为印刷内容中无可争议的王者，衬线字体的特点是在单个字母的末端(或“终端”)有称为“衬线”的小线。例如:Times New Roman, Georgia, Droid Serif

无衬线字体-顾名思义，无衬线字体缺少衬线。它们已经成为网络的标准，因为早期的计算机屏幕很难清晰地呈现衬线。例如:Arial, Verdana, Droid Sans

等宽—等间距字体中每个字符的宽度相同。早在打字机风靡的时候，这些字体就出现了，由于它们在文本编辑器中的使用，它们经历了一次复兴。例如:Inconsolata

草书-草体字体模仿手写。它们倾向于强调视觉兴趣而不是易读性，这使得它们更适合于标题和标题，而不是正文。例子:《Indie Flower》和《Great Vibes》

显示-显示字体往往要么大而粗，要么细如发际线，它们通常有高度复杂的字母形式。由于它们吸引注意力的影响，它们最适合用在标题中。例如:Changa一

你在书籍、文档和网页中看到的绝大多数字体都是这两种字体衬线或无衬线字体．(因为这篇文章只是对排版的介绍，所以我们将专注于这两种。)

衬线，还是不衬线?

如果衬线和无衬线构成了标准的、首选的字体类型，那么如何在两者之间做出选择呢?就像设计界经常出现的那样，答案是:视情况而定。

许多人认为衬线增加了印刷材料的易读性，但在数字世界中，由于老式数字屏幕分辨率低，衬线有破坏易读性的名声。随着视网膜和4K显示器成为标准，这就不再是什么问题了，但是如果您的用户使用各种各样的设备来查看您的网站，那么您最好还是使用无衬线字体作为正文文本。

别误会我的意思。衬线字体在网络上仍然很流行，但它们更适合于标题和其他短而大的文本块。由于其更华丽的外观，衬线可以赋予你的设计更正式，专业的基调，使其成为某些品牌的理想选择。

例如，新闻媒体和专业博客经常使用衬线字体作为主体文本。这对报纸网站来说尤其有趣，因为衬线字体使网站看起来和感觉起来像报纸。许多人也坚持认为衬线字体更适合长篇阅读，尽管这可能更多的是一种熟悉的功能，而不是科学事实。

TL;博士:正文尽量使用无衬线字体，以最大限度地提高可读性，并考虑在标题和较短的内容上使用衬线。但请记住，衬线字体可能正适合您的品牌或行业。

每种字体都有自己的声音

每种字体都有自己的色调，无论是专业的、俏皮的、经典的还是激进的。这意味着在错误的地方使用错误的字体会导致愚蠢的结果:

美国宪法如果用Comic Sans字体这种非常非正式的字体，看起来很可笑。对于如此严肃的文档来说，这样做毫无意义!

当然，没有一组特定的字体特征决定了字体的色调。它更像是你从观看或阅读中获得的一种感觉。这就是为什么最好从几个不同的选项开始你的排版探索，并在上下文中测试每个选项。对于每个示例设置，问问自己:这种字体是否传达了我想要的色调?这种语调是否与内容和媒介相匹配?你也会想和你的朋友、同事和你的目标受众中的人一起尝试。

TL;博士:相信你的眼睛，并且语调与内容相匹配．让其他人在上下文中查看字体，并告诉你他们设置了什么色调。他们的答案可能会让你大吃一惊。

做媒:创造完美的字体搭配

当您在一个页面上使用多种字体时，您需要考虑它们是如何搭配的。有些字体会发生冲突，而另一些字体看起来就像是为了在一起而设计的(有时候，真的是这样)。

有关字体配对的更多信息，请查看如何为你的网站选择最好的字体．否则，在你的设计中尝试一些不同的搭配，看看它们在一起看起来如何。Typegenius做这个超级方便。

专业技巧:在混合无衬线字体和衬线字体时要小心，除非你对自己的配对能力有信心，因为它们很容易发生冲突。你还需要避免成对的两种相同类型的字体(例如，两个无衬线字体，或两个衬线字体)，因为它们通常太相似了，很难区分。

只是不要被你的字体配对努力冲昏了头脑:在你的设计中坚持最多三种不同的字体．如果超出这个范围，用户会对您的层次结构感到困惑。

有用的字体资源

找到字体的地方

Typekit-这个服务托管并为网站提供大量的优质字体集合。它们很容易集成Webflow．

谷歌网页字体-这个庞大的免费字体集合包含了相当一部分无用的字体，但它也拥有一些美丽和灵活的珍宝，如Open Sans和Alegreya。

Behance公司而且Dribbble-许多设计师创造和分享他们自己的很棒的字体供你免费下载。

获得排版灵感的地方

Typewolf

评选出的版式网站

Hello Happy -美丽的网页类型

《伊索寓言》中的故事，字体选自谷歌字体

FontPair-一个非常棒的工具，用于测试您的字体组合

在对比

出于明显的原因，文本和背景之间的对比对于易读性至关重要。

但你可能会惊讶地发现，可读性最好的颜色组合是浅灰色背景上的深灰色文本——而不是纯黑色(#000)在纯白色(#fff)上。这是因为纯白色背景上的黑色文本会造成微妙的模糊和颜色流失，这是由于颜色的反射和吸收特性。而且，让我们面对现实吧，纯白色过一段时间会让眼睛疲劳。

虽然这很诱人，但要尽量避免在长文章的深色背景下设置浅色文本。浅色文字反射光，使其略微模糊，而黑色文字吸收光，使其更清晰。

如果你坚持在深色的背景上设置浅色字体，或者在图像上显示文本，那就把背景调得越深越好，并考虑在白色的文本上添加轻微的文本阴影，让它显得更醒目。而且要保持这样的段落短，以减少眼睛疲劳。

TL;博士:对于长段文字，在浅色背景上使用深色字体最好是深灰色加浅灰色。如果你是在一种颜色或图像上显示文本，让背景尽可能暗，并考虑添加一个微妙的文本阴影。

注意线的长度

行长衡量每行文本的字符数。随着桌面显示器的尺寸达到30英寸或更多，这已经成为越来越多的关注。

多长时间才算太长?阅读一本书跨越笔记本电脑屏幕或桌面显示器的整个宽度，会舒服吗?我认为不是。读一本只有书签那么宽的书也不舒服。

一般来说，将行长度限制为每行45-60个字符——尽管许多排版师认为每行最多80个字符是可以接受的。任何东西少而你的读者也会因为在两行之间来回跳来跳去而感到厌烦。任何东西更多,而读者可能会失去自己的位置——从一行的末尾一直到下一行的开头。

作为参考，Arial字体设置为11px谷歌文档运行到每行大约80个字符，与本文中的主体文本一样。

保持跨设备尺寸的易读性需要在字体大小和行长之间取得平衡。你设置的字体越大，每行字符就越少。在小型设备上，这可能导致每行字符非常少。

TL;博士:每行长度为45-80个字符。如果你做的是响应式设计，那大概是30em。

注意字体的重量

字体重量定义了每个字母的粗细(或粗细)。默认的字体权重是400，而粗体是700。许多字体的权重从100到900，以100为增量，其中100表示超薄，900表示超厚。

TL;博士:使用较粗的重量来强调或增加特定段落的戏剧性，避免在大的显示设置之外使用较细的重量。对于网页设计，你需要仔细选择你使用的权重:加载所有9个权重的Exo 2会严重减慢你的页面。

正确使用单位

在打印应用中，人们经常用“点”来表示字体大小，但在web上，我们倾向于使用像素(px)。这是一个相似的概念。

但在响应式设计中，最好使用ems和百分比等相对单位设置所有大小和间距属性，而不是像素等绝对单位。

一个新兴市场是一个相对的度量单位，等于HTML元素的当前字体大小(默认段落为16px)。所以，2em将是这个大小的两倍(默认段落为32px)。

为什么?两个原因:首先，间距需要随着字体大小的变化而变化。当字体设置为16px时，24px的行高可能会很好，但在32px高的情况下，这个高度就太拥挤了:

其次，相对单元使响应式设计(改变布局和样式以适应各种设备)更容易一些。如果您根据基本字体大小设计所有内容，那么您可以随时更改基本字体大小，站点的其余部分将自动调整，从而节省大量手动调整的工作。

你当然需要调整，因为不同设备的像素大小差别很大。例如，iPhone上显示的16px字体的大小是macbook上16px字体的60%，这使得它非常难以阅读。

在网页排版中使用空白

适当的间距使内容更容易阅读。间距不足会导致行、字母或单词模糊在一起，产生一种局促的感觉。要使易读性最大化，需要考虑三种间距:字母间距(跟踪)、行高(行距)和单词间距(这没有一个花哨的术语)。

字符间距(跟踪)

字母间距(或跟踪(在印刷设计中)定义了一个单词中每个字母之间的距离，可以增加或减少文本的易读性。注意，跟踪(字母间距)与距距不同，前者设置所有字母之间的单一距离，而距距允许不同字母之间的自定义间距。

TL;博士:通常，默认值是正确的值:它代表字体设计者所设想的完美间距。但是当您将文本设置为大写(全大写)时(这会降低可读性)，您可能需要添加跟踪功能来帮助读者更好地区分单个字母。

字间距

单词间距决定了句子中单词之间的距离。最好的单词间距能清楚地区分不同的单词，而不会迫使眼睛在单词之间来回移动太远。

TL;博士:您通常不需要调整单词间距，除非您发现设置为大尺寸的单词看起来太紧了。

充分利用线高

行高(领先的(在印刷设计中)定义了每行文字之间的垂直空间，并从基线到基线(下图中的红线)测量，忽略上升和下降。

不充分的开头不仅会让人感到幽闭恐惧，还会让你一遍又一遍地读同一句台词。我们都有过这样的经历。相反，过多的前导会让你的内容看起来不连贯。

TL;博士:一个好的经验法则是将线高设置为1.5em左右(或正文大小的1.5倍)。为了保持垂直节奏，段落间距(页边-底)应该与开头(行高)匹配。

规模很重要

字体大小传达了相对重要性，创造了戏剧性，并在决定可读性方面起着重要作用。

大的东西比小的东西更能吸引我们的注意力——尤其是当它们比预期的要大的时候。一只正常大小的德国牧羊犬不会引起你的注意。但一只德国牧羊犬有一匹小马那么大?你很快就能上教学课了。

它的信号的重要性

我们也会把更大的事情看得更重要。标题几乎总是比主体段落大，而主体段落又比脚注大。大小的差异帮助我们决定关注什么，忽略什么。

它增加了戏剧性(不是高中那种)

尺寸也可以用来创造影响和戏剧性。一行覆盖整个页面的全大写的高体、粗体字母的副本集比小写、斜体和小写的副本集更有力。

TL;博士:如果你想吸引眼球到一个元素上，把它做得明显更大。这就是为什么像电子邮件订阅框、“立即购买”按钮和标题这样的行动呼吁(cta)往往比页面的其他元素要大得多。

它可以提高可读性

你曾经试过读6字字体的书吗?我做到了。这是《指环王:王者归来．在整个过程中我的眼睛都很紧张，在理想的光线下阅读是不可能的。幸运的是，我当时20岁，不需要眼镜，但想象一下，如果是你亲爱的祖母和她的双光眼镜，那会是什么样子。

网页默认的段落字体大小是16px，但在互联网上最常用的字体大小是12px、13px和14px。我建议不要将正文设置在14px以下，因为任何少于这一点的内容都可能导致阅读困难。

注意:根据经验，将主标题(H1)设置为正文字体的两倍大小。对于你的其他标题(H2和以下)，只要降低你的大小约25%每一级。所以，如果你的主体文本设置为16像素，你的H1将是32像素，H2将是24像素，等等。蒂姆·布朗的模块化的规模是一个超级方便的工具，用于创建具有更多一点数学精确性的类型层次结构。

现在你知道了印刷术的基础知识……

你可以深入研究的东西还有很多，尤其是在字体方面。这里有一些有用的资源来了解更多关于排版:

-黑客设计-这门详细的课程涵盖了网页设计的所有内容，包括排版。

-图坦卡蒙+-一门专注于排版的网页设计课程。

-设计的黑客-这是一本关于设计的伟大的介绍性书籍，以分析的观点和关于印刷术的奇妙部分为特色。

现在走出去，让互联网的类型有些东西看!

有什么排版的好例子吗?或者任何关于艺术的问题类型？让我们在下面的评论中看到它们，我保证会参与其中。