让你的网站排版脱颖而出
系列六篇文章
在时尚界，设计师们会谈论“宣言珠宝”——例如，一条项链，能让一件简单的直筒连衣裙的视觉冲击力提升十倍甚至两百倍。
在厨房设计中，我母亲曾用一个岛台上方的抽油烟机作为“宣言单品”。
在这两种情况下，“宣言”都是整体设计中突出、引人注目的元素，它能吸引眼球并将所有其他元素凝聚在一起。
我们在网页上也看到了这一点。最贴近的例子是，本博客当前的设计在标题中使用了Garamond字体的旧式、细体但放大的版本。这无疑是一个“宣言”。快速浏览设计博客，你会发现更多“宣言式排版”的例子。
你可能会说，这都很好。
但是，你如何实现它？又为什么要这样做呢？
尤其是当：
- 你的大多数客户所在的行业并不把美学放在首位。
- 你没有大量的视觉设计预算。
- 你只能使用特定的字体家族，因为客户有品牌标准。
好吧，别担心。
下面你将看到六篇文章中的第一篇，它将带你从基本术语（字体和字型有什么区别？）到选择能为你的网站注入活力和格调的字型和字体家族。
而且，你将用比你一生中写过的代码都少的代码，让这一切运转起来。
让你的网站排版脱颖而出：系列六篇文章
- 排版的视觉声音：基本排版术语，以便我们开始讨论
- 字符的解剖。这些部分如何赋予字型其声音？是什么让一个字体家族适合汽车或时尚、科技或消费品行业？
- 设置正文排版，以便轻松阅读长篇编辑内容：从裸HTML到格式良好的段落和副标题的演进
- 为网站选择字体，以建立品牌：一个简单的公式（经过40年持续使用的实战检验！），你可以每次都遵循它，从而获得看似从网站本质中自然产生的、显著不同的外观。
- 超越Google Fonts：在哪里可以找到优秀的字体家族？有些网站充斥着所谓的免费字体，其中满是学生实验品和知名品牌的仿制品。有些大型网站提供构建我们日常所见字体的铸字厂的整个库。然后还有我去的地方，寻找捆绑包、订阅和优惠。
- 让字体发挥作用：跨浏览器。在区块主题中。在theme.json中（但主要是在编辑器中）。只需一点PHP和CSS，你就可以使用当今在线销售的所有字体。
六篇文章之第一篇：
你学到的关于在线交流的第一件事是什么？
是这个吗？“永远不要全部使用大写字母。人们会认为你在对他们大喊大叫！”
即使是在纯文本的世界里，如果你追溯到那么远，也很清楚字体是有声音的。
排版也有一门语言。
与排版打交道足够久，你会发现有一些词汇可以对字型进行分类和组织。有描述字母及其组合的词汇。还有描述字母每个部分的词汇，一直到小写字母i上的点。
你越精通排版的语言，你的选择就越能匹配你内容的声音，吸引最想与之互动的流量，并将这些流量转化为你社区的坚实成员。
组织你的字体：
字体、字型、家族
大多数人用字体这个词来描述任何与排版相关的东西：
“我们能把这个字体调大一点吗？”
“我宁愿那个红色的字体是蓝色的。”
严格来说，字体有两层含义：它是你安装在电脑上或上传到服务器上的一段软件，用于以特定的字型渲染文本。
“我想下载那个字体。”
“如何在这台机器上激活字体？”
或者，为了致敬排版在熔融金属时代的历史，字体也可以指单一重量、单一尺寸的字型。
字型是一套具有共同风格（和共同名称）的完整字符集。在上图中，字型可以是指有名称的部分，也可以是指有名称的部分加上重量和样式。
一个简单的区别：字体是你使用的东西。字型是你看到的东西。*
字体家族是具有相同风格但重量不同的一系列字型的集合。通常每种重量都带有斜体样式，但并非总是如此。而且，通常供应商会以低于购买三四种重量的价格出售整个家族。
超级家族是由两个或多个家族组成的集合，结合了衬线字型和无衬线字型。
样式包含什么？
衬线、字重、倾斜
在我们的讨论中，已经不得不使用一些行话来描述使一种字型区别于另一种字型的三大要素。
这是Haboro Normal Light，一种衬线字型。衬线（图中绿色部分）是每个有垂直主干的字母顶部和底部的延伸部分。那些垂直部分是主干。在印刷品中，艺术总监长期以来认为衬线通过引导视线穿过字母间的空间来提高可读性。
这是Montserrat ExtraLight，一种无衬线字型。它没有衬线。
这是Museo Slab Light，一种粗衬线字型。同样，衬线是绿色的。粗衬线在网页上尤其有效，因为它们保留了衬线在可读性上的优势。同时，它们额外的厚度使得即使在低分辨率屏幕上衬线也清晰可见。
字型的重量：
细体总是流行吗？
字型的重量描述了构成字符形态的线条的粗细。
左边的Montserrat拥有你可以在CSS和JavaScript（包括theme.json）中指定的全部九种字重，数字从100到900。它还有九种斜体字重。
但要记住，一个字体家族可以只有一种字重——或者超过50种！
斜体：给你的字体加点倾斜
这是Montserrat家族的斜体字重。
并非每个家族都有斜体。有些家族有每种字重的倾斜版本。
真正的斜体是与同一家族的常规版本分开设计的。倾斜体通常只是常规样式的倾斜版本。
Montserrat有真正的斜体：小写字母a完全由弯曲部分和垂直部分组成，并且它们高度相同。这被称为单层结构。衬线家族，如上面的Garamond，也简化了小写字母g。
这字体对你来说够宽吗？
字体家族有第三个定义其声音的属性：宽度。最大的家族会拥有几种宽度中的一套字重，范围从压缩到超宽。
无衬线字体家族往往比衬线家族拥有更全的宽度范围。这是Haboro的三种宽度。
本系列后续文章可能会探讨其原因以及解决方法。
需要一些空间？
你的字体也需要！
如果一段文字难以阅读，通常是一个间距问题。间距在三个地方产生影响：字符之间、行之间和段落之间。
字母之间的两种间距是字距调整和字偶距调整。
字距调整是字母之间的固定距离，你可以全局应用于一段文本，或应用于以特定样式显示的所有文本块。
字偶距调整是对两个给定字母之间空间的精细调整。最常见的是，你收紧像T、P或W这样的大写首字母与下一个字母（通常是小写）之间的空间，以使整个单词的字母间距保持一致。
行与行之间的空间称为行距，这又是对金属活字时代的一种致敬。在那个时代，排字工人在字行之间添加薄铅条来增加必要的空间。
这三个样本来自Adobe Illustrator。像它启发的其他桌面工具一样，Illustrator允许你控制间距——包括字偶距和字距调整——精确到你所用字型大写M宽度的极小分数。（这个度量单位是一个em。）
上面的样本的字距调整分别为-25、0和25百分之一em。在CSS中，你使用letter-spacing属性来设置字距调整。
Adobe工具还允许你以数值方式设置字偶距——或者应用两个全局值之一：光学和度量。这些值来自字型本身，字型可能嵌入了带有间距值的字母对列表，可以自动收紧例如以To开头的单词中T和o之间的空间，也可能没有。
CSS中没有字偶距调整。
多年前，一些人写了一些JS库试图进行一些字偶距调整，但它们从未流行起来。
最后是行距。桌面工具允许你以数值或比例方式设置它。20%的行距等同于CSS的line-height属性值为1.2。
上面，顶部样本中宽松的行距并不会使一行文字难以阅读。但在某些人看来，它确实（有点）显得有点繁琐。
底部样本则不同。宽松的字距和紧密的行距使得很难看清独立的文字行；相反，样本看起来更像一堆漂浮的字母。
最后，还有段落间距
段落间距是灵活的——有些人只是凭