Copyright © 2017 Matej Latin

Editor: Nick Jones
Designer: Matej Latin
June 2017

ISBN 978-1-9998095-0-8

betterwebtype.com
matejlatin.co.uk

本电子书内容来自互联网，版权归原作者或原出版社所有。请在下载后24小时内将其删除。任何组织或个人不可通过本资源获取的非法盈利，其行为均与本资源制作者无关。

如果您喜欢本书，请购买正版纸质书或正版电子书，以支持作者获取更好的阅读体验。

本书大部分内容由 AI 翻译，部分内容人工校对。中文翻译首发于 Linux.do，仅供站内学习交流使用。

译者序

2018 年，我还在大学社团做海报，那时候对排版的理解更多是靠“直觉”。直到接触到了 Matej Latin 的网页排版公开课，也就是这本书的起源。课和中提出“排版的完美等边三角形”——即字号、行高与行宽之间的动态平衡，以及“模块化比例”的概念，彻底改变了我观察网页的视角。我至今铭记在心：“要获得完美的段落，需要三样东西：字体大小、行高和行宽。它们需要达到平衡。”

从那以后，这三要素就成了我做阅读文字时绕不开的底层直觉。每当我看到一个网页，总会下意识地去拆解它的文字比例是否协调。尽管此书以英文为基准，其中的排版规律对多种语言均适用。

虽然这本书写在八年前，在互联网平面设计风格迭代如此之快的今天，它讨论的核心规则却依然稳固。甚至可以说，如今主流的网页排版方向，就如书中的所言。如果你想摆脱“凭感觉”排版，真正理解排版的美学逻辑，倾情您阅读推荐这本书。

2025年12月30日
Anonymous

CONTENT

Front matter

前言

第一部分：宏观排版

网页排版介绍

字体的结构

选择字体

完美段落的等边三角形

组合字体

排版的韵律

模块化比例和有意义的排版

页面布局

响应式网页排版

第二部分：微观排版

连字

小型大写字母和数字

标点符号

首字下沉

结语

附录A：接下来做什么？

附录B：关于作者

尾注

前言

无论您是自学成才的网页设计师，渴望拓展技能；是平面设计师，希望更新您的排版知识；还是网页开发者，终于决定踏上探索那未知且可能令人畏惧的排版领域之路——我都要向您致敬。读完本书，您将成为“更好网页字体”的倡导者之一——那些对网页排版的现状不满并积极采取行动的人。您将成为排版黑暗宇宙中的一座灯塔，以身作则引领他人。踏上这条路需要无尽的好奇心与无穷的勇气，而这绝对值得。因为排版是我们世界中视觉传达的基础部分。所以，通过阅读本书，您不仅会成为网页排版的大师，更将精通通过世界上最大的媒介——网络——进行视觉传达的艺术。

本书源于我于2017年2月14日推出的电子邮件课程。那是个值得纪念的时刻，我从未料到这门课程会如此受欢迎。当时我正坐在伦敦格林威治一家温馨的咖啡馆里，点击了"开始发送"按钮。我一直怀有写书的念头，但始终不确定该写什么。直到完成10节课程的学员们开始要求更多内容，方向才逐渐清晰——他们开始呼吁我将课程转化为书籍。该课程曾被《Net》杂志选作封面专题报道，亦获《Web Designer》杂志、Codrops、Designer News、Sidebar及CSS Tricks等平台推荐。这些曝光助推了课程传播，而反馈始终保持着极高的积极性——众所周知，当用户基数扩大时负面评价往往随之而来，但Better Web Type课程却打破了这种规律。截至撰写此段时，该课程已收获702条评价，平均评分高达4.7分（满分5分）。

不过，课程中有个相当棘手的部分：我需要在每节课中删减内容，同时保留信息的精髓。没人喜欢阅读冗长的邮件，所以我将每节课的字数限制在1000词以内。这意味着我不得不舍弃许多想表达的内容。现在，我可以通过撰写一部完整的著作来弥补这一遗憾。这本书涵盖了我对网页排版的所有见解，并阐述了我的网页设计方法（正如后续内容所示，二者密不可分）。最精彩之处在于，我扩展了学员们最期待的章节。通过向所有学员发起问卷调查，我收集了他们最喜爱且希望深入学习的章节，并据此充实了书籍内容。《字体选择》《排版的韵律》《模块化比例》等章节的内容现以扩充至原篇幅的400%。此外，本书新增了三个完整章节：《页面布局》《响应式网页排版》及《首字下沉》。所有知识都通过一个循序渐进的实际案例贯穿始终，确保我们能将所学知识付诸实践。

为什么写这本书
答案很简单。网页排版很少被视为网页设计和开发流程的一部分。这句话中的“开发”部分至关重要，因为网页开发人员通常被认为在网页排版中没有什么作用。这起初是开设相关课程，现在则是撰写这本书的原因之一。另一个原因是，通常参与该流程的人们往往将排版视为理所当然。对于选择字体、塑造页面和定义字母大小等事情，人们很少或几乎不予关注。对内容本身的关注也非常少。正如你将在本书开头看到的那样，内容是我们整个流程需要围绕的核心。通过这本书，我想挑战所有这些现象。我想让人们意识到排版有多么重要。最后，我希望参与网页设计流程的每个人都能为提升网页排版水平做出贡献，但只有当他们了解了相关知识才能做到这一点。这正是本书的宗旨——教育参与网页设计流程的每一个人。

这本书适合谁？
大多数课程学员是网页设计师、开发人员或平面设计师。这就是当初编写这门课程的目标人群，但其他人也从中发现了价值——比如研究心理学但完全不从事网页设计的人，向高中生教授网页设计的教师，大学教授等等。尽管如此，这本书仍然忠实于其起源——该课程。它依然是网页设计师和网页开发人员的资源。现在书中甚至包含了更多代码示例，并且也加入了 Sketch 示例（这是我在课程中不得不完全删掉的内容）。我希望这能让这两个群体觉得它更有价值，但我相信其他人也会对书中讨论的主题感兴趣。

如何使用本书
我建议您先通读一遍，从头到尾。这样您将了解整个过程，并且在阅读的过程中您将构建示例网站。这将帮助您更好地理解每一章的内容。之后，您应该将其放在手边，以便随时查阅。书中包含一些代码示例；另一些则是CodePen上的动态代码示例，以URL形式提供。这些通常更复杂，但观察它们的实际运行应该有助于您理解所讨论的主题。

希望您能享受阅读本书的时光；这是数月辛勤工作的结晶。任何反馈都将不胜感激，我也十分乐意探讨网页排版或设计相关的话题。欢迎通过 hello@matejlatin.co.uk 与我取得联系。

Matej
2017年7月2日
，伦敦卡姆登。

第一部分：宏观排版

网页排版介绍

“排版是一门艺术与技术，旨在安排字型，使文字内容在展示时清晰易辨、易于阅读且引人入胜。”¹

假如你搜索“排版”想要了解它是什么，很可能首先会跳转到维基百科的页面。在那里，排版主要被定义为一种艺术。如果你查询《牛津学习者词典》，会发现它的定义是“为印刷准备书籍等所做的工作或艺术，尤指设计文本印刷时的呈现方式”。将排版仅与印刷相关联的第二种定义绝对过时了

我想要挑战人们对于排版的现行定义，并最终改变对其的认知。它不再仅仅与印刷媒介挂钩。早已不是如此。如今我们每天在线浏览内容的时间超过六小时，网络内容消费占比已超过50%，排版早已不只属于传统印刷领域。³同时我也想质疑将排版简单归类为“艺术”的观点——尤其是涉及网页设计时。更不只是这样的事。

“完美的排版更像是科学而非艺术”⁴，这是一句名言，归功于扬·奇肖尔德——他在1928年出版了革命性的书籍The New Typography。他与那个时代的其他排版设计师一样，对排版领域产生了深远的影响。

“排版更接近于艺术而非工程——尽管工程学当然是它的一部份”⁵，另一方面，这也是《字体样式要素》(The Elements of Typographic Style) 的作者罗伯特·布里恩赫斯特的观点。

一开始可能觉得奇怪，为何在排版领域如此有影响力的人物，对它的定义却持有如此矛盾的观点。Tschichold认为它更像是科学/工程，而Bringhurst则视其为艺术。两人都将排版置于连接两者的那条线上，但他们的立场却位于这条线的两端。

排版的各种定义

Tschichold是20世纪20年代早期平面设计革命的一部分。那是一个工业化的时代。在那个时代，工程师被视作世界的救世主，因为工程学是当时一切产品生产的核心与前沿。排版这一工艺过程也被卷入这个新兴的工业化世界。当时的平面设计师无论使用何种工具，都需要具备工程技能。这很可能塑造了Tschichold对排版定义所持的观点。

布林赫斯特早已见证了数字设计的魔力。排版过程中不再需要组装实体部件。信息时代将这一过程缩短至数秒而非数小时。如今设计师只需合适的软件和打印机——两者皆非他们亲手制造的工具。因此现代印刷设计流程中几乎不包含（或完全缺乏）工程成分。布林赫斯特在书中专注于印刷排版，这可能使他对排版的定义更倾向于艺术层面。

网页开发者应该具备排版技能

网页排版，连同交互设计、网页动画等，这是介于设计师与前端开发灰色地带之间的一个领域。

我相信在网页设计中，排版处于核心位置。正因如此，我认为设计师与开发人员都需要掌握排版的基础知识。设计师本应具备这些技能，懂得如何排版、何时选择何种字体、如何塑造段落、如何使用比例尺、如何运用网格在工作中建立节奏。我曾与许多设计师合作，却发现实际情况大多并非如此。要么是设计师自学成才，尚未领悟排版的重要性；要么虽然学过平面设计，却只将其视为一门不得不修的课程。开发人员们，请不要想当然地认为你们的设计师都精通排版。

网页设计的一切最终都需要转化为代码。既没有打印机，也没有能将设计直接转化为可用代码的魔法按钮（至少在撰写本书时还不存在）。能够同时精通设计和编码这两部分技能的人才非常稀缺，要真正掌握这两套技能需要投入大量时间和精力。这意味着，即使是具备优秀排版技艺的设计师，通常也不具备将自己的作品转化为真正可用的代码的动手能力。

因此，填补这个巨大灰色区域的责任就落在了网页开发者身上：这些网页开发人员通常并不被期望拥有那些设计技能，他们竭尽全力将设计稿转化为代码，却往往会漏掉那些构成差异的关键细节。是时候认识到他们在塑造网页排版中的重要性了。是时候停止将他们排除在设计过程之外了。

设计过程不应是设计师独享的领地，而应是众人皆可参与并作出贡献的舞台。不要只是简单地遵循设计师绘制的设计稿——那只是使用图形设计工具描绘的、对网站外观的大致近似。要理解为何如此设计。当设计不合情理时，要敢于纠正你的设计师。投入到网页排版工作中去吧。与你的设计师一同打磨排版细节。并肩作战。打造一套行之有效的排版风格，这是你们作为团队共同的责任。

这正是本书的由来所在，也是为何它同时面向网页设计师与网页开发者而撰写。其目标在于将网页排版精准置于艺术（设计）与工程（开发）之间的核心地带。旨在覆盖两者间的大部分交叉领域，并邀请网页开发者参与到设计流程之中。旨在教育与网页设计流程相关（或理应相关）的人员，提升其在网页排版方面的工作品质。旨在推动产生更优秀的网页排版，从而为打造更完善的网络世界贡献力量——一个具备可读性的网络，一个以易于理解的呈现方式展示内容的网络，一个真正传递信息的网络。

为什么排版很重要？

Jan Tschichold 和 Robert Bringhurst 对于如何定义排版可能持有不同见解，但他们对排版的目标却有着一致的看法。他们只是用不同的词语来描述它。在Jan Tschichold的书中，“新排版的本质是清晰”⁶被设置为粗体。Tschichold进一步阐述：“新排版与旧排版的区别在于，它的首要目标是根据文本的功能来发展其可见的形式……形式必须源自功能”⁷。

布林赫斯特说得更具体：“排版设计必须邀请读者进入文本，揭示文本的基调和内涵，阐明其结构与秩序，并与现有其他元素建立联系。”⁸

大多数人认为排版就是关于字型。大多数设计师也认为排版就是关于字型。但排版远不止于此，它是通过字体来表达语言。布局，构图，字体选择。
——马克·博尔顿

排版并非仅仅关乎字体。它也不仅是字号、页边距、间距、比例或色彩。排版关乎以客观的方式组织信息。其主要焦点在于信息本身，以及我们如何将它呈现给读者。大小、色彩和字体只是帮助我们塑造信息的工具。正如我们将要看到的，所有这些工具必须作为一个整体协同工作。没有一个能独立于其他工具而存在。网页设计师和网页开发者都需要退后一步，不再仅仅专注于选择字体，而是要审视排版所代表的更宏大的图景。

数字革命的结果是，排版成为人人皆可为之的事（但只有少数人能做好）。当这样一项传播工具普及到大众手中时，规则就被遗忘，最佳实践也被舍弃。网络起步之初，忽视了数百年来字排版的演变历程。但终于，在过去几年里，人们开始觉醒，渴求更优质的网络排版。现在，是时候同等重视排版的重要性，以及在网络环境中塑造它时设计与开发的双重重要性了。

宏观与微观排版

排版可以分为宏观排版与微观排版。宏观排版主要关注易读性——字号与色彩、间距、布局、层级与节奏。微观排版注重可读性——诸如字母形态（letterforms）本身、符号（symbols）、字符间距（letter spacing）与字距微调（kerning）等细节。本书第一部分先探讨宏观排版，第二部分则从微观角度继续探讨排版。我们将涵盖排版的某些细节技法，这些细节能让您的作品与众不同。它决定了普通排版与卓越排版之间的差异。

字型与字体

在继续之前，我们先澄清这一点。在排版专家的圈子里使用“字型（font）”这个词，可能会招来一些异样的眼光。有些人甚至可能觉得被冒犯，毫不犹豫地称你为菜鸟，甚至说你无知。“字型”对应一款字体（typeface），就像“mp3”对应一首歌。难道你听过有人说“我真的很喜欢那个mp3”吗？

我倾向于两个词都用。这完全取决于我和谁交谈。"字体"（Typeface）这个词可能对那些不熟悉排版的人来说不太清楚，所以在那种情况下我会使用"字型"（font）。但在本书中，我将根据它们的实际含义来使用这些词。"字型"将指代"helvetica.ttf"，而"字体"将指代"Helvetica"（包含不同字重和风格的字型家族）。

核心要点

网页排版位于设计与前端开发之间的灰色地带。因此，无论是网页设计师还是网页开发人员，都应具备排版技能。

排版不仅仅是关于字型。字型，或者说字体，是我们将信息转化为形式、以供阅读的工具。

根据罗伯特·布里恩赫斯特的观点，排版必须邀请读者进入文本，揭示其含义，阐明其结构，并将其与周围的其他元素联系起来。

不要混淆 font（字型）和 typeface（字体）这两个词。Font 是一个文件（例如 helvetica.ttf），而 typeface 是一组样式（通常分为不同的 font 文件：helvetica-italic.ttf、helvetica-bold.ttf 等）。

字体的结构

在开始之前，我们需要了解我们的主要工具——字体。它是排版的核心所在，我们的大多数决策都将回归到字体的不同属性上。一旦我们学习了字体结构的一些基础知识，选择字体、组合字体以及塑造完美段落就会容易得多。

仅凭名称来挑选字体是远远不够的。
—Rob Carter

字体有着千姿百态。衬线体与无衬线体是两大主要类别，但每一类别都包含众多风格——衬线体有旧式体、过渡体、新古典体、粗衬线体、克拉伦登体与雕刻体；无衬线体则包含怪诞体、方形体、人文体与几何体。探索这些字体，让我联想到星际探索。浩瀚的字体宇宙中，每一种字体都与众不同，独一无二，各具特色。但正如星辰与行星，尽管它们独具特质，所有字体却共享着共通之处——它们的结构。无论其风格多么特殊或独特，所有字体的大部分主要特征都是相通的。观察字体，恰似仰望苍穹凝视繁星：若不知所见何物，便觉平淡无奇；但若知晓从何处着眼、如何辨识定义字体（或星辰）的独特特征，便会发现其中趣味盎然。

1) x字高；2) 上伸线；3) 顶点；4) 基线；5) 升部；6) 横笔；7) 字干；8) 衬线；9) 腿部；10) 字碗 ；11) 字谷；12) 连接弧；13) 字环；14) 字耳；15) 连结笔划；16) 水平笔划；17) 字臂；18) 垂直笔划；19) 大写高度；20) 下伸线。

让我们来看几个主要特征，它们能帮助你更好地观察天空中的文字。我们无需了解所有细节，因此会重点介绍基本特征。升部与降部是最明显的特征。它们决定了字母的形状，也定义了字母本身。升部是字母位于x字高线上方的部分，降部则是位于基线下方的部分。大写高度标记了大写字母的最高点。请注意，升部通常会超过这条线。同时注意某些字母会略微超出基线和x字高线，比如上图中的字母"e"和"g"。字体设计师这样做是为了让字母在视觉上看起来更平衡。更圆润的字母需要稍大一些，才能与其他较大且较不圆润的字母保持视觉上的平衡感。

字体颜色和字重

在排版中，字体颜色并非指实际的颜色。它指的是黑色字体在白色背景上所呈现出的视觉重量感。我们来做个小测试。这里有两种字体：Merriweather 和 Georgia。两者都是优美的衬线字体。将它们的字号设为 16 像素，应用深灰色，并置于白色背景之上。将它们并排放置，以便轻松比较。

分别设置成 Merriweather 和 Georgia 字型，尺寸为 16 像素、行高为 24 像素的段落排在一起。

花点时间观察一下我们刚才介绍过的字体及其特征。如果你花足够的时间观察，就会注意到两者之间的主要区别。Merriweather看起来更粗重，颜色更深，甚至看起来更大——这一点我们稍后会谈到，现在先关注颜色和重量。退一步看看整个段落。两者都以常规字重、相同字号和相同行高设定，但它们看起来截然不同。Georgia比Merriweather具有更高的反差，这使它看起来更浅。这一点，结合其他特征（字母的高度和大小），让Georgia在页面上的存在感更弱。这就是我们在排版中说的“字体颜色”或“字型颜色”。

对比度也是影响字体外观“浓重感”的主要因素。Merriweather是一种低对比度字型，而上图中的Baskerville则是高对比度字型。仔细观察每个字母的笔划，其差异显而易见。

X字高（X-height）

我们注意到上一个示例中字体大小的差异。尽管两个段落的字号都设置为相同大小（16像素），但两种字体看起来却截然不同。让我们来仔细看看。

Merriweather 看起来比相同字号的 Georgia 更粗重，也更宽大。

让我们来比较这两种字体的特性。花几分钟观察并比较它们。好了吗？好的，我们来看看。画出这些线：基线、x 字高线、大写高度线以及下行字母结束线。我们只对 Merriweather 字体做这个操作，因为这样更容易发现差异。

Merriweather 的x字高大于 Georgia 的x字高。

基线位于小写字母x的底边，x字高线位于其顶边，因而得名“x字高”。我将线条画得足够长，使其延伸到旁边排布的Georgia字体处。你注意到差异了吗？同一单词的字母，在相同字号下，用Georgia字体却触及不到Merriweather字体所对应的x字高线。因此，Georgia的x字高小于Merriweather。再看看全高线，你也会发现同样的规律：Georgia字体的大小写字母高度均短于Merriweather中的对应字母。这正是Merriweather看起来比Georgia更大的原因所在。

我们通过具体的尺寸来设置网页中的文字尺寸。无论是像素、EM 还是 REM — 最终得到的文字尺寸总归是以具体的像素值呈现。但像素在排版中的意义并不大。这完全取决于字体的x字高及实际尺寸。

拥有较大x字高的字体被视为更现代且更易于阅读。Merriweather、Roboto和Freight Text都是具有大x字高的现代衬线字体的优秀范例。

x字高较小的字体被认为较为传统古典。典型的例子包括Garamond、Baskerville和Bodoni等字体。

我们将在关于组合字体的章节中再次讨论x字高，敬请留意。

字体分类

让我们仔细看看主要的字体风格，从衬线体风格开始。

衬线体样式（Serif styles）

旧式风格
通常是指为印刷而设计的最早的罗马字体——通常是在15至18世纪之间。这里的“罗马”是指其设计灵感来源于罗马大写字母。第一批罗马字体于1465年在意大利被雕琢出来。Caslon、Jenson、Bembo和Garamond是这种风格字体最典型的例子。在此之前，印刷商使用的是哥特字体。旧式字体在当时是新颖现代的设计。随着印刷术的发明，铸字师（在金属上雕刻字体的人）的技艺得到了提升，字体也变得更为精致。其笔画粗细对比度低，极细笔画比我们通常在高对比度字体中看到的要粗重一些。衬线呈括号形，曲线笔画轴线向左倾斜，而x高度相对较小。

过渡时期
很大程度上是由 18 世纪英国字体设计师约翰·巴斯克维尔（Baskerville）的作品定义的。他的作品代表了旧式风格和新古典主义之间的时代，故而得名。衬线仍是支架式（有弧线连接），但明暗对比度略高。曲线笔画的轴线是垂直的。巴斯克维尔字体（有许多基于原始设计的变体）是最著名的过渡时期衬线字体。另一个常被忽视但很好的例子是 Georgia（一种常用于屏幕显示的衬线字体）。

Neoclassical and didone
以意大利字体设计师詹巴蒂斯塔·博多尼的作品为代表，他将字体设计提升至全新境界。粗细笔划间的对比极为强烈，曲线笔划的轴线垂直，衬线没有任何弧度连接。所有基于原始博多尼字体的演绎，都是新古典/迪多尼字体的绝佳范例。你能想象在金属上刻出如此纤细的形状吗？

Slab
Slab（板状衬线体）兴起于19世纪，当时主要用于广告领域。其衬线上通常没有弧线连接，且非常粗重，粗细笔画之间没有对比。Rockwell 和 Egyptian Slate 是两种流行的板状衬线体字体。

Clarendon 一种在19世纪中期开始流行的有衬线字体风格。其衬线通常非常短，字体笔划的粗细对比度也相当低。（译者注：是 Slab 的后继风格）

无衬线体样式（Sans-serif styles）

Grotesque（哥特体）
这是最早在19世纪末期出现的无衬线字体风格。这些字体在笔画对比上不太明显，并带有一种特有的方正感。即使像“e”和“o”这样的圆形字母，其曲线也明显呈现为方正的曲线。轴线是垂直的。Helvetica、Univers和Akzidenz是这种风格的典型代表。

Geometric（几何无衬线体）
与其他无衬线字体风格一样，这些字体由“新文字设计运动”推广普及，该运动由前述的扬·奇肖尔德及其他志同道合的20世纪早期的字体设计师所定义。这些字体基于最基本的几何形状：圆形、三角形和方形。笔画看起来是均匀的，因此没有粗细对比。这类字体往往比怪诞体（无衬线黑体）的可读性差一些。Futura是最知名也是（尽管设计于20世纪20年代，但直至今日）最受欢迎的几何无衬线字体。它在2015年是网页上最常用的字体。⁹

Humanistic（人文主义）

许多排版专家声称这种风格是最具可辨性与可读性的无衬线风格。这些风格通常与衬线字体的设计特征相匹配——弯曲笔画的对比度和轴线十分明显（与其他无衬线风格不同）。Frutiger 和 Gill Sans 是两种非常常见的人文主义无衬线字体。

核心要点

所谓的“字色”并非指红色、绿色或蓝色等实际颜色。在排版中，“字色”是指特定字体所呈现的文字深浅程度。这既受字体对比度的影响，也与其x字高及样式相关。

x高度是字体结构中最需要牢记的要件之一。它基本与小写字母的主体高度相符。x字高较大的字体被视为现代字体，通常更易阅读。较小的x字高则是Garamond和Baskerville等经典字体常见的特征。

字体样式主要分为衬线体与无衬线体两大类。衬线体可进一步细分为古风体、过渡体、新古典体、粗衬线体及Didone体。无衬线体则包含怪诞体、几何体与人本主义体。

选择字体

我们已掌握了所需的信息，可以更好地探索字体世界。我们了解了 x 字高、对比度和色泽，以及它们如何定义字体。我们认识了不同类型的字体风格，并对它们产生的时代有了基本概念。现在，是时候开始运用这些知识了——在本章结束时，我们将开始创建我们的示例网站。

我其实并不信奉移动优先/桌面优先这种信条。我们如今已发展到了一个阶段，这个问题甚至不应该再被纳入考虑。我认为，我们开始创建网站时，首先应该审视网站的主要目的。不仅仅是我们正在设计的特定网站，而是其真正、根本的目的。我指的是内容。试想，没有内容的网站是什么？它是一个空壳。内容糟糕但外观精美的网站是什么？它就像一个外表好看但缺乏个性的人。那么反过来说呢——内容出色但外观贫乏的网站？它就像是一个个性鲜明、趣味十足的人，却因为“外表不够标准”而无人关注。

内容将决定网站的面貌。多数情况下，内容不由你掌控（除非你在创作个人网站）。我们对此无能为力，这没关系。但说到选择字体时，你的最终选择应基于内容。在线上内容如此丰富的时代，要想脱颖而出并非易事。但如果我们以恰当的方式呈现内容，成功的机会就会大得多。因此，我们将以内容优先的方法来创建示例网站。但首先，我想强调一个事实：排版不仅仅是“选择字型”（是的，这里我本该用“字体”一词，但我想说明其他人通常是如何理解排版的）。

排版不只是“选择字型”

在新的计算机时代，字体的泛滥与对文字的肆意处理，已构成一种威胁着我们文化的新型视觉污染。在成千上万的字体中，我们真正需要的只是少数几种基本字体，其余的都可以丢弃。
—马西莫·维涅利

最伟大的视觉传达者之一马西莫·维涅利（Massimo Vignelli），仅使用六种字体就开创了职业生涯。他一生创作了大量的平面设计作品。对他而言，繁多的字体呈现出噪音污染。他将这些字体视为干扰——那些来了又去的无意义潮流。他的观点相当激进，但我认为他不无道理。世上的字体如此之多，以至于人们难以区分优劣。请相信我，确实存在着大量品质低劣的字体。

Massimo Vignelli 的六种字体¹⁰

为网站选择字体往往是一种基于个人喜好的无意识决定。设计师眼中的美观，可悲地比读者预期更为重要。字体与内容毫无关联，自然也与读者毫无关系。排版艺术应当邀请读者步入文本。¹¹之前我曾引用罗伯特·Bringhurst的观点，现在再次引述，因为我认为这是排版艺术最重要的目标。关键不在于有多少字体可供选择，或我们使用了某款字体多少次；不在于它的流行程度，也不在于潮流趋势。基于流行趋势选择字体，只会让我们的网站沦为毫无身份特征、面目模糊的作品。

排版有很多定义。如果你询问不同的人，每个人都会给出自己对于排版是什么以及如何定义它的、略有不同的看法。但是，排版领域中最杰出的人士从未说过排版仅仅是选择字体。字体仅仅是工具。借助它们，我们为我们希望读者接受的信息赋予形态。所以问题不在于使用什么字体。正确的问题在于使用什么字体能最匹配内容。因此，字体，甚至排版本身，与信息（内容）是不可分割的。两者不能孤立存在。

网页安全字体也并非一无是处

那个只有少数几种字体可供选择的时代已经离我们很远了。我记得刚开始从事专业网页设计工作时，总是会反复查看哪些字体是网页安全的。那时其实没多少选择，大部分时间都只是想让网页摆脱默认的Times New Roman样式。很快我就开始把这种字体跟一些问题联系起来——每当某些功能不工作，或是我在CSS里搞砸了什么导致浏览器回退到默认状态时。那个负面联想让我没能意识到Times New Roman其实是一种漂亮的老式字体。我想自己应该是从来没使用过它。

两个分文不花（零投入，零开销）也不占空间（零千字节）的漂亮字体。

但想想看。Times New Roman 和 Georgia 都是不错的衬线字体，不会影响你网站的加载时间。Georgia 是一款专为数字使用设计的过渡衬线字体，它本就是为屏幕而生。它看起来比 Times New Roman 更窄、更高，也更现代一点。你用过这些字体吗？为什么不用呢？何不在你的下一个项目里试试看？

只使用Georgia字体的网站。

网页安全字体仍应作为一个可选项。尤其对于需要在各种设备上良好运行的大型网站而言——不仅限于iPhone和高端MacBook。那些网络连接状况不佳的设备又该如何应对？一个200KB的精美字体文件，可能就意味着回访用户与页面跳出之间的差别。

选择字体时需要考虑的事项

我曾尝试为这些要素分配优先级进行排序，但实际操作起来相当困难。我认为这些考量因素几乎都应该被同等重视，不过我还是勉强按照某种优先程度进行了排序。

目标
你的文本目标是什么？甚至，你的网站目标是什么？它是一个让人们阅读中长篇内容的地方吗？或者是一个期望大多数用户快速扫视内容、寻找特定信息的网站？他们是否预期完成一项任务后就离开？

文本
这是每个人都会跳过甚至完全忽略的最重要步骤。如此多的网页设计师设计出完美形态的漂亮网站图片。他们中的大多数人仍然使用 Lorem Ipsum 作为虚拟文本。相反，请弄清楚网站是关于什么的。将发布什么类型的内容？新闻？博客文章？诗歌？散文？获取一些内容样本。这很重要。如果你不阅读内容，你选择的字体将如何与网站上的内容和信息相得益彰呢？此时你可能在想：“读它？？”是的，读它。“但我没有时间，我要设计页面，要写代码。我有截止日期要赶。”借口。如果你忽视内容，你永远无法在字体选择上变得更好。作者试图传达什么？不要在没有内容的情况下进行设计。不要使用虚拟文本。最坏的情况是，使用类似的内容——在网上找点东西，甚至可能是竞争对手的网站，然后使用它。

字体
你追求什么？网站的内容是关于什么的？哪种字体能以最客观的方式补充其内容？阅读这些内容的人习惯看什么？他们期望看到什么？使用现代几何风格的无衬线字体会不会显得突兀？我们是否应该转而选择一种感觉现代的衬线字体呢？

正文还是标题？
你是为正文选择字体，还是仅用于标题？两者会用不同的字体吗？一种字体是否能与另一种相得益彰？（我们将在第5章探讨字体搭配这一主题。）这是一个需要在早期就解决的重要问题。如果字体是用于正文，那你应当特别注意用它排印长篇文本的可读性。

字重与样式
字体是否包含基本的字重与样式？ 粗体、斜体和粗斜体？ 还有更多的字重吗？ 有些字体有多种字重与样式，通常被称为主力字体。 即使是有多种选项，也只使用少数几种字重。 两到三种应该就足够了。

字重

字重 | 字重名称
100 | 极细（纤细）- Thin
200 | 超细（特细）- Extra Light
300 | 细体 - Light
400 | 常规 - Normal
500 | 中等（中黑）- Medium
600 | 中粗（准粗）- Semi Bold
700 | 粗体 - Bold
800 | 特粗（超粗）- Extra Bold
900 | 极粗（浓黑）- Heavy

部分字体可能仅提供一种字重或样式。我建议尽量避免使用此类字体。这类字体限制太多。如果在此类字体上使用粗体或斜体样式，就会产生所谓的“伪字体样式”。简而言之，由于缺少粗体样式，浏览器只是将常规字重当作粗体渲染，这样就破坏了原有字体的设计，应当极力避免这种情况。

字型样式

样式 | 说明
Normal（常规） | 常规样式。
Italic（意大利斜体） | 斜体变体，部分字符拥有独特的设计。
Oblique（伪斜体） | 常规字体的倾斜样式。

值得注意的是，有些字体并没有专门区分伪斜体（oblique）与意大利斜体（italic）的样式。在这种情况下，浏览器会利用现有的样式来模拟缺失的那一种。您可以通过以下两个在线示例来观察其区别：在 betterwebtype.com/book/c3e1 处查看 Baskerville 字体的伪斜体版本；在 betterwebtype.com/book/c3e2 处查看其真正的斜体样式。

字型的千字节大小
这取决于到目前为止提到的所有考虑因素。有些字体家族会比其他的更重（文件更大）。衬线体通常比无衬线体在千字节上更重。有些粗体样式比其他粗体样式更粗，这同样会影响千字节大小。您想使用多少种字重也会影响文件大小。我倾向于避免使用粗斜体样式，这样可以通过排除那些样式来节省几千字节。

OpenType 功能
我将 OpenType 功能视为一个额外优势。如果我正在考虑两种字体，其中一种支持 OpenType 功能而另一种不支持，我会选择支持的那一种。并非所有字体都支持这些功能，而且即便支持，也未必支持全部功能。

什么是 OpenType？
OpenType 是由 Adobe 和 Microsoft 于 1997 年推出的一种字型格式，作为 PostScript 和 TrueType 格式（现在被称为“传统”格式）的继任者。这种新格式的主要优势是：¹²

100%的跨平台兼容性（可在Mac OS、Windows、Linux系统上使用，并获得软件业的全面支持）

所有字型样式都集合在一个.otf文件中

字符集更大（每个.otf文件支持65,536个字符，而旧字体文件仅支持210个字符）

更大的字符集意味着能支持多种语言，并且

支持高级排版特性。

排版的高级功能有哪些？
我们将在本书的第二部分详细探讨其中大部分功能，但先让我们快速概览一下这些功能是什么。

连字（Ligatures）
连字共有三种类型：标准、自由和上下文连字。最简单的描述方法是，它们是单个字形中由多个字符组成的组合。它们起到美学增强作用，同时也有助于提升排版的可读性和节奏感。我们将在第10章更深入地探讨连字。

小型大写字母（Small caps）
顾名思义，小型大写字母就是“缩小的大写字母”。它们应当用于缩写词，特别是正文中使用的缩写。技艺娴熟的排版师会利用它们来提升排版风格的美学效果。我们将在第11章更详细地探讨小型大写字母。

样式替代与样式集
有些字体提供所谓的样式替代或样式集。两者均为替代性的字符设计。最常见的是单层结构的“a”和“g”字符，它们与双层结构的对应字符看起来截然不同。下图中的“a”字母是展示单层与双层字母风格差异的绝佳范例。这一简单特性为设计师提供了更多可选方案。

左侧为双层结构的“a”与“g”，右侧为单层结构。

数字、分数与序数
正如我们将在本书第二部分了解到的，数字共有四种不同的样式：等高数字、旧样式数字、比例数字和等宽数字。每种样式都有不同的用途。OpenType 特性还包含分数和序数。分数将“1/2”替换为排版正确的字形，序数则将“1st, 2nd…”替换为相应的正确字形。我们将在第 11 章中更详细地了解数字样式。

语言支持
网站将使用什么语言？仅英文？还是多种语言？对于大多数西方语言来说，拉丁语范围应该足够了，但这里有个技巧。如果您的网站只使用单一语言，您可以通过排除所有其他语言来节省几千字节。我的网站目前仅使用英文，所以我总是只选择那套字符集。有时这可以节省多达20千字节。如果您的网站使用的语言需要特殊字符，请确保您想使用的字体包含这些字符。

斯洛文尼亚网站 Poligon.si 使用的字型不包含斯洛文尼亚语中常用的字符“č”、“š”和“ž”。浏览器转而采用网页安全字体的字符作为替代，导致排版效果不佳且缺乏吸引力。

网页字体

网页字体有两种加载方式，以便在网站中使用。我们来了解一下。

@font-face
几年前，这段小小的CSS代码彻底革新了网页设计。在此之前，网页设计师只能依赖网页安全字体。而@font-face则完全改变了这一局面。字体终于可以上传至服务器，并通过这段简单的CSS代码在网站上使用：

@font-face {
  font-family: 'Font-name';
  font-style: normal;
  font-weight: 400;
    src:
      url('font-name-regular.woff2') format('woff2'),
      url('font-name-regular.woff') format('woff'),
      url('font-name-regular.ttf') format('truetype');
}

意大利斜体和粗体样式需要单独加载，因此上述代码需要为每种样式重复使用（当然，字型样式和字重会有所不同）。

我在此以过去时态描述这种方法，是因为如今它已很少被使用。现在更常见的是使用来自网络字体提供商的正规网络字体。

网页字体提供商市面上有很多网页字体提供商。Google Fonts 大概是应用最广泛的一个。提供免费字体或许是它受欢迎的一个原因，但这也有其代价。那里的很多字体算不得“优秀”类别。这并不意味着你找不到好用的字体。浏览其字体目录的功能相当有限。最有用的部分可能就是排除或包含某些分类了。

Google Fonts 是一个受欢迎的字型目录，但筛选能力有限。

从 Google Fonts 加载字体非常简单；只需一行代码即可完成。我最欣赏的是它只需要如下 CSS：

@import url('https://fonts.googleapis.com/css?family=Roboto');

Fonts.com 提供了略微复杂的筛选器，可以按照字重、宽度、x字高和数字样式筛选字体。而TypeKit在我看来，拥有最佳的字体筛选选项，尤其适合刚开始探索这一广阔领域的用户。它支持按宽度、字重、对比度、x高度、数字样式，以及针对段落还是标题使用的推荐功能进行筛选。所有的筛选器都附带按支持语言筛选的功能，这在选择过程中应作为一个决定性因素。

Fonts.com 提供了一个庞大的字体库，并且拥有比 Google 更便捷的筛选方式。

Adobe 的 TypeKit 提供了大量的字体和非常出色的筛选系统。

这些网页字体提供商通常依赖 JavaScript 来加载字体。这种方案虽不及 Google Fonts 那样简洁，却具备独特的优势：能更好地控制在网页字体加载过程中每个阶段的表现。我们将在下一节详细探讨这一点。

<script src="//use.typekit.net/XXXXXXX.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

加载网页字体的问题

FOUT
在加载自定义网页字型时，还存在另一个问题，即所谓的“备选字型闪烁”，亦称FOUT。它是指网站内容已经加载完毕，但自定义网页字型尚未加载完成的那一两秒时间。在宽带连接的台式机上可能只是一两秒，但在使用3G连接的移动设备上，则可能需要几秒甚至更久。请务必记住这一点。

要查看示例，请访问 betterwebtype.com/book/fout

FOUT 有什么问题吗？我猜大部分人只是讨厌看到网站上字体切换时的闪烁效果，看起来确实有点奇怪。但我觉得如今人们已经习惯了。这是网页加载时常见的情况之一。很可能正是设计师们对极致的追求，才让大家开始在意这个问题。

FOIT
为了避免FOUT，有些人采取了在字体加载完成前隐藏文本的做法——即FOIT¹³（不可见文本闪烁）。我以前也这样做过（事实上，第一个Better Web Type网站就是这么做的），但这存在一个严重的问题。假设你想要使用的字体由于某种原因没有加载。你的网站正在等待它加载，并因此隐藏了文本。如果字体始终没有加载，文本就会一直不可见。这就搞砸了。好吧，有些人也为这个问题想出了解决方案。他们为等待字体设置了一个计时器，在X秒后显示网页安全字体。但这只是一个糟糕的解决方案。投入大量精力去处理大多数互联网用户根本不会注意的东西。投入大量精力去对抗浏览器的默认行为。我的建议是，随它去吧。坚持使用FOUT，但请确保当你使用衬线网页字体时，使用一款衬线字体作为后备字体，否则就使用无衬线后备字体。

FOFT
但也许你正在开发一个需要在各种设备（甚至速度较慢的设备）上运行的大型网站，而你确实想要（或必须）加载网络字体。那么还有第三种加载字体的方法，称为伪文本闪烁（FOFT）。它是由 Zach Leatherman 在其博客上提出的，¹⁴ 是一种分阶段加载网络字体的方式。其理念很简单：首先，我们加载用于正文的字体（因为这是页面上占主导地位的部分），这通常是一个常规字重的字体。然后，我们使用已经加载的常规字重字体来生成所谓的仿粗体和仿斜体（将在下一节解释）。一旦粗体和斜体字体加载完成，我们就替换掉那些仿制品。我认为这种方法绝对比 FOIT 更好，但我仍然不太信服。说我是一个纯粹主义者吧，但我不喜欢干预浏览器的工作方式。一旦浏览器的默认行为发生变化，依赖于它的实现也需要随之改变。目前，我还是坚持使用 FOUT。

伪字体样式

我之前提到了伪字体样式，就在我们刚才探讨FOFT字体加载方法的时候。Zach Leatherman 在那里将伪字体样式用作尚未加载完成的字体样式的临时替代方案。让我们更仔细地看看这些伪字体样式究竟是什么。

假设我们找到了一个想用于网站上的字型。这是一个高流量的网站（每天有数百万次访问，来自各种设备），因此开发人员对于仅仅因为设计师想使用“花哨的字体”而影响其加载时间持谨慎态度。正因为如此，我们决定只使用常规字重，而另外两种样式全靠CSS来模拟（不加载相应的粗体和斜体字型）。让我们来看看会发生什么。

左侧图像展示了上面的示例，并将其与正确的做法（加载了粗体和斜体字型）进行了对比。开发者或许会对几乎不受影响的性能感到满意，但设计师们却只能蜷缩在角落哭泣。这完全合理。我们绝不允许浏览器随意模拟粗体和斜体样式。要么按照设计原意使用字体，要么干脆别用。可以采用网页安全字体或系统字体。但不能让不懂排版的人那样糟蹋字体。与此相关的是，不妨借此机会向他们普及一些排版知识。必要的话，把这本书送给他们。

请查看betterwebtype.com/book/c3e3中的伪字体样式示例，以及betterwebtype.com/book/c3e4中的正式字体样式示例。

正文字体对页标题字体

要往前追溯，字型还是用金属铸造出来的时代，铅字铸模师必须先刻出一个字型里的所有字符，每一个尺寸都得重复这套工序。再加上字体分为两种尺寸组别：文本尺寸和展示尺寸。文本尺寸经过优化，在小尺寸下最易辨认，这也是名字的起源。展示用字体则相反，为大尺寸优化。这意味一种字型的比例以及结构会随尺寸组别变化，而非单纯放大。

在文本尺寸下，衬线字体中较细的部分比在标题尺寸下显得更粗一些。文本尺寸下的x字高通常更大，衬线更明显，并且字符内部的间距也更开阔。所有这些都有助于使字体在小尺寸时更易读。¹⁵

看出两者的区别了吗？看看字母“e”和衬线。Bulmer Display 总体上看起来略轻一些。这是因为它专为大尺寸设计，在这种尺寸下，更多细节会更加突出。

顾名思义，要根据具体情况使用不同的字体。不要将显示字体用于正文；仅将其用于大标题/大尺寸标题。在网站上将正文字体用于大尺寸文字相对容易被接受，但如果你有机会使用显示字体并且负担得起（记住文件大小的kb吗？），请务必使用它。这能为你的作品增添另一处精雕细琢的排版细节。请查看这个示例：betterwebtype.com/book/c3e5。

印刷字体与网页字体

我们还没有完成对字体的分类工作。还有另一个区别你应该了解：印刷字体与网页字体是不同的。在早期，当@font-face终于得到广泛支持和流行时，我常常直接找到一个印刷字体，然后用像Font Squirrel这样的工具将其转换为网页字体，上传到服务器并通过CSS加载。我强烈建议你现在不要再这样做了。印刷字体经过优化，正如你可能猜到的那样，是为了印刷而优化的，而网页字体是适应版本的，针对网页使用进行了优化。¹⁶ 这些差异可能微乎其微，但在排版中，微小的细节会产生巨大的影响。请始终尝试通过网页字体提供商使用字体。

注意到网页字体看起来更粗一些吗？网页字体专门针对在分辨率低于打印机的屏幕上获得更佳显示效果而进行了优化。

字体平滑

许多网页设计师发现，若对文字应用 font-smoothing: antialiased 属性，文字的视觉效果会显得更轻盈柔和。他们对此爱不释手。如此便能轻松打造出那些在极简风格作品集里赏心悦目的效果。但关键是——这一属性本就不适用于浅底深字的场景。Dmitry Fadeyev 对此作出了精辟阐释：¹⁷

次像素渲染（默认渲染方式）能在浅色背景上显示深色文字时提供最佳的字体清晰度。然而，在 Mac OS X 系统中，当这种关系反过来，即在深色背景上设置浅色文字时，会产生一个相当难看的视觉效果——文字变得过于粗重，超出了其轮廓线。针对深色背景上的浅色文字，将次像素渲染切换到字体平滑处理（反锯齿）可以使文字看起来更纤细，从而抵消这种加粗效果。

有鉴于此，针对暗背景上的浅色文字，将字体平滑（font-smoothing）设置为抗锯齿（anti-aliased）是最明智的选择（参见下图）。切勿为了单纯使文字看起来更轻更柔和而滥用此属性。

注意到两段“Hello there”的顶部以及两个段落的顶部看起来更浅吗？（这取决于屏幕的质量，以判断你是否能看到这些细节）。左上角的段落过亮，右下角的又过暗。字体平滑技术使右上角的段落和标题恰到好处。请查看示例：betterwebtype.com/book/c3e6。

破除关于衬线体与无衬线体的误解

误解 1：无衬线体更适合网页
回到 90 年代，当互联网开始变得真正流行和普及时，我们只有糟糕的 14 英寸 CRT 屏幕。它们的密度是每英寸 60 像素。在这些屏幕上的字体渲染效果极差，这就是为什么更简单的无衬线字体渲染效果更好的原因。从那时起，屏幕已经有了很大的改进。我现在是在一块 220 PPI 的屏幕上打这些字。这意味着现在每英寸能容纳的像素几乎是原来的 4 倍。是的，并不是每个人都有华丽的 MacBook Retina 屏幕，但即使是普通的 LCD 屏幕也已经有了巨大的改进。

无衬线体在那段时间的显示器上效果可能更好了些，但这种说法如今已不再正确。最新研究表明，两者之间并无太大差异，在网站中使用衬线体完全没问题。

误区二：衬线字体更易于阅读
在继续为我们的示例网站选择字体之前，还有一件事。有一个关于衬线字体与无衬线字体在一般情况下哪个更易于阅读的误区。大多数人认为衬线字体轻松获胜。这是一个至今仍在广泛传播的误区。而且，这似乎是一个人们愿意相信其为真的误区，因此一有机会，他们就会欣然分享他们的“知识”。

这个误解的起源是Cyril Burt在1955年进行的虚假研究。我说“虚假”是因为它在他去世后已被推翻，就像他其他大部分研究一样。如今，任何引用Burt研究的人，基本上都是在引用已被推翻的无稽之谈。¹⁹根本没有任何证据表明衬线字体比无衬线字体更容易阅读。这只是人们相信并当作事实接受的一个迷思。只需快速查证一下背景，就能证明这是不真实的。

让我们来选择一种字体！

好吧，本章包含了大量信息，很多理论知识是我们必须了解的。现在，让我们运用所学的一切，最终为我们的假想示例网站选择一款字体吧。

示例网站概要
我们需要为一个杂志/博客网站进行设计，预计每月访问量约为10万。访客寻求易于消化并能简单快速阅读的最新资讯。网站主题涵盖科技、网页设计/开发和应用程序设计/开发。常见的内容类型包括文章、评论、教程、访谈以及较短的博客文章。网站作者相信高品质内容，不依赖过度广告。但是，主页面上会展示一条广告。其他所有元素都应提升访客的阅读体验。作者认为，这应通过排版而非图形元素来实现。我们将从头搭建这个网站。网站名称为 Tech Geek。

好的，这样的简报在网站设计项目中很常见。虽然简短，但已经能让人对网站希望成为什么样有个大致了解。这同时为设计提供了良好的起点。以下是我从简报中提取的关键信息：

网站需要具有现代感和前瞻性；其内容必须易于阅读，以迎合忙碌但充满好奇心的科技爱好者

网站必须以内容为核心，只投放极少但优质且定位精准的广告

作为拥有此等流量与受众的网站，它必须能够跨设备正常运行。

让我们去为项目寻找合适的字体

获取内容样本并阅读
如前所述，内容应指导你的字体选择。但在我们的案例中，网站尚不存在。我们该怎么做？使用 Lorem Ipsum 吗？不。在其他地方找到类似的内容并使用它。在这个具体的例子中，我将使用 Tech Crunch 上的内容。我觉得它的内容和呈现方式有相似的感觉。让我们去找一篇能作为好例子的文章来阅读（我可能会实际读几篇，以感受一下整体风格）。把文章收藏起来。我们稍后会需要它。

写下您的需求
这将帮助您在寻找字体这一繁琐的过程中始终保持专注。我们已有摘要，也准备好了内容范例。我们应当开始明确需要寻找哪种字体。以下是我为我们的范例写下的需求：

最好是衬线体：人们更习惯阅读衬线字体的大量文本内容

需要具有现代感，这意味着应有垂直轴线和较大的x字高

必须易于阅读，因此需要较大的 x 高度、较低到常规的对比度，且在正文尺寸下表现良好

必须包含粗体和斜体样式

拥有 OpenType 特性（如小型大写字母和旧式数字）将是一个受欢迎的加分项

仅需英文字符子集

需要在常见的屏幕（包括移动设备和桌面设备）上渲染清晰。

想想整体规划
关于这个示例项目，我还有一些想法没告诉你们。我打算用一款无衬线字体来做标题。我们会在本章最终选定的字体基础上，寻找并搭配这款字体。具体内容我们稍后在第5章探讨。这部分我们还没讲到，但提前告知是因为我心里得让你们知道，拥有整体规划的概念很重要。我们正以“内容为先”的方式启动项目——这也正是为什么我们选择正文字体作为第一步的原因。

寻找潜在候选字体
现在我们已经清楚地知道自己要找什么了。那就开始找吧。在这个阶段，我通常会去 TypeKit 上寻找字体。在那里，我可以筛选字体，让它只显示具有较大 x 字高、标准对比度且推荐用于正文段落的衬线字体。我这样操作后，最终得到了一个包含 12 款字体的列表。从这些中，我记下了我喜欢的几款。在这个案例中，它们将是：Expo Serif、Capitolium 2、Rooney、FF Meta Serif、Cordale 和 FF More。

在Google字体上可以进行类似的搜索。具体操作是：先排除除衬线体外的所有分类，接着调整粗细滑块，将其从中间位置调开一个等级，然后调整倾斜滑块，将其调到最小。

审阅入围字体
这是整个过程中最耗时的一步，但我们正确的完成它至关重要。关键是要在上下文中审阅字体。这意味着要使用实际的内容并在网站上进行。在这里，"网站"指的是浏览器中实际的HTML和CSS，而非图形设计工具中的近似模拟。

不要在Photoshop、Sketch或其他图形设计工具中查看字体效果。您的内容不会在那里呈现（Photoshop以其奇怪的字体渲染方式而臭名昭著）。它将在网页浏览器的网站环境中显示。实际上是多种浏览器环境。请在不同尺寸、颜色和不同浏览器中测试您主选字体的表现。每种浏览器渲染字体的方式都不同（众所周知，Firefox渲染所有字体都比其他浏览器略显粗重，Mac系统与Windows PC相比也是如此）。还需在不同操作系统上进行测试。不要仅仅在Mac笔记本电脑上的Retina显示屏设计出看似精美的网站视觉稿，并以此作为决策依据。务必测试其在Windows系统和其他屏幕上的实际显示效果。

这对于像我们正在创建的那种高流量、专业网站尤为重要。如果是个人网站，您可以只针对MacBook进行设计。但若非如此，请准备好示例内容，将几段文字放入HTML中，并在多个设备上查看效果（如今各地都有开放设备实验室）。

“如果我不会编码怎么办？”我为阅读本书但不会编码的设计师们准备了一个简单的工具。你们非常需要在浏览器中预览所选的字体，因此请遵循以下简单的说明。

打开我建立在CodePen上的工具(betterwebtype.com/book/font-previewer），

从您的内容中复制一个段落，并将其粘贴到段落HTML标签内：<p>Your content goes here</p>，

对至少三个段落重复第二步，

导入您的字体：

如果您使用TypeKit或类似服务，请将字体导入标签粘贴到HTML中（HTML中的任何位置均可），

如果您使用Google字体，请粘贴CSS导入链接。

通过更改CSS中的font-family名称来使用该字体。请确保使用字体提供商指定的确切名称（例如"font-family: garamond-pro, …"，而非"font-family: Garamond, …"）。

搞定！现在你应该能在浏览器中看到你的字体了。

注：另一种工具是使用 Font Changer 插件²⁰ （仅限 Chrome）。找一个网页排版不错的网站（我推荐 Web Font Specimen²¹），然后将其字体更改为你想使用的字体。该插件目前只支持 Google Fonts 中的字体，因此选择会相当有限。但即便如此，也比在 Photoshop 里查看字体要好。

审视字体特性
这一步放在最后，是因为你不应该让对特定特性的支持来决定你的字体选择。然而，这些特性确实应该在决策过程中发挥作用。对OpenType特性的支持，例如小型大写字母和老式数字（本书第二部分会讲到），可能会对网站的排版质量产生重大影响。许多由网页字体提供商提供的字体，已经启用了基本的OpenType特性。如果你在两个备选字体之间犹豫不决，不妨看看它们各自支持哪些特性。也许这能帮助你做出决定。

如何找到支持的OpenType特性？
这取决于网页字体提供商，但这些信息通常不会直接显示。TypeKit只有在字体被添加到工具包（项目）后才会显示这些特性，您可以在此启用或禁用它们。

Fonts.com将这些信息列在字体详情页面中，隐藏在“OpenType”标签下。

选择字体
仅此过程就应该能帮助您排除一些字体候选。如果不能，请尝试将列表缩小到两到三个。然后看一看第二步中写下的内容。被考察的字体与这些内容匹配得怎么样？排除那些不匹配的。重复此过程，直到只剩一种字体。

让我们回到示例网站。通过查看TypeKit网站上的示例内容，我得以缩小潜在候选字体的范围。大多数字体仅仅因为不符合我的需求而被舍弃。现在剩下三个候选：FF More、FF Meta和Rooney。我想进一步观察，于是将它们添加到TypeKit的一个项目中。

正文候选字型的三个选择。

随后，我在CodePen工具中加载了那些字型，并切换使用了一段时间。我添加了三行字型家族属性，并通过注释掉它们来在这些字型之间进行切换。

body {
  font-family: "ff-meta-serif-web-pro";
/*   font-family: "ff-more-web-pro",serif; */
/*   font-family: "rooney-web",serif; */
  font-size: 100%;
  padding: 5% 10%;
}

注：我只推荐对最多三种字体这样做。如果您对每一个候选字体都这么做，将会花费您太多时间。

接下来我从列表中划掉的是Rooney。它带有微妙的圆润感——连衬线都相当柔和圆润，但这与我寻找的特质并不匹配。于是我又仔细审视了剩下的两款字体。我查看了它们支持的OpenType特性。FF More支持旧式数字但不支持小型大写字母。如果我打算使用其中任一特性，通常希望另一特性也能同时具备（具体原因将在小型大写字母章节详述）。由于示例内容中出现了大量数字，我希望找到一款支持旧式数字的字体。正如后续章节将探讨的，正文文本中理想情况下应当使用旧式数字。

这就是FF More字体。另一方面，我还有FF Meta可选。我更倾向于FF Meta的整体外观，认为它更契合网站的内容，而且它还提供旧式数字和小型大写字母。

最终，我决定采用FF Meta字体。FF Meta是一款大写字母高度较大、低对比度的衬线字体。它由Erik Spiekermann于2007年设计，这进一步加强了它作为我们现代、科技相关网站的合适选择。

接着，我选择了英文字符子集，并移除了粗斜体样式。这样做是为了节省不少字节——通过限制字符子集节省了25KB，再通过移除我不认为应该使用的字体样式（我们真的需要同时用粗体和斜体来强调吗？）又节省了25KB。现在字体文件的大小从114KB缩减到了只有64KB，减少了44%！你可以查看目前为止的示例网站：betterwebtype.com/book/c3。

有用的工具

这里有几个工具可以帮你选择字体。

Font Face Ninja²⁰
你已经学习了很多关于字体的知识，浏览网页时可能会开始注意到其中的一些特点。此时，我想推荐一个能帮助你更好地识别字体的工具，它叫做 Font Face Ninja，是一个浏览器插件。它可以在 Chrome、Safari 和 Firefox 上运行。安装它，将它放在你的工具栏中，每当发现某个网站使用了有趣的字体和出色的排版效果时，就启动它吧。

Web Font Specimen²¹
Web Font Specimen 是一个实用的资源，网页设计师和网页开发人员可以用它来查看字体在网页上的显示效果。在此步骤中，我推荐使用它来预览您正考虑使用的字体在网页上（而不是在 Photoshop 中！）将如何呈现。

核心要点

诸如Times New Roman和Georgia这类网络安全字体被低估且极少使用。它们零成本（既无需付费也无需占用千字节），且设计精良。它们应当被纳入考虑之列。

选择字体时应考虑的因素：目标（网站、项目……）、内容、是用于正文还是标题、需要多少字重和样式、字体文件大小（以千字节计）、OpenType特性。

推荐使用网络字体提供商和合适的网络字体，而非手动导入（可能原本用于印刷的）字体。

加载网络字体时，接受无样式文本闪现的情况（FOUT）。互联网用户已对此习以为常。

如果条件允许，在较大字号处使用专门为展示设计的字体（display font），但请记住这会给你的网站增加更多千字节数。

关于无衬线（sans-serif）字体在网页上更合适或更易读的说法，仅仅是一个流传的谬论而已。

完美段落的等边三角形

在我推出“更好的网页排版（Better Web Type）”课程之前很久，我曾在斯洛文尼亚CSS聚会上做过一次演讲。我当时并不知道，但那次演讲后来成为了这门课程的基础。在演讲中，我想说明为什么开发人员也需要学习排版，以及如何在这方面做得更好的几个基础知识。我记得我当时说：“……如果说我希望你们从这次演讲中记住一个关键要点，那就是以下内容——要获得完美的段落，需要三样东西：字体大小、行高和行宽。它们需要达到平衡。”我清楚地记得在那次演讲中多次强调了这一点。当时我还没有一个简单的概念来阐述它。

读者应能轻松舒适地阅读文本信息。这在很大程度上取决于字体大小、行长和行高。
——约瑟夫·穆勒-布罗克曼

在为“Better Web Type”（更好的网页排版课程）编写课程内容时，我一直在努力思考一个概念来准确说明这一点：字体大小、行高与行长度的设置必须达到完美的平衡。这三者不应单独考虑和设置，它们是相互关联的。我苦思良久，然后突然间灵光一闪——等边三角形这个概念浮现在我的脑海。等边三角形的三条边是相等的，三个角也一样：这恰是三个要素处于完美平衡的绝佳象征。事实证明，将这一概念应用于塑造完美段落的三个要素相当容易。在章节结束时，我们会再次讨论等边三角形这个概念。在此之前，我们将分别探讨每个属性的设置。但在那之前，我们先来了解一下这些指导原则的缘起如何。

我们如何阅读

我们并非逐字阅读。只有孩童在学习认字时才会那么做。之后我们便以词为单位阅读。熟悉的词语会储存在大脑中，因此阅读本质上是对词语形状的辨识过程。阅读时双眼持续左右移动，速度快到难以察觉。这种眼球运动被称为"扫视"，通常在每个词尾处会被"注视点"间隔。每读完一行文字，眼睛需要稍长时间休息，以便将焦点移至下一行。若文字行过长，眼睛会更快疲劳；若行间距过窄，视线将难以确定下一行的起始位置。

扫视——眼动——示意图。

排版可以通过遵循自15世纪首台印刷机问世以来形成的基本通用原则，提升文本的可读性。这些通用原则与我们阅读的方式相适应。

经过精心设计和排版的文本之所以更易阅读，正是因为考虑了这些因素。这便是字号（与颜色）、行宽和行高如此重要的原因。通过这些要素，我们得以从本质上塑造阅读体验。书籍的这项任务由排版师负责，杂志与其他印刷媒体则由平面设计师承担。而在网络上，这项工作则落在了网页设计师和网站开发者之间。少数情况下，这两者会是同一个人。

字号与色彩

大多数网站都会犯的一个错误，就是将主体文本设置得过小。早在21世纪初，将主体文本大小设置在大约11像素是常见的做法。但当时的屏幕更小，分辨率也较低，这意味着11像素的字体在当时看起来比现在更大。

为正文文本设定大小的一个常见法则是，使其与一本书在手臂长度距离下的文本大小相匹配。

将字体大小与一臂之遥的书本文字大小进行匹配。

当今屏幕推荐使用 16 像素作为移动端尺寸（通常距离更近），桌面端则从 18 到 22 像素不等。这也取决于所用字体。如我们在第 2 章中所见，有些字体设置为 16 像素时，可能看上去比其他字体更大一些。

在第二章：字体的结构中，我们已经了解了排版中字体颜色的含义。我们观察了同一文本的两个段落，分别使用Merriweather和Georgia字体。它们采用相同的基准字体大小与背景色，但Merriweather看起来更大、更粗重，也更显眼。这就是排版中的字体颜色。

行长

阅读过长的文本行会让我们的眼睛感到疲劳。眼睛需要不断停顿，而换行提供了这种停顿机会。每次切换到下一行时，我们的眼睛就得到了短暂的休息。时间虽短，却足以让眼睛持续工作更长时间。这就像一台引擎不必一直全速运转，因此能持续运行更久而不会过热。

一行文本的理想宽度是45到75个字符——包括空格。任何偏离该范围的情况都会导致阅读困难：行太短时需要频繁换行，而行太长时则缺乏让眼睛休息的间隔。

Google Material Design 规范中的推荐行宽²²

语言考量
我们常常忘记的一点是，外界的一切并不都是用英语写成的。几年前，我在卢森堡工作过。这是一个小国，日常使用三种语言：法语、卢森堡语和德语。我工作的那家公司源于德国，因此大部分内容都是德文的。在处理德文文本时，我注意到，当文本采用左对齐时，段落右侧的留白区域有很大的不同。众所周知，德语习惯将单词简单地联结在一起，形成新词——在这个过程中会产生许多长单词。因此我决定做一些研究，结果发现德语单词的平均长度为11.66个字符。而英语单词的平均长度是8个字符。²³ 这意味着每个单词相差三个半字符！假设一行能容纳10个单词，那么可能意味着相差35个字符。

网页浏览器尚不支持断字功能，因此所有长单词都会被迫换行。这就是右侧出现更多空白的原因：段落的右侧变得非常不平整。为了应对这个问题，我建议使用更长的文本行，以便容纳更多单词。在使用这类语言时，尽量保持在推荐的45至75个字符范围内，但更倾向于接近75个字符。

行高

行高，在印刷领域通常称为行距，是排版中节奏的主要支柱。我们将在本书后续章节详细讨论。现在，先来看看影响行高的因素有哪些。

在网页上，行高的工作方式有所不同。它会均匀分布在文本行的上方和下方。

我遇到的太多设计师或网页开发者都将行高视为一个孤立的文本要素。因此，他们倾向于凭感觉来设置它。结果，行高的设置往往没有经过太多考量。但行高实在太重要了，不能如此轻率地设定。行长会影响行高。行越长，行与行之间所需的间距就越大。字号也会影响行高。字号越大，行高也应该相应增大。字体颜色同样对其有影响。颜色更深、更重的字体需要更大的行间距。最后，字体本身也可能会影响它。有些字体，主要是衬线字体，会显得更重。这些字体就需要更大的行间距。

既然你已经了解行高非常重要，且不应把它孤立看待，现在让我们看看通用的最佳实践。对于段落而言，理想的行高通常是文本大小的1.3到1.6倍。因此，设置为16像素的正文文本，其行高应在21到26像素之间。这将取决于前面提到的因素：字体设计、字号、字重等等。

相同的字体，相同的字号，不同的颜色。颜色较深的文字应设置较大的行高。

相同字体，相同颜色，不同字号。较大的文字应搭配较大的行高。

相同的字体，相同的字号，相同的颜色，不同的行长。文本行越长，所需的行高也越大。

不同字体，相同字型大小，相同颜色。看起来较大的字体需要更多的行高。

在处理标题的行高时需要特别留意
标题通常短很多，因此行与行之间的间距需要更小，以避免文本行看起来过于疏散。标题的推荐行高通常是文本尺寸的 1 到 1.2 倍，所以一个设置为 24 像素的标题，其行高应在 24 至 29 像素之间。这乍看起来可能有点夸张，但请试试看。一旦您看到了其中的差别，就再也无法忽视它了。当您习惯之后，您就会开始注意到大多数网站在这一点上处理得有多么不当。

标题（尤其是较大的标题）相比正文需要较小的行高。

语言的考量
与行长类似，在设置行高时，语言也扮演着重要角色。英语仅使用基础拉丁字符集。而例如斯拉夫语，则相当频繁地使用“č”、“ć”、“š”、“ž”和“ź”等字符。这些字符使单词显得更粗重，并且在垂直方向上看起来更大。为了更好适应这些字符，行高应稍大一些。

例如德语等语言更广泛地使用大写字母。德语中所有名词的首字母均需大写。同理，行高应略微增加，以更好地容纳文本行中的所有大写字母。

等边三角形

在排版领域有一些通用的最佳实践，但它们从不是绝对的。正如我们在行高的例子中所见，通常会遇到可供选择的范围，而如何从中做出选择则需要时间来学习。眼睛需要时间来变得更加敏锐，以察觉这些差异。这就是为什么当你将标题的行高设置为比段落更小时，起初可能感觉不对，但随着时间的推移，你会看到这实际上是正确的。

因此，我们来到了我称之为“完美段落的等边三角形”这一概念。我们分别（尽可能多地）审视了字号（type size）、行长（measure）和行高（line height）。通过这样做，我们已经认识到这些属性是相互关联的。它们不能孤立地考虑，也永远不应该被孤立考虑。这就是为什么等边三角形是设计精良的文本段落的完美代表。为此，我们需要一个与行长相匹配的良好字号，而行长又与行高相匹配。其中任何一项出错，你的三角形就会变歪。

遗憾的是，我无法为完美段落提供确切的数值标准，因为排版参数存在数百万种组合可能。但可以提供一些示例来帮助你训练视觉判断力。请尝试关注细节，对比字号大小、行长差异以及行间距的微妙变化。

一个由等边三角形表示的完美平衡的段落。

在上述示例中，文本采用了 Merriweather 字体——这是一种较为罕见的大尺寸、高字重的字体。因此其字号被设为14像素。相应地，行高也更接近推荐范围1.3至1.7的上限值。上方的段落每行正好容纳55个字符（同样处于推荐范围内）。

本段文字的行长过长。三角形不等边。要修正这个问题，我们需要加大字号和行高，或者缩短行的长度。

在上方示例中，行宽超出了推荐的 55–75 个字符范围，平均达到 84 个字符，这意味着三角形的底边会向两侧扩展，其形状不再是等边三角形。

此段落的行高过大。文本行开始分散开来。如果我们增加行长的长度，这个示例可以得到改善。为了正确修正，我们还需要增加字号来平衡它。一个更简单的修正方法是减小行高。

上例中的行高明显过大。设置为倍数2，远超出推荐范围。文本行间距过宽。遗憾的是，这种情况在网页中太常见了。似乎流行将字体设为浅灰色，并在此基础上应用大行高。这是试图营造简洁、极简的风格，但做法是错误的。这样的文本，尤其是长篇内容，会难以阅读。

这段的字体大小实在太大了。它导致每行的长度被限制在30个字符，完全破坏了理想的三角形比例关系。文字行距过于紧密。要修正这个问题，我们需要减小字体大小，或是同时增加行高和行长。

好在，我在网页上并不常遇到这种情况。但我仍想将其包含进来，以便我们能涵盖这一概念可能产生的所有情况。上例中，相对于给定的行高和行长，字号显然过于庞大。像这样设置的文本会极难阅读。

完美段落的学习游戏

Better Web Type课程的许多学生都请我详细阐述这个概念。那么，要说明这一概念在实际情况中如何运作，最好的方式是什么呢？一个能帮助你训练眼力的学习游戏。现在为你呈现的是"等边三角形完美段落——一个网页排版学习游戏"。

该游戏共有10个关卡，每个关卡都会要求您设置以下三个属性之一：字型大小、行高或文本行的长度。最终，您将获得一个满分为100的分数，它应该能让您大致了解自己在设置完美段落方面的水平如何。

前往 betterwebtype.com/triangle 试试看。等你回来，我们会将这个概念应用到我们的示例网站上。

让我们设置一个完美的段落

我们已经有了一段段用上一章提及的FF Meta字型排好的文字，它们与网站将采用的内容相近。现在，让我们来微调这些段落，直到它们完美无缺。

到目前为止，我采用的字号设置是移动端16像素、桌面端18像素。行高设定为1.6倍，行长限制在35em（行长限制实际上主要适用于桌面端）。这是个不错的起点，但我们或许还能进一步优化。

字体大小
我们先来试试调整字体大小。对于移动设备，16像素是不错的选择；针对桌面端，我们需要更仔细地研究一下想要达到的效果。18像素看起来是一个不错的尺寸，但我们知道这个网站将以内容为主。我们来尝试一下19像素。

好的，有意思。那就试试20，有何不可？

好了，20像素显然太大了。必须调整成18或19像素。我越比较这两者，18像素就显得越合适。很完美，我们现在确定了基字字号。未来的所有字体尺寸(标题等)都将基于这个尺寸来决定。

html {
  font-size: 112.5%; // = 18px
  color: #333;
}

通过设置html元素的字体大小属性，我们告知CSS这就是我们的基准字型尺寸。若不做更改，它仍然会是16像素（各网页浏览器约定的默认值）。

注：你是否注意到，在上面的例子中，我将文字颜色设为 #333？这是一种深灰色，但你可能在想，为什么我不直接用黑色（#000）。纯黑色在白色背景上的对比度非常高。实际上太过高了。如果你看一眼印在纸上的文字，你会发现它并非纯黑。因为不可能做到，所以从来都不是。建议使用深灰色替代黑色，以便更好地控制对比度。#333 通常是我的起点，但这也会因字体、其字重及其字体灰度而异。

行高
我预计网站上会使用大量缩写，并且已经注意到正文中大量使用数字。FF Meta 支持旧式数字，所以我需要记住这一点。行高设为 1.6 似乎太大，试试 1.55。还是有点大。1.5 怎么样？看起来很好，暂时就用它吧。这之后可能还会改变，因为我还没有测试行长。

行长
我从35em的行长开始，这相当于630像素（35 × 基础字号）。目前，一行大约能容纳75个字符。有些行稍长，最多能达到80个字符。这仍在推荐范围内，但已非常接近上限。让我们尝试更短的行。

试试 30 和33 em。两者都不错，30显得有点短，而33看起来刚好合适。它将最长行限制在略少于75个字符，恰好落在建议范围内。那就选33吧。好了，我们改变了行长，这意味着需要重新调整行高。

再谈行高
我们将行宽从 35 ems 改为 33 ems，减少了 2 ems，即 36 像素。如果需要调整行高，这种改变可能会很细微。我认为它仍然应该比我们开始时稍微小一些。1.45 只比 1.5 小一点点，但看起来更整洁。

由于移动设备屏幕上的每行宽度较短（即使使用了整个屏幕的宽度，文本列仍显得比较窄），我们需要调整行高以更好地与之匹配。不妨试试1.4这个值。

确实，这样看起来好多了。大多数时候字体无需太大变化，微调即可带来神奇效果。这项操作我执行过无数次，因此往往能正确预估到最佳效果。

三角形原理便是如此
如你所见，这个过程包含大量的试验。我们需要探索多种方案，以确保选择最佳选项。期间也有不少反复探讨。一旦我们调整了行长，就需要重新审视行高。这个过程并不简单，也不是线性的。我们最初从与最终方案非常接近的默认值开始，这略微加快了进度。所有的努力绝对是值得的，因为我们如今得到的段落形态完美，且其字体与网站内容相得益彰。目前完成的示例网站请见betterwebtype.com/book/c4。信不信由你，在这之后会更有趣得多。现在，让我们为标题寻找一种能与正文和谐搭配的字体。

核心要点

我们并非逐字母阅读，那只是学习阅读时的做法。之后，我们以词为单位阅读，眼睛在文本行间进行数千次移动。

正文字号不宜过小。移动端至少使用16像素，桌面端至少使用18像素，但请记住不同字体的实际尺寸存在差异。回想Merriweather字体比常规字体更大的例子。

推荐文本行长度为45至75个字符。需考虑所用语言的平均词长。

行高至关重要，不可随意设置。确定行高时应综合考虑字体颜色、字体类型、行长甚至语言特性。

请牢记等边三角形原理——行高、行长与字号这三个要素必须协同考量，才能塑造出完美的段落。

组合字体

你真的需要更多字体吗？

早期互联网时代，网页排版不佳常被归咎于可用字体种类贫乏。但我们已认识到，排版绝非仅仅关乎字体选择。其目标之一（或许是最主要的目标）是以清晰易读的方式呈现信息。在开始为设计物物色搭配正文字体的新字体前，我们必须自问：真的需要多种字体吗？切勿仅为增添而增添。排版中从未有过"字体用得越多越好"的规则（反过来说或许更接近真理）。为网站添加新字体并不能保证提升排版品质。我倾向于保持排版简洁而坚实——如同精密机械：可动部件越少，发生故障的几率就越低。

18 世纪约翰·巴斯克维尔本人使用单一字体——巴斯克维尔字体——完成的排版作品。²⁴

在同一页上混用不同风格的字母，或在同一本书中混用不同字体，都是一条安全的准则。
——Eric Gill

埃里克·吉尔（Eric Gill）是个备受争议的人物，但同时也是位伟大的排版师（他还做过许多其他事情），他持有类似的观点。使用多种字体所能实现的效果，很少能超越仅用一种字体所能达到的。不妨挑战一下自己，尝试只用一种字体来创建一个网站。哪怕只是为了实验和乐趣，我认为每个人都应该试试，因为从中能学到很多。

近期重新设计的 matejlatin.co.uk 网站。以排版为中心，但仅使用单一字体。

我最近重新设计了我的个人网站。其中一个我想突出的特点是我生活中非常重要的极简主义。为了最好地体现这一点，我决定使用单一字体。除此之外，我还希望网站以排版为核心（字面上 95% 的内容都是排版），这让挑战变得更加困难。我一直在寻找一种干净、利落、简洁的无衬线字体，以便进一步强调这一点。最终，我选择了来自 Canada Type 的 Gibson 字体。²⁵ 它有一种现代，但又略带友好的感觉。并且在设置为超大字号时，效果也非常出色。为那个网站实现正确的排版有点挑战，但我设法做到了——仅仅使用了不同的尺寸、字重，以及仅有的两种颜色——深灰和中灰色。

我将这个例子收录在书中，因为它完美展现了单一字体所能实现的丰富效果。不仅是像约翰·巴斯克维尔这样的排版大师，就连像我这样自学成才的设计师也能做到。你是否仍觉得自己的项目需要另一款字体？别着急，继续往下看。

探究字体组合

字体搭配或许是排版中最棘手的挑战之一。由于不存在必须遵循的确定规则，这使其变得更加复杂。尽管有指导原则和最佳实践，但你仍需投入大量时间去探索不同字体并尝试多种组合。我倾向于认为，在排版领域，只要处理得当，任何搭配皆有可能。正如排版中大多数情况那样，关键只在于你愿意为此投入多少精力。

如果你确实认为你的设计需要第二种字体，并且你愿意花些时间探索字体的世界（而不是用来设计和编写代码），那么以下四步过程将帮助你在这方面做得更好。这个方法很大程度上基于蒂姆·布朗（Tim Brown）名为《字体搭配》（Combining Typefaces）的小书，你可以免费获得这本书，并且绝对应该读一读。²⁶

为正文内容选定一款核心字体

挑选数款潜在的辅助字型以备搭配

评估其组合效果

对字体组合进行淘汰/筛选。

1 找到锚点
此时，你应该已经有了自己的正文主字体 —— 就是你想用于正文内容的那个字体。正如我们在前一章所描述的，你阅读内容示例，了解网站是关于什么的，你拥有内容的样本，尝试在不同的网页浏览器中预览，并确定这就是你想要使用的字体。我们在第3章末尾完成了这一步，还记得吗？现在，让我们找到一个能与之有效互补的辅助字体。

2 为可能的组合寻找次要字体
这可能是整个流程中最耗时的任务。甚至可能是排版工作中最耗时的部分。是时候探索字体的广阔天地了。当我开始做这件事时，我会完全沉浸在字体世界里，一连几个小时。起码是这样。但你该从哪里开始呢？起初，你可能只是把你喜欢的几款字体添加到候选列表中。也许是你以前用过的字体。也许是你因为太喜欢而一直保存着、准备用在某个项目上的那款。试试看，把它放到列表里。

正如我们开始寻找正文字体时所做的那样，前往你钟爱的网络字体库供应商，开始搜索。筛选列表以匹配你的需求，并浏览结果。如果你发现喜欢的、且认为与你的宏大设计相契合的字体，就将其加入到候选清单中。尽量别在这上面花费过多时间。现阶段不要对每个字体进行过于深入的探究。

3 评估组合效果
同样，我建议在浏览器中执行此操作，最好是在恰当的上下文中。你有一个网站的早期设计稿吗？用它来测试。你对布局样式略有想法吗？那就快速搭建一个原型。不懂编码？那就和你的开发人员结对协作。对设计和项目不太了解？那就和你的设计师结对协作。请记住，在网页排版中，这两个角色都至关重要。如果你的技能是单方面的，那么团队协作就是产出更佳网页排版的关键。

对比是排版设计中最核心的原则之一。任何字体、字号或字重的改变都应该被着重强调。
——Rob Carter²⁷

对比和统一是设计、建筑和艺术中最基本的两大原则。在排版中，这两者也同样至关重要。在这个过程中，我们将学到，有些判断只适用于对比性的组合，有些则只适用于统一性的组合，还有一些二者皆可。让我们来看一个现实世界的示例。

看看下面这张办公室的照片。你会如何描述它？感觉很现代，是不是？但还有别的东西。它也感觉很温暖。对于配有现代甚至未来感家具的办公室来说，这不太寻常。但这个空间做到了。这面砖墙为这个本来看起来会刻板生硬的空间带来了温暖和舒适的感觉。这是室内设计中一个关于对比的绝佳范例。正是通过这种对比，设计师在现代感与温暖感之间达到了完美的和谐。

老旧的砖墙与现代家具同处一室。通过对比实现和谐。

我们如何将这一点应用到排版中呢？让我们以 Baskerville 字体作为正文的主要字型。Baskerville 由 John Baskerville 于 1754 年设计。在当时，它是一种现代字体，因为它不断突破着排版设计的可能性边界。然而在今天，它被视为一种经典。它能唤起信任和温暖的感觉。根据 Errol Morris 进行的一项实验，它是目前最受信任的字体。现在，让我们用纯大写的 Futura 字体作为标题，与它形成互补。Futura 由 Paul Renner 于 1927 年设计。这是一种几何无衬线字体。它在最初设计时就是一种现代几何无衬线字体，时至今日，它依然给人以现代感。

和谐产生于对比——Futura与Baskerville的组合（内容改编自 idsgn.org）。

我们的设计看起来丰盈。华美。它有故事要讲述。但最重要的是——它奏效。它使用了来自不同时代的两种经典字体。每一种都位于现代/冷酷与古典/温暖这一尺度的两端。它们在一起，犹如冰与火化为一泓流动的清水。以对比求和谐。这便引出了第一种评估字体组合的方式：基于史观。

基于历史
根据时间周期评估字体，能够很好地结合对比或和谐的理念。您可以选择两种时代背景迥异或处于同一时代的字体。这两种方式都可行。

Baskerville 和 Futura 这两种字体的诞生时间相隔近200年。

我发现，这种方法最适合数字革命之前设计的字体。当前有太多的新字体问世，如果仅仅因为它们来自同一时期就进行配对，可能还不够充分。

基于x字高
还记得我在关于字体结构的章节中让你记住x字高吗？这就是它派上用场的地方。另一种评估字体组合的方法是仔细观察它们的 x 字高，看看是否匹配。它们至少应该非常接近。具有相似x字高的字体一起使用效果更好，因为它们具有相似的视觉重量。尤其是在涉及垂直韵律时（这是下一章要讲的内容）。

Futura 和 Baskerville 具有相似的x字高，这强化了它们作为良好字体组合的特性。

该组合方式适用于对比或一致性两种情形。选择x字高匹配的字体，或选择x字高差异显著的字体。切莫选择折中方案。

选择字体厂商时
在我迄今为止所做的所有排版工作中，我注意到了一些现象。在选择字体时，我往往会反复回到出品这些字体的少数特定字体厂牌。总部位于德国的 FontFont 便是其中之一——我是埃里克·斯皮克曼作品的粉丝。总部位于伦敦的 Dalton Maag 是另一家。我曾不止一次花时间，仅仅去探索这两家厂商出品的所有字体，结果几乎没有我不喜欢的。这似乎是因为它们的风格恰好符合我最常寻找的特质。而这并非巧合。

你要知道，字体设计师在着手设计新字体时，很少从零开始。更常见的做法是：他们会在既有字体的基础上进行设计。他们沿用相同的结构，却依然能创造出具有原创性的设计。正因共享了这种底层结构，这些字体通常都能良好搭配。因此，组合来自同一字型厂商的字体，是个稳妥的选择。

您只应根据统一性原则尝试匹配来自特定铸字厂的字体。有时，通过了解字体的历史/起源，您可以发现它是否基于现有字体设计。

基于作者
与根据设计字体组合的铸字厂来组合字体的方式类似，也可以根据字体的作者来选择字体组合。如前所述，铸字厂通常使用一个基底层结构来制作不同的字体。对于字体作者来说，这种做法可能更为常见。例如，组合阿德里安·弗鲁提格所设计的字体，几乎是一种万无一失的选择。

我仍然建议将两种字体并置比较，就像上文分析 Apollo 和 Univers 那样。尝试判断组合是否协调——类似于我们通过x字高对比字体的方法，但要更注重整体比例。此刻你需要真正研究这两种字体。我告诉过你这很耗时，记得吗？

同样地，这种组合仅应作为统一体使用，而非对比体。

有些字体天生就是一对
所谓超级字体，即有衬线体和无衬线体两种样式都包含在内的字体系列。Merriweather 和 Merriweather Sans 就是绝佳的例子，Roboto 与 Roboto Slab 也是如此。使用一个超级字体家族内的样式，绝对是万无一失的选择。这可以是培养你字体搭配能力的一个绝佳起点。

有些字体同时提供衬线和无衬线样式。这样搭配的话，通常不会有问题。

关于组合相似样式
将一种衬线体与另一种衬线体组合是可以的，或者将一种无衬线体与另一种无衬线体组合也行。这样做的问题在于，很难做得好，尤其是刚开始的时候。要做到合适，你必须找到两种非常相似的样式（无论是衬线体还是无衬线体），或者两种完全不同的样式。后者比较容易，但我建议在开始尝试字体组合时，先组合不同的样式。

4 剔除/选择一个组合
根据上一步，该字体是否符合任何评估因子？如果不符合，你可能应该剔除这个潜在候选字体。重复步骤3和4，直到你只剩下一个字体。它是否符合你的整体设计概念？你对它感到满意吗？感觉对吗？不确定？明天再回来看看。我不是开玩笑的。此时，你可能已经花了几个小时查看字体和字体组合了。是时候休息一下了。这样做能让你对自己的工作有全新的视角。我个人的准则是：明天回来再看，如果感觉对了，就用它；如果感觉不对，就换掉。

所有的潜在方案都被淘汰了？那你必须从头开始。好在还有一个简单的选择：采用单一字体。当然，这真的取决于你。

让我们探寻字体组合

主导字体
好了，我们在这一章学到了很多。现在让我们把新学的知识用起来。遵循上述过程，我们必须从主导字体开始。这个我们已经有了，因为我们在第三章选择 FF Meta 的时候就已经决定了要使用的字体。让我们直接进入步骤 2。

寻找可能组合的候选字体 我们需要一款用于标题的字体。让我们回顾一下之前为正文选择字体时，根据需求简报记录下的关键点：

网站需要具有现代感和前瞻性；其内容必须易于阅读，以迎合忙碌但充满好奇心的科技爱好者

网站必须以内容为核心，只投放极少但优质且定位精准的广告

作为拥有此等流量与受众的网站，它必须能够跨设备正常运行。

让我们像选择正文字体那样，写下帮助选择标题字体的几点关键要素：

必须是无衬线字体（我们需要一个能与正文字体形成高对比度的字型）

需要具有现代感，这意味着x字高较大

需要在大字体尺寸下表现良好

字重和样式越多越好

不需要OpenType特性（除了连字，我很少在标题中使用其他OpenType特性）

仅需要英文字符子集

需要在常见的屏幕（包括移动设备和桌面设备）上显示效果良好

明确了这些，我们可以开始搜索了。打开TypeKit，先选几个候选字体。设置筛选条件：仅显示无衬线字体，推荐用于标题，字重较大且x字高较高。较大的x字高既符合我们的目标特色，也能与正文选用的FF Meta字体的x字高相呼应。

我浏览了筛选出的40个结果，最终确定了以下候选字体：Korolev、FF Enzo、Quatro、Camingodos和JAF Facit。只有五种；看来我对自己想要什么已经有了明确的偏好。

评估组合
由于只有五种，我们可以直接深入研究并开始对它们进行实验。让我们把它们添加到 TypeKit 的项目中，并在示例网站上加载它们。然后，我们从示例内容文章中复制一些标题并将其添加进去。

h1, h2 {
  font-family: "korolev";
/*   font-family: "jaf-facitweb"; */
/*   font-family: "ff-enzo-web"; */
/*   font-family: "quatro"; */
/*   font-family: "camingodos-web"; */
}

这样操作可以方便在不同候选方案之间切换。首先，让我们以默认尺寸和颜色来评估这些候选字体。也许我们能在不深入分析的情况下就淘汰掉其中一些。确实，JAF Facit 字体给人的感觉不太对劲，所以我们可以将它淘汰。Quatro字体中某些字符（如“w”和“y”）的设计相当独特，它们会脱颖而出。但效果不佳。我们也将它从列表中划掉。有时候事情真的就这么简单。仔细观察FF Enzo字体，会发现它显然是人文主义风格（对比明显且略微倾斜），而这并非我们寻找的特性。这样我们列表中又少了一个选项。

消除/选择组合
在评估阶段，我们得以排除三个组合，因此还剩下两个潜在的候选者：Korolev和Camingodos。让我们更仔细地审视这两者，并进行进一步的实验。

Camingodos同样带有一丝人文主义气息，但不像FF Enzo那般明显。字符略窄，x字高较大。字型带有某种我说不清的方形感。感觉它试图营造科技感，但并未彻底贯彻（也许是因为那点人文色彩）。现在来仔细看看Korolev。

Korolev 字型给人独特的感觉。字符非常窄，x字高较大，似乎带有些微紧缩感。同时还带有一种方形风格，但不如 Camingodos 那么明显。让我们用它们最可能使用的颜色——红色，来测试这两种字体。

我们也试试略微减轻字重，用中等粗体代替粗体吧。

这就很有意思了。Korolev 字型在调轻字重后简直活了过来。现在它和主体字型形成了鲜明的对比。而 Camingodos 则显得有些别扭。它缺乏辨识度，在主体字型面前显得不够突出。其主要问题在于处于一个微妙的区间——它与主体字型过于相似，未能形成真正的对比，却又在某些层面存在对比。排版中的对比要么清晰明确，要么干脆不存在。这使得 Korolev 成为明显胜出者。我们最终的效果如下：

查看详情请访问betterwebtype.com/book/c5。

核心要点

你真的需要另一种字体吗？一种字型是否足够？一些最佳的排版作品仅使用一种字体完成。

寻找字体组合的过程分为四步：找到一种主体字体（通常用于正文），寻找组合的候选字体，评估组合效果，筛选并选择第二种字体。

评估字体组合可能有些棘手，但请记住，组合应基于对比或统一性。

字体可以根据历史背景、x字高、字体厂牌、设计者来组合，或者你可以直接使用一种超级字体——即同时提供衬线体和无衬线体风格的字体。

当你初次尝试组合字体时，先尝试组合不同的风格：一种无衬线体与一种衬线体搭配。组合同一风格的字体难度更大。

排版的韵律

排版中的节奏恰如乐曲中的韵律。文字可以像一支调音精准的交响乐团演奏的杰作那样流畅行进，也可能沦为一支磕磕绊绊、结构松散的单人乐队习作。正如在音乐中，秩序总比混乱更悦耳；在排版中，具有稳定节奏的精妙文字编排也总是更易于阅读，更令人赏心悦目。耳朵与眼睛不过是感知的工具，真正处理信息的是我们的大脑——而大脑正是一台模式识别的机器。这就是为什么节奏得当、比例协调的文字总能胜过杂乱无章的排版。然而与音乐不同的是，排版中存在两种节奏：横向节奏与纵向节奏。

排版中的纵向与横向节奏。

音乐的这个类比在排版中非常贴切，因为您的文本要么易于阅读，让读者进入流畅状态——不再专注于阅读本身，只是轻松吸收内容——要么读者会费力地处理信息，最终选择放弃。横向节奏主要影响文字的辨认性，而纵向节奏则影响文本的可读性，并建立起视觉层次感。

横向节奏

字符间距（Letter spacing）
字符间距在印刷设计中更常被称为“字距调整（tracking）”。它对文字的易读性有着巨大的影响，因此应谨慎使用。不建议对小写字母文本进行字距调整。弗雷德里克·古迪曾说：“会给小写字母做字距调整的人，也会去偷羊。”²⁹ 字符间距影响易读性，是因为它使得我们的大脑更难解读词语。即使是阅读速度很快的人，阅读速度也会变慢。除非你有非常充分的理由，否则不要在正文文本中使用字符间距。

字符间距在两种情况下可以产生积极的影响。标题通常比正文字体更大、更粗重。由于它们的尺寸较大，字符之间的间距在视觉上看起来也比在较小尺寸时更大。在这种情况下，最好稍微减少字符间距，比例约为3–5%，不宜超过。这样可以使你的标题看起来更紧凑一点，与正文在视觉上更接近一些。

将负字符间距应用于标题，可以使其看起来更紧凑，也更接近正文的字型。

另一种字符间距可以派上用场的场合是仅应用于小型大写或全大写文本时。将较长文本设为全大写是很不理想的做法，因此这可能最好再次结合标题使用。当我们有一行全大写或小型大写文本时（本书第二部分会详述小型大写），适当增加字符间距是个好主意。这里讨论的仍然是细微调整，但足以产生视觉差异。我的建议是增加5%至10%。

在大写字母或小型大写字母上应用字符间距能提升易读性。

这样一来，大写字母和单词就更易于阅读和理解，因为字母更容易辨识。此外，字符之间稍微增加一点空间，也会为我们的设计增添一丝精致感。让我们仔细观察那些精心设计、在大写品牌标识中表现卓越的产品或品牌，你会发现它们大多进行了字符间距调整。

即使是在正文中，也建议对缩写和长串数字进行字符间距调整。

字距微调（Kerning）
不同字母间的间距远非均等。无论相邻的是什么字母，每个字母周围都自带一套默认的间距设置。这就是为什么会出现下面这样的不一致情况：

糟糕的字距微调，也被称为“keming”。在这个特例中，它糟到单词“SAVE”看起来像是两个单词“SA”和“VE”。

字距微调（Kerning）——即改变特定字母对之间的间距——可以解决这些问题。最终获得的单词比例会更加协调，达到视觉上的完美。与字间距不同，字距微调会根据相邻字母的具体情况来改变字母周围的间距。

修正不良的字距。

大多数网页浏览器默认将字距微调设置为自动。这意味着对于较大的字体字号，字距微调会启用；对于较小的字体字号，则会被禁用。在小型字体上，糟糕的字距并不那么明显。如果你想的话，可以通过以下方式控制它：

font-kerning: auto; // default
font-kerning: normal; // enables kerning
font-kerning: none; // disables kerning

这就是目前浏览器默认支持功能的大致情况。对于需要将特定字母移动x像素以达到光学完美的特殊场合，这可能还不够理想。幸运的是，有Lettering.js这样的工具。通过它，我们可以控制每个字母的位置调整（以及样式）。

Sketch 中的字距微调
Sketch 默认启用了字距微调，但你可以根据需要进行修改或完全禁用。为此，你需要选中文本（实际的文本，而不是文本框），然后如果需要更紧的字距，请前往 类型 > 字距 > 紧缩；如果需要更宽松的字距，请前往 类型 > 字距 > 宽松。选择默认选项以恢复正常，或选择禁用选项以完全停用它。

避免在网页中使用两端对齐
音乐的暂停有其意义。它将声音与寂静分隔开来。将空无与和弦的丰富声响区分开。它看似打破了节奏（尽管音乐中的停顿始终与节奏相符）。我们在排版中也能获得相同的效果。字母、词汇与空白空间的组合定义了节奏。为了使阅读流畅，这种节奏需要保持一致。并且由于（正如我们之前所学）我们是逐字阅读的，过大的词间距会破坏这种节奏。它打断了阅读的流畅性。它将最容易阅读的文本变得难以理解，无论使用何种语言或词汇。我仍然在网页上太频繁地遇到这种情况：

网页上（无断字处理的）左对齐文本与两端对齐文本对比。

对比两个两端对齐的段落：一个带连字符，一个不带。

网页浏览器对两端对齐文本的处理非常糟糕。它们缺乏必要的算法来正确设置单词间距乃至单个字母间距（这正是专业文字编辑软件的功能）。因此，两端对齐的文本常出现单词间不匀称的空白：黑色文字间参差不齐的白色空隙。这极大地影响了可读性，因此应不惜一切代价避免在网页中使用两端对齐。不过，网页浏览器对断字功能的支持正在逐步完善。如果确实需要使用两端对齐文本，务必配合断字功能使用。目前，我建议完全不要使用两端对齐排版。

两端对齐与可访问性
近期，Better Web Type 课程的一位学生 Benedicte 给我发了一封电子邮件。他告诉我，他在挪威一家专门为有不同特殊需求的读者出版书籍的机构工作。他向我指出，患有阅读障碍的人在阅读两端对齐的文本时会遇到特殊问题。文本行的结尾位置不明确，这使得阅读时很容易跳转到错误的行。我稍作研究，甚至连英国公共部门信息网站 Gov.uk 也建议将文本左对齐。

段首缩进
在书籍中，一种常见的在视觉上分隔段落的方式是缩进第一行。这实际上比在段落之间留空行更常见。就节奏而言，我们是在改变水平节奏来分隔段落，而非垂直节奏。然而在网页排版中情况正好相反——段落之间更常用间距来分隔，但实现段首缩进也是相当简单的。有两条规则必须遵守：

不要缩进第一段的第一个行，或是标题、图像或任何其他类型图形之后段落的第一个行。我知道这听起来相当复杂，但当涉及到CSS时，实际上很简单。

p + p {
  text-indent: 1em;
}

这样做的原理在于，text-indent属性只会在前面有另一个段落的段落上生效。如果某个段落前面是h1标题，就不会应用这个缩进。这正是我们想要的效果。

不要为段落设置底部边距。通过缩进行已在视觉上区分段落，这就足够了。在段落之间留出间距毫无意义。既缩进又间距过大的段落会让排版专家深恶痛绝。

p {
  margin: 0 auto;
}

这会将所有段落的上外边距和下外边距都设置为 0，目的是为了确保段落之间不会因上外边距而产生额外的空白间距。

我建议对没有分节、没有标题或大量图片分隔的文本采用此方式。这种方法最适合由段落构成的长文本，长篇文章或网页版书籍是段落缩进的最佳应用场景。

缩进多少？
推荐且最常见的正文段落缩进是 1em，就像我们在上面的示例中设置的那样。将其设置为一行行高的一个单位也很常见（行高作为一个单位的重要性，将在接下来的垂直节奏章节详述）。因此，如果我们的段落字体大小为18像素，行高为27像素，我们会将段落缩进设置为27像素，或1.5em（等于1.5倍行高）。半 em 被认为是段落缩进的最小值，3em 为最大值。我的建议是使用 1em 或等于一行行高的单位。

悬挂标点
悬挂标点是几乎90%的网站会误用到的东西。我敢肯定，一旦我向你解释了这个概念，你就会开始到处注意到它。根据其定义，悬挂标点“是一种对标点符号和项目符号（最常见的是引号和连字符）进行排版的方式，使得它们不会破坏正文的‘流动’或‘中断’对齐的边距界限”。³² 让我们来看几个例子。

你能注意到上图里的区别吗？左边的例子让我感觉刺眼，而且经常看到它属实令人不适。段首的引号应当外挂于文本主体之外，这样才不会干扰文字的流向或节奏。我知道这是个微小的细节，但如果处理得当，它会对你的排版整体观感产生重大影响。那么，我们怎样才能做好呢？这里就有点复杂了。针对悬挂式标点有个CSS属性，但截至撰写本文时，只有Safari浏览器支持良好。

blockquote p {
  hanging-punctuation: first;
}

将 hanging-punctuation 属性设置为 “first” 意味着“元素的第一行格式化行开头的可支持字符悬挂”。³³ 在我们的示例中，这意味着段落第一行开头的引号悬挂了起来。“可支持字符”部分仅仅意味着该引号属于 CSS 认为可以悬挂的字符列表中的一员。

这很好，但由于浏览器兼容性不佳，在撰写本书时我们还无法使用这一特性。真可惜，否则它会非常容易实现。不过，事实证明有一种同样简单的变通方案：负文本缩进。

blockquote p {
  text-indent: -0.5em;
}

得到的结果是这样的：

只需确保调整其数值以适应您所使用的字型。-0.5em通常是个不错的起点，但请根据需要调整至精确无误。不妨参照betterwebtype.com/book/c6e1上的在线示例。

我还没告诉你这两种解决方案都存在一个问题。事实上，仅当引号出现在第一行时，这两种方案才有效。但如果我们要在句子中间引用某人的话，而这段引文恰好从新行开始呢？

这两个解决方案在这个例子中都行不通。引号被推到了正文里面。这在视觉上不太美观，但我们目前也没有什么好的解决办法，至少暂时还不行。

其他字符的悬挂标点
悬挂标点也应应用于其他字符。在引号之后，接下来最重要的是项目符号。同样，大多数网站在这方面都处理错了，但实际上，浏览器默认处理也是错误的。以下是大多数浏览器默认渲染有序和无序列表的方式。

事实上，需要将它们设置为悬挂式项目符号，这样就不会破坏文本的流畅性。为了保持水平节奏不受干扰，我们需要修改无序列表和有序列表元素的内边距。

ul, ol {
  padding-left: 0;
  list-style-position: outside;
}

注意：同时确保 list-style-position 被设置为 outside。

这样会把项目符号向外推，并保持水平节奏不受影响。将项目符号放在正文块内部，并不像将引导放在内部那样是那么大的错误。这在排版上是正确的，但我知道对某些人来说这看起来很奇怪，至少一开始是这样。一旦习惯了，他们就不会在意了。我们作为一个网页设计社区，长期以来一直在犯这样的错误，以致这些习惯需要重新养成。我个人认为，悬挂式项目符号是一种推荐做法，而悬挂式引导则是一条规则。请参看在 betterwebtype.com/book/c6e2 的列表的在线示例。

垂直节奏

假设一个网站将主体文本设置为20像素，行高为30像素。那么行宽应当适配这个字号与行高：600像素看起来正合适。至此，我们已经掌握了建立页面垂直节奏所需的所有基础要素。为此我们需要一个基础的节奏单位。在排版中，这个单位就是行高。我们可以通过为网站添加一个30像素高的基线网格来直观地看到它。

p {
  font-size: 20px;
  line-height: 30px;
  max-width: 600px;
}

基线网格表示等距行高和垂直韵律。

注意：与平面设计和图形设计不同，基线网格正好位于行的中间。很多人问我，它不应该正好位于字母主体的底部吗？在网页上不是这样。看看网页浏览器是如何解释一行文字的：

网络上
的基线网格恰好位于行与行之间
，不像印刷中字母主体
直接落在上面。

目前我们只有一段文本，所以一切看起来都正合适。为了保持这种节奏感，我们需要将行高作为网站上每个尺寸、边距和内边距的基本单位。我们来看一下。我们想为文本添加一个标题。我们为其分配55像素的尺寸，使其更显眼。其行高现在需要是原始（基础）行高的偶数倍，这是我们主要的节奏单位。这也适用于它的边距——特别是顶部和底部的边距。

h3 {
  font-size: 55px;
  line-height: 60px; // = 2 × 30px (main body text line-height)
  margin-top: 90px; // = 3 × 30px
  margin-bottom: 30px; // = 1 × 30px
}

注意：在以下示例中，我使用的是像素（px）单位，但在设置行高时，你应该使用如 em、rem 这样的相对单位，或者直接使用小数（如 1.5）或百分比值（如 150%）。

h3 的行高等于两行，其外边距顶部为三行，底部为一行。一切安排得井井有条。

我们将行高设为60像素，因为它是基准行高（30像素）的下一个整数倍，能够舒适地容纳设置为55像素的标题。对于标题边距，我喜欢遵循的一条指导原则是：底部边距应明显小于顶部边距。许多网站误将标题的上下边距设置为相同值，导致标题悬浮在两个文本块的正中间。标题在视觉上需要与其下方、实际所指的文本建立联系。这正是我们希望通过垂直韵律和视觉层次结构实现的效果。现在，读者只需扫视就能理解文本的结构。

鉴于在大多数情况下我们都需使用这些设置，因此最佳做法是为所有元素指定默认的行高、边距和内边距，而仅在必要时才偏离这些默认值。

* {
  line-height: 30px;
  margin-top: 0;
  margin-bottom: 30px; // = 1 × 30px
}

因此，若想为列表设置特定的底部边距，可以采用如下方式：

ul, ol {
  margin-bottom: 60px; // = 2 × 30px
}

你可能会问：那要是图片破坏了垂直节奏怎么办？好问题。图片尺寸各不相同。我们不可能在每种情况下都控制其高度，尤其对于大型网站。那该怎么办呢？我的建议是：顺其自然。把基线网格当成指南，而非限制。你的文本和页面比例在节奏上依然是正确的。它们仍然保持着明确的视觉层级。一大块坚实的呈现内容——图片显然就是这样的内容——不会在视觉上破坏节奏感。是的，它可能会突破网格，但归根结底这并不重要。网格只是工具。

使用Sass实现垂直间隔
去年，我围绕着字体排版的垂直间隔和模块化比例创建了一个工具。我称之为Gutenberg——一个富有意义的网页排版入门套件。³⁴Sass是让这件事变得非常简单的原因。事实上，我觉得如果没有它，这个工具根本不可能构建出来。其主要目标是：开发者设置一些基本尺寸（字号、行高和最大宽度），然后Gutenberg负责处理比例和垂直间隔。我现在在我构建的每个网站上都使用它。以下是Sass让这一切变得如此简单的主要原因：

$base-font-size: 112.5; // Is used as %
$line-height: 1.5;

$base: 16 * ($base-font-size / 100);
$leading: $base * $line-height;

@mixin margin-bottom($number){
  margin-bottom: #{$number * $leading + 'px'};
  margin-bottom: #{$number * $line-height + 'rem'};
}

这是我最常用的mixin。Gutenberg也提供了其他边距和内边距的mixin。每次我都会使用mixin，而不是手动设置任何边距或内边距。这样一来，就能确保垂直节奏不被破坏。上面mixin的使用示例如下：

h3 {
  @include margin-bottom(2);
}

翻译为：

h3 {
  margin-bottom: 60px; // 2 × line-height in pixels (30px)
  margin-bottom: 3rem; // 2 × line-height in decimal (1.5)
}

Sass mixin 设置的底部外边距以 rem 为单位，并添加像素单位作为后备方案。

Sketch 中的垂直节奏
在 Sketch 中设置基线网格，你不需要插件。我们可以利用 Sketch 开箱即用的功能，通过一个简单的变通方法来实现。在 Sketch 中，先添加一个画板。然后，转到 视图 > 画布 > 布局设置。布局设置窗口将会打开。你需要做的是：

勾选“列”复选框，并将“总宽度”的值更改为与您的画板宽度相匹配。“偏移”必须设置为0。完成后您可以取消勾选“列”复选框，因为我们实际上并不需要它们。

如果尚未勾选，现在请勾选“行”复选框。将“槽高”更改为‘1px’，并将“行高”更改为您的行高像素值加1像素（以容纳我们在上一步设置的‘槽高’）。在本例中，即为 27 + 1，等于 28 像素。

然后将“视觉样式”单选按钮更改为“描边外框”。

将线条的颜色更改为较为柔和的色调。您需要更改“深色”的颜色。我通常将其设置为非常浅的蓝色调。点击“确定”。

砰！现在你在Sketch中就有了一个基线网格。很简单，对吧？

注意：您的文字内容将显示在网格背后，这是无法改变的。您可以做的是调整线条的不透明度。您可以在上述第 4 步中选择颜色时，通过颜色选择窗口进行此项更改。

让我们的网站应用节奏

做得不错，坚持到这里很不容易。节奏是排版中最重要的元素之一，而正确把握节奏并不需要太多精力。我知道有些设计师喜欢凭视觉感受做决定（他们根据视觉上看起来是否合适来决策），而另一些则更倾向于依靠数据支持自己的决定。我认为两者可以也应该相辅相成。我习惯先从数学上正确的方案入手，必要时再根据视觉感受进行微调。

上一章我们确定了示例网站上标题所用的字体。接下来就是上次没完成的地方。

我们将文章正文设置为 18 像素，行高设为 1.45（合 26 像素）。至此，我们已具备了为网站应用垂直节奏所需的一切。为了方便理解，我将在此示例中全程使用 Sass 并仅关注桌面版。在实际案例中，如果移动端文字尺寸与行高（若其与桌面版不同）不是这样，则需对该流程重复执行。

先为所有元素设置行高和底部边距。

// Variables
$base-font-size: 112.5; // Gets used as %
$line-height: 1.45;

// Vertical rhythm mixins
@mixin line-height($number) {
  line-height: #{ $number * $line-height + 'rem'};
}

@mixin margin-top($number) {
  margin-top: #{ $number * $line-height + 'rem'};
}

@mixin margin-bottom($number) {
  margin-bottom: #{ $number * $line-height + 'rem'};
}

html {
  font-size: #{$base-font-size + '%'}; // 112.5% = 18 pixels
}

* {
  @include line-height(1);
  @include margin-bottom(1);
  @include margin-top(0);
}

我们方才重置了所有元素的行高与边距，现在它们都已符合基线网格。但与此同时，我们也制造了一个新问题：标题的字号通常大于正文，无法适应单一行高。我们需要为所有标题调整行高，修改边距的工作也不妨一并完成。

最简单的方法就是创建一个对象，里面包含所有文字标题的列表，以及它们的行高、顶部和底部边距的值。

// Headings parameters [ h1: line-height: 2 × 30px, margin-top: 2 × 30px, margin-bottom: 1 × 30px ]
$headings: (
  h1: (2, 3, 1),
  h2: (1.5, 2, 1),
  h3: (1.5, 1, 0),
  h4: (1, 1, 0),
  h5: (1, 1, 0),
  h6: (1, 1, 0)
);

// Set line-heights and margins
@each $heading, $properties in $headings {
  #{$heading} {
    @include line-height(nth($properties, 1));
    @include margin-top(nth($properties, 2));
    @include margin-bottom(nth($properties, 3));
  }
}

现在好多了。现在连所有标题都对齐基线网格了。垂直节奏主要就是这些内容。我们有了一个很好的基础可以继续深入。从今往后，请务必使用Sass混入设定所有的行高和边距，这样一切都会井然有序。查看迄今为止的示例网站：betterwebtype.com/book/c6。

核心要点

字符间距和字距微调均用于调节单个字母间的间隔，但字符间距会均匀改变所有空隙，而字距微调则会根据相邻字母调整间隔以提升可读性。

不要在网页文本中使用两端对齐。浏览器对此渲染效果仍不理想，会导致文字间产生大量空白间隙。这会破坏文本的流畅度和水平节奏，使阅读更加困难。

段落缩进是利用水平节奏来标识新段落的简洁方式。缩进通常设置为1em或1倍行高。

悬挂标点有助于保持文本流完整。引号应置于主体文本外侧，无序列表中的项目符号和有序列表中的数字也应如此处理。

垂直韵律使文本更易于浏览和阅读，并在页面上建立视觉层次结构。保持垂直边距和尺寸定义一致的最佳方式是使用Sass及其混合宏等工具。

模块化比例与有意义的排版

在为一个网站工作时，你如何确定字体大小呢？你是随意选择自己认为视觉效果不错的尺寸吗？你是否最终弄出来一堆杂乱无章的尺寸，而且自己也搞不清这些尺寸的来由？过一段时间后，你网站上的文本看起来是不是开始变得混乱？ CSS 代码又怎样？在给网站代码进行维护时，能搞到大脑爆炸还不算完吗？

我还记得自己在接触模块化比例这个概念之前，是怎么设置文字大小的。这和我上面描述的情况差不多。选择某个大小并没有什么真正的理由。没有什么真正的意义。那都只是数字，而且大部分都是随机数字。正文字型？16像素应该可以。一级标题？40像素可能行。插图说明？来15像素吧？没什么不行的。 这就是我以前的流程。

模块化比例为您的文本大小、代码乃至整个排版带来秩序、和谐与意义，最终——也是最重要的一点——让您的网站受益。

下次在网站上为特定文本选择字号时，不要从以1像素为单位递增的无穷数值中挑选，而应从一系列预设且计算得出的尺寸范围中选择——这些尺寸之间存在着某种和谐联系。这种做法有助于保持代码的模块化，从而更清晰易懂。正如这对您的工作有益，对读者同样如此。他们无需费力理解众多不同文本尺寸的意义，只需要辨认少数几种。由于这些尺寸更频繁地重复出现，其作用及彼此关系也更容易解读。视觉层次结构与秩序因此得以恰当建立。

大多数平面设计工具都内置了默认的排版比例。一些前端开发框架也是如此。

自然音阶。

这就是所谓的全音阶（Diatonic Scale）。你可能以前就偶然遇到过它。我相信在用Photoshop或Sketch的设计师都碰到过。在最坏的情况下，你只需遵循这个比例中的尺寸。这里的"最坏情况"听起来有点过于严重了，因为使用这个比例本身没有任何问题。它就像其他任何比例一样。

字号规律的起源

排印师们几个世纪以来一直在使用这个比例。事实证明，印刷中采用比例尺的主要原因之一，与我们今天在网页设计中使用模块化比例的目的是一样的。最主要的区别是，他们当时只用一套比例尺，而我们现在有多种可供选择。

数字排版与以往的排版方式相比要容易得多。过去，冲压雕刻师需要切割金属模具，每个字母都被铸造成金属块。为每种字体生产大量样式、字重和尺寸曾经是一个极其漫长的过程。在铸造金属活字的几个世纪里，逐渐形成了一种标准：全音阶尺度（diatonic scale），它基于音乐中同名音阶发展而来。凭借这一尺度，虽然排版师仍有很多尺寸可供选择，但生产新字体的过程已变得更简单、更快速。随之而来的副作用是，印刷作品变得更加和谐与标准化。

排版比例简化了版面编排的流程。它的诞生源于现实需求，同时也是一种美学提升。³⁵ 这正是我们在网页设计中采用模块化比例所寻求的。它为我们提供了一系列预定义的可复用尺寸，从而将原本可能陷入混乱的局面变得井然有序（在我看来，任何非模块化的东西都可能迅速演变成混乱）。

数字时代的字体比例系统

由于数码字型极易操控，我们引入比例来引导排版更具意义。网页设计师绝不应在不使用比例的情况下为网站设定字型。默认的字型比例是个不错的起点。但有时你可能想尝试不同的比例。推陈出新，带来一些新鲜感。来自Adobe的Tim Brown提出了模块化比例³⁶的想法——一个创建自定义比例的工具。使用模块化比例的概念非常简单：

模块化比例，作者：Tim Brown。

1 选择你的基准尺寸
一旦你决定了在主体正文中使用何种字体，你就需要找出最合适的尺寸。正如我们之前所见，并非所有字体在同一尺寸下看起来都相同。有些显得更高或更大，有些则更短、更纤细。在浏览器中预览，并调整字体尺寸、行高和行宽以进行尝试。一旦确定了最佳的字体尺寸，就将其作为模块化比例的基准尺寸。

2 选择一个比例
可供选择的比例有不少。多探索和比较。黄金比例可能是最流行的。它在平面设计和建筑领域流行已久。它基于斐波那契数列，该数列产生的图案据称在自然界中无处不在。³⁷ 我发现最适合我的是比例为2:3的纯五度。我觉得它比其他比例更具灵活性。这里的目标是找出最适合你的比例，并形成自己独特的风格。

3 定义所有尺寸以匹配比例
一旦决定了使用哪种比例，你就必须通过从该比例中选择一个值，来定义所有的文本尺寸。

示例
假设我们决定将正文文本设置为 18 像素，并选择了纯五度比例。现在，我们要设置将使用的基本文本大小：标题 1 至 4、图注和细则。以下是该比例提供的可选值：

由于我们只需要使用标题1、2、3和4，因此需要四种比基准字号更大的尺寸。另外还需要两种比基准字号更小的尺寸，分别用于图注和小字文本。所以我们可以这样分配字号：

元素 | 字体大小
标题1 | 3.375rem
二级标题 | 2.25rem
标题 3 | 1.5rem
标题4 | 1rem
图注 | 0.75rem
小 | 0.5rem

大多数时候，我只用到一至四级标题，因此习惯将四级标题的文字大小设定得与正文字号相同，然后通过加粗或斜体来加以强调。

搭配Sass使用比例尺度

我确信，正在阅读本书的开发者们已经可以看到，这种方法与典型的开发思维模式是多么契合。它是模块化的（因此得名模块化比例），并且是可扩展的。最重要的是，它与CSS预处理器配合得天衣无缝。接下来，我们一起通过三个简单的步骤，看看如何在Sass中设置它。

// 1. Base size and ratio

$base: 1.125; // = 18px
$ratio: 1.5; // Perfect Fifth

// 2. The formula for modular scale is (ratio^value) × base so we need a power function

@function pow($number, $exponent) {
  $value: 1;

  @if $exponent > 0 {
    @for $i from 1 through $exponent {
      $value: $value * $number;
    }
  }

  @return $value;
}

// 3. Let's make it simpler to use by combining everything under one roof

@function ms($value, $ms-ratio: $ratio, $ms-base: $base){
  $size: pow($ms-ratio, $value) * $ms-base;
  @return #{ $size + "rem" };
}

h1 {
  font-size: ms(3); // = 60.75px
}

在使用Sass等预处理器时，我们只需借助几个变量和函数即可应用模块化比例。每个模块化比例都可以简化为单一数值：例如，完美五度对应1.5。我们将该数值保存至变量 $ratio。另一个必要变量是基准字号，需与正文字型大小保持一致。本例中设为18像素，即1.125em。

这是计算给定模块化比例中任意数值的公式，因此我们需要使用幂公式。

在第三部分也是最后一部分，我们只需将那个主要公式写成代码并准备就绪即可。我们预置了公式中的三个参数中的两个，所以它只需要一个数值参数。ms(3)意味着我们需要比例尺上的第三个尺寸。

但对于负整数指数呢？实际上，模块化比例不仅会生成比基础尺寸更大的尺寸，也会生成更小的尺寸。若想将文本设置为其中一个较小尺寸，就需要允许负指数的存在。实际上实现这一点非常简单。我们只需添加一个额外的if语句，用于检查指数是否小于0，如果是，则执行不同的计算。示例中的整个pow函数将修改如下：

@function pow($number, $exponent) {
  $value: 1;

  @if $exponent > 0 {
    @for $i from 1 through $exponent {
      $value: $value * $number; //Multiply by $number if exponent less than zero
    }
  } @else if $exponent < 0 {
    @for $i from 1 through -$exponent {
      $value: $value / $number; //Divide by $number if exponent less than zero
    }
  }

  @return $value;
}

现在我们的Sass模块化比例函数已经非常健壮，而且我们也可以这样做：

.class {
  font-size: ms(-1); // = 13.5px
}

我们已经准备好在网站上开始使用模块化比例了。现在正文文本大小设为 18 像素，并有基于该值计算其他尺寸的公式。再也不必在 24 和 25 像素之间做无谓且无意义的抉择了。我们直接使用比例中预定义的尺寸。如果觉得某个尺寸太小，就用比例中的后一个尺寸；如果太大，就用前一个尺寸。

刚开始可能会觉得有些限制，但坚持使用一段时间后，你会逐渐习惯，并且你的作品也会从中受益。模块化比例能让所有人都受益：开发者因为这种模块化方案能够轻松应对那些容易变得复杂和混乱的情况；设计师因为知道自己的排版是有意义的；读者则因为内容变得更容易理解和消化（尽管他们可能没有意识到这一点）。

在Sketch中使用模块化比例

在Sketch中使用模块化比例很容易，但你需要一个名为"Typographic scale"的插件。³⁸安装后，在画板上放置一些文本，将其设置为你偏好的基准尺寸（通常是正文字体大小）。然后转到插件 > Typographic scale。插件窗口将弹出，你可以在其中选择要使用的比例类型和所需的尺寸数量。

确认您的选择，脚本将根据您选择的模块化比例添加更多相应尺寸的文本图层。有些尺寸会比您的基值要小，但大多数都更大。

我建议将这些尺寸保存为文本样式，以便之后轻松复用。

哪个应该优先考虑，网格还是比例？

这个阶段，你可能有点困惑。你可能在想：比如我有一个像素值为 x 的基线网格，那我的模块化比例如何与网格配合？我应该先设定模块化比例，然后再应用网格吗？还是反过来？正文的行高需要采用模块化比例中的某个值吗？那它涉及边距和内边距时呢？它们也需要是比例中的值吗？当我刚开始使用模块化比例和网格时，我脑子里也有完全一样的问题。

首先，基线与模块比例都是辅助工具。如果过度纠结这些概念，事情会迅速复杂化。它们的唯一目的是指引你，而非限制你。但两者确实需要良好配合。我们来回答这些问题。

我是应该先设定模块化比例再应用网格，还是反过来操作？
正如我在本书开头所建议的：从内容着手。这意味着你需要先确定以何种字体以及多大字号来设置你的主体正文。然后，通过调整合适的行高和行长来完善你的段落。到这一步，你接下来的操作是设置基线网格还是使用模块化比例来确定其他字号，其实并不重要。在你决定使用何种行高的那一刻，你的基线网格就已经被定义了。这意味着，模块化比例所确定的字号总是需要去配合基线网格，而不是反过来。你不能也不应该为了适配字号而去修改基线网格。

正文文本的行高是否需要采用模块化比例中的数值呢？
这个问题的答案很简单：不需要，行高只需要与三角形中的其他两个段落特性（行长和字号）相匹配即可。使用模块化比例中的数值限制性太强，这不是我们想要的。对于其他元素（如标题）的行高也是如此。你的行高应该基于你正在为其设置的文本来决定，而不是基于某个与文本没有实际关联的比例中的数字。

外边距和内边距需要与模块化比例中的某个值相匹配吗？
我认为不需要，但你完全可以那样做，尤其是侧边距和内边距。我更喜欢对所有外边距和内边距使用行高的倍数，但如果出于某种原因你不想这样做，可以尝试使用比例中的数值。我强烈建议对上下外边距和内边距使用行高的倍数。

当我因为尺寸中存在小数而导致元素无法精确对齐基线网格时，应该怎么办？
有时，当你用基准字体大小乘以行高比率（16 × 1.4）时，会得到一个像22.4像素这样的尺寸。这类尺寸的渲染在很大程度上取决于浏览器，因为有些浏览器会向上取整，有些则会向下取整。在这种情况下，你会注意到元素似乎偏离网格一个像素。我知道这看起来很不美观，但你不必为此担心。你的垂直韵律是完整的，你的尺寸也没有问题。

目前看起来很简单，难点在哪里？
简而言之，模块化比例尺寸应主要应用于文字尺寸。但是，你需要让这些基于比例值确定的尺寸，与基于基线网格确定的行高完美配合。这就是难点所在。让我们来看一个恰当的例子。

假设我们将正文的文字大小设置为18像素，行高为30像素。我们希望为标题设置大小，于是建立了一个基于小三分音律的比例尺，其值为1.2。我们设定一级标题的字号应为37像素——这是比例尺中的一个数值。为了适应其大小，我们将其行高设为60像素。

看起来不错，是吧？别高兴得太早。我们来看看当标题分成两行时会是什么样子。

我们知道标题的行高比正文小一些看起来更美观，所以这不是我们想要的效果。但我们应该怎么做呢？我们既有比例尺设定的尺寸，又有网格系统。虽然一切都在网格上，但看起来却不协调。排版中有一条原则可以在这种情况下为你指明方向：在这种两难的情况下，选择在视觉效果上看起来正确的方案，而不是数学上精确的方案。基于这个原则，你可以将标题的行高调整到任何能在视觉上呈现更好效果的值。你可以这样做，这没有任何问题。我算是个纯粹主义者，当我使用网格时，我喜欢保持在网格范围内。但我会选择数学上精确的解决方案而不顾视觉效果吗？不，我会适度变通规则。

我没有使用60像素的行高，而是采用了45像素的高度。这个45是怎么来的呢？它是行高乘以1.5的结果。我很喜欢这个解决方案，因为它没有打破网格的规则，而是巧妙地融入了规则。由于它依然是行高的倍数，因此在某种程度上仍然符合网格的规律。在这种情况下，一个两行的标题总共会占据三行的高度。

而最棒的部分是什么？如果你计算标题的行高比例（45 ÷ 37），结果是1.22，正好落在推荐给标题用的1.1到1.3范围内。正如我之前在书中提到的，排版并没有固定的规则。如何塑造并打破甚至超越规则，全由你决定——罗伯特·布林赫斯特说得最好³⁹。

务必打破规则，要漂亮地、深思熟虑地、恰到好处地打破规则。

Gutenberg 這個有意義的網頁排版入門套件，採用雙基綫網格，讓它在字型尺寸、邊距以及如何與基綫網格配合方面更加靈活。

让我们来设置文本尺寸

行吧，那这一切如何应用到我们的示例网站上呢？让我们为示例添加更多内容，并从模块化比例中选取数值来设定一些尺寸。在这个例子中，我将使用我最喜欢的完美五度比例。

我们在前一章中用 Sass 写了一些代码，该代码为我们所有的标题设置了边距和行高。我们来修改一下，以便同时设置其大小。

$base: 1.125; //= 18px
$ratio: 1.5; // Perfect Fifth

// pow and ms functions (from previous chapter)
@function pow($number, $exponent) {
  $value: 1;

  @if $exponent > 0 {
    @for $i from 1 through $exponent {
      $value: $value * $number; //Multiply by $number if exponent less than zero
    }
  } @else if $exponent < 0 {
    @for $i from 1 through -$exponent {
      $value: $value / $number; //Divide by $number if exponent less than zero
    }
  }

  @return $value;
}

@function ms($value, $ms-ratio: $ratio, $ms-base: $base){
  $size: pow($ms-ratio, $value)*$ms-base;
  @return #{ $size + "rem" };
}

// [ h1: font-size: [x value from scale], line-height: 3 × 26px, margin-top: 2 × 26px, margin-bottom: 1 × 26px ]
$headings: (
  h1: (3, 3, 2, 1),
  h2: (1, 1.5, 2, 1),
  h3: (0, 1, 1, 0),
  h4: (0, 1, 1, 0),
  h5: (0, 1, 1, 0),
  h6: (0, 1, 1, 0)
);

// Set font-size, line-heights and margins
@each $heading, $properties in $headings {
  #{$heading} {
    font-size: ms(nth($properties, 1));
    @include line-height(nth($properties, 2));
    @include margin-top(nth($properties, 3));
    @include margin-bottom(nth($properties, 4));
  }
}

这段相对简短而直接的代码，为我们所有标题设定了字号、行高及边距。最棒的是它极易维护：行高与字号不匹配？调整后即可查看效果。需要让某个标题的行高更接近1.1至1.3的推荐范围？尝试减少0.5个单位并检查效果。在这个具体示例中我们无需调整，因为标题1的字号完美适配了3倍行高的空间。

现在让我们设置一些其他字体大小。

small, figcaption {
  font-size: ms(-1);
}

.big-quote {
  font-family: $font-korolev;
  font-size: ms(1);
  float: right;
  max-width: 10em;
  @include line-height(1);
}

// etc.

将 .big-quote 添加到页面后，我发现行与行之间的空间太小了，尤其是针对当前这个特定的文本尺寸。我本可以去改变字体大小，但我想保留它。我知道将行高加倍会太过头，所以我去把它的行高改为了 1.5 × 行高。结果明显更好了，并且仍然适配网格。我们只是稍微变通了一下规则。

.big-quote {
  ...
  @include line-height(1.5);
}

模块化。简洁。如今，仅需数分钟即可完成网页排版的80%工作。

到目前为止，请查看示例网站 betterwebtype.com/book/c7。

核心要点

切勿在无比例尺的情况下进行设计。若不使用模块化比例，可采用全音阶比例。切勿随意指定文字大小。

使用模块化比例很简单：选定基础尺寸，选择一种比例，并采用该比例中的尺寸。使用本书提供的Sass代码片段可简化此过程。

在必要时，适当调整甚至打破规则是可以的。视觉上看起来正确比数学计算上的精确更为重要。

页面布局

网络喧哗，却无趣

杂乱与嘈噪
今天的网络存在两个主要问题。其一是缺乏对内容的专注，这一点我们已经部分讨论过。网站仍然由设计师绘制，而且几乎每个网站设计都是从绘制一两个方框开始的。"这个是页眉方框，这个将是文章部分，那个是侧边栏"——这仍然是网页设计背后非常主流的思路。我们总是先设计网站的布局，而移动设备优先的开发方式也只是让我们在开始将那些方框在大屏幕上左右挪动之前，重新考虑如何将它们垂直排列。

这一切带我们走到了今天：Web 环境比几年前改善了许多，但现在是时候超越它了。是时候让我们首先思考内容，忘记那些条条框框。是时候停止产出模板与布局，开始围绕访问者真正想阅读内容而创建网站。是时候不再因空间允许或为赚取微薄利润，就用无意义之物堆砌网站——弹出广告、横幅广告，我说的就是你们。如今的网络充斥着喧嚣。虽然全大写文本正逐渐消失，但我们找到了其他向用户“嘶吼”的方式——“点击这里”、“立即订阅”、“分享给好友”等等。我明白完全消除线上广告并不现实，甚至并非我的主张。当网站以内容为核心、致力于提供优质体验时，广告并不会成为问题。没人会介意这类网站上恰如其分的广告投放。当前的问题在于，大多数网站本末倒置——攫取数十亿用户的点击量比一切都重要。坦率地说，这类网站永远会存在。这无可厚非。但这不意味着我们应安于现状，更不意味着我们无法做出改变。即便每次只能改进一个网站。

无聊的居中列
另一个问题是我们似乎已经完全黔驴技穷了。有些人可能还记得那个老掉牙的960像素网格⁴⁰。那还是响应式网页出现之前很久的事了。那时的网页设计很简单：你只需要决定你要用多少列，以及哪种网络安全字体最合适。在这些列内画框成为时尚；这么做绝对不会出错。我们喜欢认为自己早已超越了那个阶段，但真的如此吗？我们真的超越了吗？让我们来看看被许多人奉为优秀的网页排版是什么样子。

一个大栏目，正中。没错，就是这样。这就是网页排版至今最大的成就——试图模仿书籍却并未真正成功。一本书由预定尺寸的页面构成，因此内容在这些页面上的呈现方式须适应其尺寸，适应那块画布。在网络世界中，我们拥有这块宏大、动态、激动人心且具备响应能力的画布，而我们能做的最好的方案却是在侧边留有均匀边距的居中栏目。这是960像素网格的残余——那种认为内容必须适配一个方框的理念。我们仍在模仿一种与互联网截然不同的媒介。网络全新的响应式动态画布并非桎梏，而是优势。面对这个曾受限于纸张物理约束的设计师们梦寐以求的媒介，我们当然能做得更出色。这是一种新媒介，一块新画布。是时候忘却旧媒介强加给我们的虚构约束了。早已有一些先驱者在开拓前路。

观察一下上面图片中的网站——Khoi Vinh的Subtraction。⁴¹你会如何描述它呢？我先从那些不显眼的地方说起。看看两侧的边距。你注意到它们不一样吗？你或许认为这完全是错误的，但这只意味着你还困在960像素的框框里。无论如何，右侧的边距即使不是左侧的三倍，起码也是两倍。这并非巧合，而是有意设计。内容显然是按照某种网格来排列的，却又让人感觉充满活力。网格增强了层级结构和信息架构，它的作用不仅仅是让几个方框对齐。说到方框，你看到任何方框吗？我看到的全是文字。到处都是内容。网站的布局非常规，但效果极佳。浏览起来毫不费力。看一看最左边的栏。它甚至没有标题，但我完全知道它是什么。它只是链接到网站上的其他内容（可能是热门但并非最新的内容）。整个网站上持续存在的图形元素只有两个：标志和放大镜图标。其他的一切都是文字：这又是一个“95%的排版”网站的范例。让我们来看一下文章页面。

与主页相同，但更为明显的是，文章内容明确左对齐。看看右侧那大片留白。没有干扰，没有杂音。唯有内容。你的大脑可能仍会本能地觉得这不对——内容怎能只靠左对齐，右侧却留出那么大的空白？这看起来不对劲，缺乏对称性，需要修正。对吗？并非如此。这些留白自有其功能。"排版中的留白犹如建筑中的空间"，⁴²马西莫·维涅利曾断言。他进一步阐释道："正是留白让黑色的字形得以歌唱。"但这究竟意味着什么？

这一切都回到对比的概念上。正如我们已经发现的，对比在设计、建筑乃至字型排版中都扮演着至关重要的角色。对比是赋予设计生命力的关键。一个巨大空旷房间内的对比，能让（精心摆放的）独特艺术品脱颖而出。缺乏对比，便没有生命。那要么是宇宙的黑暗，要么是画布的一片空白。空无一物，便是死寂。当我们在画布上开始放置字型，画作便有了生命。但赋予生命的是字型，而非画布。画布的存在只是为了凸显字型。减法（Subtraction）网站也是如此。空白使内容鲜活起来。它让网站变得独特，使其在海量的居中单列布局中脱颖而出。既然我们在追求更佳网页排版时乐于模仿书籍，那就让我们更仔细地审视它，看看它是否真的全部居中且对称。

对称已是过去式
“不对称是功能性设计的韵律表达，⁴³” 扬·奇肖尔德在他的排版宣言著作《新排版》中如是宣称。1920年代仍是对称排版的年代，但奇肖尔德和其他志同道合的人正缓慢而坚定地改变着这一点。他挑战了当时排版中无处不在的对称，并声称不对称更具逻辑性，在视觉上更有效果。我从这本书中记得最清楚的是，对称的形式并非从其自身内部（像不对称形式那样）推导出其法则，而是来自外部——画布定义了内容，而非相反。在对称排版中提供变化的唯一元素是字体。这也正是排版中需要装饰元素的缘由。装饰是能够提供一些变化的另一种元素。奇肖尔德之所以挑战排版中的对称，是因为他认为那，坦白地说，乏味。

与早期所有媒介一样，网页问世之初的排版水平同样不尽人意。媒介自身的演进离不开排版技术的优化升级。彼时的网页排版非但未能汲取印刷媒介的教训，反而沿袭并复刻了传统印刷品中的诸多弊端。时下最流行的"内容型"网站布局当属居中的单栏排版。

我们正在做的正是Tschichold所挑战的事情——我们取一个画布，让它来定义我们的内容。画布迫使内容采用对称对齐，因为从画布开始设计时，这是最明显的选择。因此，我们的内容周围留下了均匀分布的留白，这些留白可以方便地填入广告，或者更糟——装饰物。为了让我们的网站变得独特而富有活力，我们需要从内容出发，让内容通过其自然形态来塑造设计。

找一本书。哪本书都行——离你最近的那本就好。翻开书，看看页面上的页边距。找一页普通正文内容的页面，不要看扉页。比较一下外侧页边和内侧页边，再比较一下页面顶部和底部的页边。瞧见没有？这些页边距并不相等。差别可能不明显，但确实存在。如果需要验证，拿把尺子量一量。页边距不相等有两个原因。一个是实用性。读者会用双手持书，一手一边。外侧页边距更大，这样持书的手指就不会遮住内容。读者无需移动手部就能阅读。另一个实用性主要取决于书的类型，但供学习使用的书籍通常外侧页边距更大，以便留出做笔记的空间。另一个原因是美学考量。外侧页边距比内侧大，能让内容更紧凑。如果外侧页边比内侧小，会让人觉得内容像是要挣脱页面跑出来。页边距引导读者朝正确的方向阅读，它们使内容更集中，并将其与其载体——页面——区分开来。它们实实在在地让内容生动起来。这从视觉上不那么明显，但其效果是显著的。这就是为书籍页面进行版式设计的例子之一：

看看上面那个页面布局的例子。留意页边距并不相等（内容没有对称居中），同时注意这个页面看起来多么富有动态感，但整体仍然保持着和谐。像这样动态且多功能的布局，是以内容和网格系统为基础的。为什么我们不能为网页定义类似的布局呢？你可能会想，为固定尺寸的印刷页面做设计更容易（不像屏幕尺寸多变）。事实真是如此吗？还是说我们只是懒惰，不愿花时间为每种屏幕设计有趣的布局？好吧，要为每一种屏幕都设计一个确实太多，但至少为那些最常见的屏幕尺寸设计呢？其他的可以回退到某个基础版本，针对那些尺寸进行优化。此外，在窄小的移动屏幕上我们能做的确实不多。单列居中的布局对它们来说是可以接受的。但是，难道我们不应该为网站的桌面端和平板端版本做更好的尝试吗？

我们在网页上能做些什么？
当今常用的屏幕比例有四种：由1280:1024显示器普及的5:4比例、旧计算机显示标准的4:3比例、通过1680:1050和1920:1200显示器普及的16:10比例，以及最常见的16:9比例。⁴⁴ 据某些资料显示，2014年约有33%的网络使用者使用16:9比例——包括行动装置。⁴⁵ 此后16:9成为广泛的标准，在撰写本书时这个数字可能更高。可以说，16:9是最常见且标准的桌面屏幕比例。既然如此，我们难道不能设计出更充分利用这些屏幕空间的布局吗？接着，我们可以运用响应式网页设计技术，针对其他常见屏幕进行优化。

我们同样可以为网页设计有趣的版式。网页需要通过各种屏幕尺寸不同的设备来浏览，这点不应该让我们裹足不前。它只会让设计更见挑战，趣味性更强。不妨看看我在重新设计个人网站时采取的策略。

该设计基于十列网格，从垂直方向看，内容始于列首与屏幕对角线的交汇点。这一点定义了页面的上边距。页面上的所有内容都从这个起点开始——标题与侧边栏中的网站名称对齐。侧边栏本身占据两列的宽度，内容则横跨五列。这样我们剩下三列作为边距：这个数字无法被平均分割。不过没关系，我本就不想在这个设计中追求对称；我希望内容来定义画布，而不是反过来。右侧的两列边距并不适用于某些元素（本例中的图片）。照片一直延伸到网站的边缘，使设计更具动感（也就是不显得乏味）。随后，我为最常见的屏幕比例（包括4:3）调整了这个设计方案。

为实现这一效果，我使用了宽高比媒体查询，先声明4:3的规则，再为16:9的比例进行必要的调整。

// 4:3 screens first
@media screen and (min-aspect-ratio: 4/3) { ... }

// Modify for 16:9
@media screen and (min-aspect-ratio: 16/9) { ... }

网页是一种新媒体，拥有响应式却激动人心的画布，我们必须以这样的态度对待它。不要通过绘制方框来开始网页设计项目，也不要把网格视为限制你只能使用方框的约束。网格应该基于整个画布，并非所有列都必须填充内容。留空是完全可行的。在设计中，不对称和留白是可取的。优秀的设计师通过强调内容周围的留白来凸显内容的本质，而糟糕的设计师则试图通过强调内容本身来达成这一效果。

网页上的排版与网格系统
我在最后一个例子中使用网格的方式，比当今网络上大部分的做法要灵活得多。我是从内容出发的，内容定义了网格，而两者共同定义了页面的布局。关键在于，网格是一个工具，应该像工具一样被使用。网格本身不应该定义项目（在这里就是网站）。它是一个用来赋予我们决策以意义、强化内容重要性的工具。因此，网格应该围绕内容来构建，而不是反过来。如果我们把自己限制在某个现有工具所能实现的事情上，而不去创建一个能帮助我们做出更好作品的新工具，我们就永远不会进步。

如果您仔细观察上面的图片，您会注意到，一旦使用网格，内容会在画布上轻微移动。

我从内容入手，寻找我认为最能与之相得益彰的字体。我塑造它，使其符合我心中的构想：大字体、单一字体、大量留白和极简风格。然后，我围绕它建立了一个网格框架，并重新编排页面布局使其与网格对齐。市面上有许多网格框架，但我最喜欢的是 Flexbox Grid。使用它，可以非常轻松地建立实现这类布局的流式网格。我们将在下一章探讨响应式网页排版时，回顾流式网页排版和布局。现在，让我们将所学内容应用到示例网站中。

让我们一起来构建我们的页面布局

要将我们对页面布局的新知识应用到示例网站上，首先必须考虑页面上将出现的其他内容。例如徽标和品牌标识、导航栏、推荐文章、元信息、多媒体内容和广告等。我们对移动端版面比较满意，因为这方面可调整的空间不大。现在来看看能为桌面端做些什么——从移动优先开始设计没问题，但这不应妨碍我们为桌面端优化布局，从而为用户提供更好的体验。

由于本页需要容纳更多内容，我们得采用更复杂的网格系统。先试试16栏、20像素栏间距的布局。现在添加页面上最重要的元素：导航栏。它包含网站标志、指向主要内容分类的若干链接，以及返回首页的链接。在添加网站标志时我突然意识到——标题的字号相当大，会占据较多空间。但正文内容永远不会需要如此大的区域，因此我打算尝试让标题超出主要内容区域，以增强页面的动态感。就像这样：

注意：我最喜欢的Flexbox网格不支持超过12列，所以我决定自己创建一个。这很简单：100% ÷ 16 = 6.25%。这就是我们的列宽。为了简化示例，我将跳过列间距。然后我创建了两个Sass混合器：一个通过列数相乘来设置元素的宽度，另一个设置左边距。这样我就可以通过简单地设置元素的宽度和偏移量来定义我的布局。

$column: 6.25%;

@mixin width($number) {
  width: #{ $number * $column };
}

@mixin offset($number) {
  margin-left: #{ $number * $column };
}

以下是它在CSS中的应用方式：

.main-body {
  @include width(9);
  @include offset(2);
  float: left;
}

好的，这看起来挺有意思的。我喜欢它，并且认为它有潜力，所以我保留它。一旦我处理好它，标题的左边就只有一栏的边距，而正文内容和导航有两栏。现在让我们加上帖子的元信息。它必须放在标题和正文之间，所以这个部分没什么可发挥的空间。没什么大改动。让我们在页面添加“推荐帖子”版块。右边有很多空间，试试把它放在那儿吧。

.sidebar {
  @include width(3); // But only 3 columns wide on desktop
  @include offset(1);
  float: left;
}

于是我们得到了以下结果：

很好，我们在右侧添加了大量内容，但主要内容周围仍有大量留白。我们看看如何放置照片。利用剩余空间，我们可以尝试让照片比文字段落稍宽一些。尝试增加一列宽度。

最后一步：让我们添加精心放置且品味高雅的广告。右下角非常适合放置广告，让我们试试看。

而且同样效果显著。这就是我在设计本页布局时，逐步经过的流程解析。本章这最后一部分，实际上原原本本地记录了我的思路。下次着手项目时，不妨试一试吧。从内容起步，定义排版，构建网格，再到完成布局。这是一个非常自然的过程。截至目前，可参考我们的示例网站：betterwebtype.com/book/c8。

核心要点

正如本书已多次提到的，尝试在下一个网页设计项目中采用内容优先的方法开始。不要从在预设网格上绘制方框开始。围绕内容来设计网格。

单一居中的正文栏很乏味，且模仿了一种完全不同的媒介：书籍。不对称使设计富有动感，并使内容脱颖而出。

对称已成过去。它安全但乏味。在网页上，它为广告和装饰留出了空间。这些都无法帮助我们设计出更好的网站。

响应式网页排版

网页设计曾经如此简单。嗯，也许说"更简单"更合适。屏幕尺寸曾经几乎相同，并且只会变得更大。但随后屏幕尺寸开始大幅缩小。根据一些来源的数据，网络流量中的移动端占比从2013年底的27%增长到了2017年初的53%。⁴⁷ 现在，超过一半的互联网内容是在移动屏幕上浏览的：这块屏幕比我此刻注视的屏幕要小得多；并且这块屏幕主要使用竖屏（纵向）方向。事实上，有研究表明，只有不到5%的移动互联网用户会使用横屏（横向）方向。⁴⁸ 这带来了挑战。我们不再仅仅为大型的、通常16:9比例的屏幕设计网站，现在还需要考虑网站在不同方向、极其狭小（相对于桌面端而言）的屏幕上如何被使用。为了应对这一挑战，"移动优先"和"逐步增强"的设计理念应运而生。

这个想法很简单。先为限制最多的移动端屏幕设计网站，再为限制较少甚至没有限制的平板和桌面端屏幕增强设计。将我们目前所学的排版知识应用到这个概念中很容易。首先为移动屏幕设置基准字号，然后使用 em 或 rem 等相对单位来设定其他文本尺寸。接着为更大的屏幕添加媒体查询，并在需要时进行调整。这通常意味着为大屏幕设置更大的基准字号，而我们使用的相对单位也会导致其他文本尺寸相应地改变。

html {
  font-size: 100%; // = 16px
}

@media screen and (min-width: 768px){
  html {
    font-size: 112.5%; // 18px
}

在上面的例子中，我将基础字型大小设为16像素，并在典型的平板屏幕宽度（纵向持握时）将其更改为18像素。遗憾的是，事情并没有这么简单。我们已经了解到，行高和行宽需要调整以适应任何字型大小的变化。但在移动优先的设计中，还有另一个问题。曾几何时，人们不再只做移动优先，而是转向了"移动唯一"。有一段时间，甚至桌面网站也使用汉堡菜单图标，将所有的导航项目隐藏其中。从可用性的角度来看，这完全是荒谬的。这种做法仍在移动网站上使用，我相信你在桌面网站上也还会遇到这样的例子。导航是浏览网站的主要工具，因此除非绝对必要，不要隐藏它。至今仍如此普遍的单栏布局，（我认为）也是"移动唯一"趋势的遗留物。我在本书中多次提到"内容优先"的概念，并在关于页面布局的章节中对单栏布局提出了质疑。现在，当我们探讨响应式网页排版时，正是将拼图拼合起来的时候。

移动优先、纯移动设备、内容优先，搞什么鬼?!

移动优先作为一种理念能够行之有效，是因为它迫使我们摒弃一切非必要的元素。在移动设备上，甚至连广告都会感到无所适从；它们只能以狭长但横跨整个屏幕的横幅形式出现。这固然是好事。然而，这种做法似乎仅停留在理论层面。以移动优先为出发点进行设计，并明确何时该脱离这种思维方式，是颇具挑战性的。这正是为何许多网站最终演变为单栏式布局，并将导航隐藏于图标之后。秉持移动优先的理念并无不妥，但在某个阶段必须适时调整。对我而言，这个转折点通常是网站从平板设备向桌面端过渡之时。这意味着移动版和平板版网站将共享大部分设计元素，而桌面版网站则会是另一番景象。

到目前为止，我们从内容出发，塑造了完美的段落，设计了标题，甚至还设计了桌面版网站布局。鲜少提及移动优先，更多的是内容优先或以内容为中心。这促使我们围绕内容来设计网站，并且我们首先为其最佳形态——最大的画布，即桌面设备，进行了设计。我个人设计网站的指导原则是：不要为了适应某个概念而牺牲内容。这意味着我希望为每种设备设计网站的最佳形态，无论是在何种屏幕上，都应以内容为中心。我确实运用了移动优先的理念，但多数情况下我会将其倒转。我会将桌面版的设计进行简化和调整，以适应较小的屏幕。等等！这难道不是与移动优先背道而驰吗？这难道不是“优雅降级”吗？其实不是，因为我使用的是基于移动优先构建的框架（我自己的Gutenberg网页排版入门工具包）；我只是选择优先关注桌面设备。这样看来，移动优先是一种增强以内容为中心方法的理念，而非限制。我认为关键在于此：移动优先不是教条，而是指导原则、工具和方法论。我们需要如此运用它。无论设备如何，无论屏幕尺寸如何，我们都应设计出更适合内容的形式。

工具选择正确，过程其实并不重要。移动优先是正确方向，但务必记住在某个阶段需要跳脱这种思维。设计桌面网站时不要受移动端限制束缚。善用画布，辅助内容呈现。从单栏布局开始，在大屏幕上扩展为多栏。不要简单地将单栏拆分为多栏，而是将整个画布划分为多个栏目。

像素、em与rem

好的，我们刚刚意识到移动优先（mobile-first）并非我们应该盲目遵循的教条主义做法。 让我们再来探讨另一个迷思。 如今仍有人在争论，在CSS中是否可以使用像素（px）来设置字体大小、宽度和媒体查询（media queries）。有人说em和rem已经过时了，仅仅因为有新生事物出现（我指的就是视口单位，viewport units）。几年前，像素曾备受诟病，因为如果网站的字体大小是用像素设置的，当用户放大网页时，浏览器无法正确放大文字。相反，整个网站都被放大了。（如今的浏览器要智能得多，即使字体大小是用像素设置的，它们也能放大文字。）那时候，em为这个问题提供了解答方案，所以大家开始纷纷使用它。但使用em也有问题。请看下面这个例子，看看你能否解开这个谜题：

HTML：

<h1>For whom the bell tolls <span>by Ernest Hemingway</span></h1>

CSS：

html {
  font-size: 1em; // = 16 pixels
}

h1 {
  font-size: 2em; // = 32 pixels
}

h1 span {
  font-size: 0.5em; // = ?
}

在上述示例中，基础字体大小为16像素。一级标题的字体大小为32像素。那么一级标题中span元素的文本大小是多少？它不是8像素，而是16像素。em单位基于父元素计算，在本例中也就是一级标题。这种情况可能很快就会使人感到困惑。

Rem单位来救场了。Rem意为“根em”，因此它始终基于基础字体大小（即在CSS中为html元素设置的字体大小）。如果上述示例中的所有em单位都替换为rem，那么问题的答案将不再是16像素，而是8像素。这样处理减少了混淆，人们很快就采纳了这种方法。Rem单位拯救了局面。嗯，至少直到视口单位出现之前是这样。

为何应使用 em 单位进行媒体查询
如今，所有主流浏览器都已完全支持像素单位，那为何不将其用于一切场合，包括媒体查询呢？使用像素进行计算远比将 em 转换为像素要简单得多。然而，根据 Zell Liew 进行的一项测试，像素单位在 Safari 浏览器的媒体查询中表现并不理想。⁴⁹ 测试中，他得出结论：em 单位是唯一能在所有浏览器中完美工作的单位，因此我们应该使用它们。至于计算部分，我们可以借助 Sass 来实现。以下是一个非常基础且未经打磨的示例，展示了具体的做法：

$base-font-size: 16;
$tablet-breakpoint: 768;

@media screen and (min-width: #{ $tablet-breakpoint / $base-font-size + 'em' }){
  ...
}

注意：在媒体查询中使用 em 单位有点棘手。如果你的基准字体大小是 18 像素，并且你将媒体查询设置为 min-width: 30em，那么该查询里的代码不会在 540 像素时生效，而是会在 480 像素时生效。em 媒体查询总是基于浏览器的内部默认大小，即 16 像素。

视口单位

就像之前的 rem 和 em 单位一样，视口单位如今也火热起来。CSS 潮人们出于这样那样的理由，呼吁大家停止使用其他任何单位。我已经遇到过一些这样的人了。让我们来详细了解一下这些视口单位。其理念同样十分简单。它们分别是 vw（视口宽度）和 vh（视口高度）单位。1vw 等于视口宽度的 1%，而 1vh 等于视口高度的 1%。一开始可能会有点让人摸不着头脑，但我向你保证，就这么点让人困惑的地方。

流体网站早已存在，因为我们长期以来一直使用百分比作为相对单位。它们让网页设计变得更加轻松。而新的视口单位本应让事情变得更加简单。让我们一探究竟吧。

h1 {
  font-size: 2vw;
}

注意：视口单位基于视口，而百分比单位基于父元素。在撰写本书时，视口单位的浏览器支持（对于最新版本）已经比较可靠，但还不是完全支持。

这种情况下，一级标题将恰好占据视口宽度的2%。这意味着如果我们调整浏览器窗口大小（就像一位真正的网页设计极客——我还没见过普通网民这样做），标题会随之缩放。这便形成了所谓的“流体网页排版”，但首先，我们该使用哪些单位？

对于这个问题，我有一个出人意料地简单的答案：选择对您有效、对用户有效并且所有主流浏览器都支持的单位就好。如果您喜欢用 rem 单位，那就用；如果您偏好 em 单位，也可以用。别让那些 CSS 潮流人士阻碍您使用任何行之有效的工具。就我个人而言，我喜欢用 rem 来设置字体大小（基于模块化比例），而用 em 来设置媒体查询。说到底，它们最终都是像素。

流式网页排版

“自适应网页排版”是一个相对较新的术语。这个想法很有趣：使用视口单位来设置字号，这样网站上的文本就能随视口变化而自动调整大小。让我们一起深入了解这种革命性的、尚未得到充分探索的方法。

HTML：

<h1>Humane typography in the digital&nbsp;age</h1>
<p class="meta">January 25, 2016 · By Matej Latin</p>
<p class="category">thoughts on typography</p>
<p class="intro">An Essay on Typography by Eric Gill takes the reader ...</p>
<p>The typography of this industrial age was no longer handcrafted ...</p>

CSS：

body {
  font-size: 1.3vw;
  line-height: 1.4;
}

h1 {
  font-size: 3vw;
  max-width: 35vw;
}

.intro {
  font-size: 1.5vw;
}

p {
  max-width: 35vw;
}

请访问 betterwebtype.com/book/c9e1 查看实际代码效果。当您缩小浏览器窗口宽度时，请特别注意字体大小的变化。所有文本元素会随窗口缩小而流畅地缩放。

你能看出这个明显的问题吗？当我们缩小浏览器窗口时，段落文本变得非常小：对于桌面使用来说太小了。我们可以尝试借助古老而优秀的响应式网页设计来解决这个问题。

响应式与流动式网页排版
让我们看看如何通过几行简单的媒体查询代码来改进之前的例子。我们不希望文本在某些屏幕尺寸下变得太小。我添加了一个最小宽度为40em的断点作为参数。在该屏幕尺寸下，我切换到了较小的字号，并将段落的宽度限制为60vw。这样，我们在大多数屏幕尺寸下都能获得可读性良好的字号。当然，要达到令人满意的效果，还需要更多的工作（以及更多的媒体查询）。实际上，我用了七条媒体查询才得到了自己满意的结果。请查看 CodePen 上的示例：*betterwebtype.com/book/c9e2*。

流体网页排版是一个有趣的概念，但我目前对它有一些担忧。我可以想象它在多数固定布局中如何运作，但要使其同时具备响应式特性且形态完美，仍需大量工作。这是我们在网页上最接近模仿印刷字体的方式，但真正的问题是：我们真的需要这样做吗？这似乎又让画布来定义内容了。与其专注于内容及其适配的格式，我们却试图调整内容以适应画布。我担心，就像因为移动优先法而设计单栏布局一样，我们也会因为流体网页排版允许那样做，而设计出被画布填满的网站。

流体网页排版的另一个问题在于其预设：屏幕越小，观看距离越近。但我们能否确定宽度为1024像素的屏幕就是平板设备？或者它是否可能是仍在使用的旧式屏幕之一？是的，我们有媒体查询可以控制这一点，但这似乎有点用力过猛而收效甚微。我一定会对此进行更深入的实验。让我们拭目以待"流体网页排版"在不久的将来会有怎样的发展。

让我们的网站具备响应式特性

如我之前所言，通常我并不会按照下一节所述的方式操作，因为我会使用专为移动设备优先设计的自有框架；我只是选择先聚焦于桌面版本。但到目前为止，我们的示例网站尚未涉及任何针对移动端或平板设备的网页设计。别担心，我们依然可以让网站做到移动优先。来看看，我们将基准字体大小设为18像素。现在让我们针对移动端版本将其改为16像素，并仅在较大屏幕上才将字体大小增加至18像素。

$base-font-size: 100; // Gets used as %
$base-font-size-desktop: 112.5;

html {
  font-size: #{$base-font-size + '%'}; // = 16 pixels
  ...

  @media screen and (min-width: 64em){
    font-size: #{$base-font-size-desktop + '%'};
  }
}

我使用64em，相当于1024像素。在手机和平板屏幕上，我通常使用相同的字号。唯一需要调整的是：当屏幕尺寸超出我们"理想"段落的宽度时——也就是第四章设计时设置max-width属性为33埃姆的那个版本——我们需要限制段落的宽度。此外还需调整行高，以确保段落能在最常见的屏幕上呈现良好的视觉效果。

处理移动端和桌面端不同行高但同时保持垂直节奏完整的最简单方法是：

设定断点变量，

决定在哪个断点切换到更大的行高（本例中是平板设备断点），

更新用于设置行高和边距的 mixins，使其同时为移动端和桌面端设置相关属性。

// Responsive variables
$phablet-breakpoint: 37em;
$tablet-breakpoint: 48em;
$desktop-breakpoint: 64em;
$large-desktop-breakpoint: 80em;

$line-height: 1.4;
$line-height-desktop: 1.45;

// Update the mixins
@mixin line-height($number) {
  line-height: #{ $number * $line-height + 'rem'};

  @media screen and (min-width: $tablet-breakpoint){
    line-height: #{ $number * $line-height-desktop + 'rem'};
  }
}

@mixin margin-bottom($number) {
  margin-bottom: #{ $number * $line-height + 'rem'};

  @media screen and (min-width: $tablet-breakpoint){
    margin-bottom: #{ $number * $line-height-desktop + 'rem'};
  }
}

// Limit the length of the paragraph
p {
  ...

  @media screen and (min-width: $phablet-breakpoint){
    max-width: 33em;
  }
}

针对桌面版设定的段落行高为1.45，但在手机屏幕上单行文字的长度会明显缩短。我们需要适当减少行高，因此设定为1.4——这在如此狭窄的栏宽下显得更为合适。此外，我仅在屏幕宽度足够大时才应用最大宽度限制，在本案例中，我将"平板手机"断点设为37 em。至此，我们已确保段落在手机、平板和桌面屏幕上皆能呈现良好的效果。

注意：我们为移动端更改了基准字体大小，使其变为 16 像素，但为台式机保留了 18 像素的尺寸。我们不需要采取任何操作来保持模块化比例完整无缺，因为我们正在通过改变 *html* 元素的基准字体大小来重置它。这样一来，无论基准字体大小是多少，例如台式机上的标题一，其大小始终将是基准字体大小的 3.375 倍（无论基准字体大小具体是多少）。如果我们不改变基准字体大小，就不得不在移动端使用默认值（100%）的字体大小，但在台式机上使用新值（112.5%）的字体大小作为计算模块化比例的基准。这会让情况变得更复杂，因此直接重置主体字体大小要简单得多。

在这个示例中，存在大量重复性工作，例如限制标题的行宽、调整其尺寸和行高等。光是这个主题就足以轻松写成一整本书。建议你最好看看 CodePen 上的成品示例，了解当前阶段的最终代码形态（该章节末尾附有链接）。

更新网格
我们在上一章创建了自己的16列网格。现在需要让这个网格适配手机和平板电脑。我们已经拥有了所需的所有部分，只需以不同方式重新组合它们。让我们直接开始吧。我们的 .main-body 区域（页面除侧边栏外的整个左侧部分）在桌面端宽度为9列，并偏移了2列。它不是全宽，因此为侧边栏留出了空间。但在移动布局中，我们不希望侧边栏出现在那里。让我们将 .main-body 区域加宽，并将侧边栏下移。

.main-body {
  @include width(14); // The main body is 14 columns wide...
  @include offset(2); // ... and offset by 2 columns on the left

  @media screen and (min-width: $desktop-breakpoint){
    @include width(9); // But only 9 columns wide on desktop to leave room for the sidebar
    @include offset(2);
    float: left;
  }
}

以及侧边栏的以下部分：

.sidebar {
  @include width(13); // The sidebar is almost full-width on mobile
  @include offset(2);

  @media screen and (min-width: $desktop-breakpoint){
    @include width(3); // But only 3 columns wide on desktop
    @include offset(1); // Offset by 1 column only
    float: left;  // We only float it on desktop
  }
}

现在剩下的就相当简单了。我们需要尝试针对特定屏幕尺寸来调整列的位置并改变其宽度。虽然我们从设计桌面布局开始，但我们的网站遵循移动优先原则。我们只是把这个过程反过来罢了。这样，我们就确保了我们的内容在所有主流设备上看起来都很完美。

虽然将导航栏和其他部分调整至响应式不在本书讨论范围之内，但是我们在CodePen的源码中提供了相应内容。您可以在示例网站betterwebtype.com/book/c9中进行查看。

核心要点

移动优先是一种方法；但不要让它演变成教条，也不要在网站的桌面版本中使用移动优先的指导方针。设计你的网站，使其在每个设备和每个屏幕上都能以内容为核心。

在媒体查询中使用 ems 单位，但对于文本和其他尺寸，你可以自由使用任何你喜欢的单位。只要对您和您的用户有效，并且主流浏览器都支持即可。

流式网页排版很酷，但不要仅仅为了使用视口单位而去使用它们。采用最有意义的方法。如果你决定使用流式排版，请确保在所有屏幕尺寸下，文字大小都易于阅读。

第二部分：微观排版

连字

在本章中，我们将深入探讨那些令优秀排版脱颖而出的细节。我们开始探索微观排版的世界，这意味着我们将主要关注影响易读性的各个方面。研究微观层面的排版将助你打造出顶尖的排版样式。它将帮助你理解微小细节所能带来的差异。这正是排版大师与新手的分别所在。

连字。你可能从未听说过它们。或者你可能听过设计师提到它们却不以为意，觉得它们与你无关（阅读本书的网页开发者们）。嗯，你可能从未听说过它们或留意过它们，但我保证你以前一定见过它们。而一旦你知道了什么是连字，你将再也无法忽视它们。你可能会开始注意到它们无处不在。让我们来了解一下连字的定义。⁵⁰

在书写与排版中，连字是指两个或多个字素或字母连接形成一个单一字形的现象。

最常见的连字符号，相信每个人都见过，那就是连字符 “&”。没错，就是这个“&”符号。它形态各异，但其本质上是由字母“e”和“t”组合而成——即拉丁语里的“et”，表示“和”的意思。是不是很酷？

与符号连字的演进。⁵¹

“ampersand”一词是短语“et per se and”（意即：“et 本身 [即是] and”）的变体，后演变为“and per se and”，最终形成了“ampersand”。⁵²

给德语读者的一个有趣事实：“尖锐s”或“ß”也是一个连字（“ſ”和“s”的组合），但就像“&”符号一样，它后来演变成了独立的字符。

连字的起源

连字的起源可以追溯到已知最早的书写体系：苏美尔楔形文字。苏美尔人的过程正好相反，连字最终会被拆分成独立的字符。⁵³其他文化的手抄本也显著地使用连字，这证明连字存在的主要目的是为了在制作这些抄本时节省时间。我们可以从西方排版中看到类似的起源。在古腾堡发明活字印刷机之前，所有的书籍都是手写的。每一本书都是一个独特的副本，通常由修士抄写。你能想象抄写像《圣经》这样的书需要多长时间吗？这花了很长时间。因此，那些抄写这些书的抄写员想出了一些巧妙的方法来加快速度，哪怕只是一点点。他们开始将一些字母组合成单个字形。

印刷机最初被发明时，它几乎完全模仿了之前的媒介：手写书籍。随之，它也模仿了连字的使用。但在印刷中，除了节省时间外，将字母组合成单个字形还有另一个原因：美学。请看以下几组字符。

上图中的字母集并没有明显的问题。Tisa pro 是一款现代衬线字体，设计精良。第一个示例中连字的缺失不如第二个示例（同样的字符集但使用 Georgia 字体）中那样明显。在第二个示例中，我们可以清楚地看到一些字符发生了碰撞。字母 “f” 的顶部明显碰到了字母 “i” 的点，字母 “f” 的顶部碰到了字母 “l” 的顶部，以及两个 “f” 字母彼此相邻，但中间被明显的细小间隙隔开。所有这些现象都在下图中标出了。

Georgia 字体中所有这些不讨喜的特征。

再看仔细一点，注意那些碰撞点。“f”和“i”的组合尤为明显，也特别不好看。这正是研究排版能牢牢抓住你注意力、让你欲罢不能的地方。一旦你开始注意到这些小细节，就再也回不去了。那么，对于这个不好看的字母组合，解决方案是什么？一个连字。或者说一组连字，因为时至今日仍有很多连字在使用。

同样的字母组合，有连字和无连字时。你能找出所有不同之处吗？

我们操作系统中的 Georgia 字体完全不支持连字。虽然有一款支持连字的 Georgia Pro 字体，但它并非免费。而上面原始示例中的另一种字体 Tisa 则支持常见连字。请注意观察上图：第一行字符未启用连字，第二行则启用了连字。是否注意到字母 "f" 与 "i"、"f" 与 "l"、"f" 与 "f" 之间的融合效果？这正是字体设计师为规避不协调字符碰撞所采用的精妙设计手法。

连字的意义是什么？

连字的设计初衷是为了节省时间、提升文本或字体的美观度，并增强可读性。随着书籍的转录和印刷用的手工排版已成为过去时，如今我们只能将其作用聚焦在美观度和可读性上。还记得我们曾说过水平韵律会影响可读性吗？连字在这方面能起到显著的改善作用。请看下图。我们有两句话，它们完全相同。第一句话未启用连字，而第二句话启用了连字。注意标出句子结尾的线条。注意两句话的宽度差异。这种差异就是由连字造成的。这就是为什么连字会影响水平韵律，从而影响可读性。

连字有助于保持水平节奏的一致。

连字的类型

说到网页排版，连字有多种类型，其中主要有两大类：常见连字和自由连字。

常见连字
这些连字主要用于替换"ff"、"fi"、"fl"、"ffi"、"ffl"和"th"等字母组合。默认情况下，大多数网页浏览器会自动启用这些连字。如果出于某些特殊原因你需要禁用它们，可以使用以下代码：font-variant-ligatures: none;

.class {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
}

查看在线示例 betterwebtype.com/book/c10e1.

自由连字
这些是非标准的连字，通常对易读性没有帮助。它们比常见的连字更具装饰性。例子包括“ch”、“ck”、“ct”和“st”等字母组合（请查看下图）。通常最好避免使用它们，但如果确需使用，可以像这样操作：

.class {
  font-variant-ligatures: discretionary-ligatures;
  font-feature-settings: "dlig";
}

请查看以下实时示例：betterwebtype.com/book/c10e2。

自由连字.

上下文连字
上下文连字通常随草书字体提供。在大多数情况下，它们将字母结合起来，使其看起来像是一笔写成。如果你确实要使用草书字体，建议在可用时启用这些连字。以此字体设置的文本看起来会更加真实（见下图的比较）。控制上下文连字非常简单，如下所示（如果你使用的字体支持它们的话）：
font-feature-settings: "calt";

.class {
  font-variant-ligatures: contextual;
  font-feature-settings: "calt";
}

请在 betterwebtype.com/book/c10e3 查看实时示例。

上下文连字。⁵⁴

关于在网页中使用合字的其他注意事项

如果您想寻找启用或禁用连字的最快、最基本方法，请看 `text-rendering` 属性。它将启用常见的连字和字距调整（Chrome 和 Firefox 默认就会这样做）。

text-rendering: optimizeLegibility; // Enables common ligatures and kerning

查看实时示例：betterwebtype.com/book/c10e4。

请注意，如果在文本中设置了字符间距，将不会出现任何连字。浏览器会将其移除。

在Sketch中使用连字

在Sketch中使用连字功能非常简单。您需要先选中想要更改连字选项的文本，例如一个段落。请注意：您需要选中实际的文本内容，而不仅仅是文本图层。选中文本后，前往 Type > Ligatures 并进行选择。

使用默认对应默认设置（Sketch 默认启用了通用连字功能）

使用无以禁用所有连字

使用全部以启用所有连字（包括可选连字等）

糟糕，我的字体不支持连字！

正如本书前面提到的，OpenType格式正在成为新的标准，但市面上仍有很多网页字体不支持连字（或其他OpenType特性）。无需为此惊慌。如果你真的非常喜欢所选的字体，即使它不支持连字，也不必仅仅因此更换字体。我建议先查看最常见会被连字替代的字母组合，从微观层面观察这些组合：字母会相互碰撞吗？这种碰撞是否不协调？如果是，再考虑更换字体；如果不是，请继续使用该字体。

连字在无衬线字体中较为少见。当我最初了解连字时，我希望能处处使用它们。为了炫耀新学到的知识，我抓住一切机会使用连字。但当我发现所选字体不支持连字时，常常感到失望，而这些字体往往正是无衬线字体。关于连字为何在无衬线字体乃至整个数字字型中并不常见，这里有段小故事。

连字在印刷排版中曾普遍使用，这些印刷机与古腾堡发明的机器密切相关。它们当时在节省时间方面仍然有用——排版师不再需要分别寻找“f”和“i”来组合，而是可以直接使用连字“fi”。这种情况在20世纪发生了很大变化。工业化在其中起了主要作用。生产出了不同的印刷机，减少了手工劳动。因此，节省时间的连字就不再需要了。20世纪70年代的照相排版机也普遍避开了连字。这一趋势一直延续到数字革命时期，当时首批生产的计算机不支持用连字自动替换字符。这导致大多数数字字型在生产时完全不包含连字。托比亚斯·弗里尔-琼斯对那个时代的评论是：“世界上最伟大的一些字体正迅速变成最糟糕的字型”。⁵⁵

至于无衬线字体，它们对连字的需求不像衬线体那样强烈。这类字体中较少出现先前我们在衬线体中所见的字形碰撞问题，因而从美学角度看对连字的需求也随之减少。剩下的主要是可读性方面的考量，所以你仍然会发现一些无衬线字体支持最常见的连字，主要是“fi”和“ff”。这种情况在近期生产的字型中更为常见，因为数码革命早期的字体设计师根本懒得设计那些可能永远用不上的东西。

让我们为网站启用连字功能

在本章之后，我们的示例网站就没有太多需要调整的地方了。我们决定使用的FF Meta字体支持常见连字，因此我们只需确保启用此功能即可。我们仅需对正文文字进行此设置：毕竟，我选择用于标题的字型并不支持连字。一般来说，较大字型大小（标题文字通常如此）并不需要常见连字。使用更具装饰性质的其他类型连字——例如自由或情境连字——会更有意义。不过，我们这次并不采用这类连字。

p {
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga";
  text-rendering:  optimizeLegibility;
}

开启连字的最佳方式是使用font-feature-settings属性，因为包括Internet Explorer 10在内的浏览器对此支持最好。我还将此属性text-rendering设为optimizeLegibility，从而启用基本的字距调整，让文本更易于阅读。我仅对段落应用此设置，但对于所有使用相对较小字号的元素都值得这样做。请访问betterwebtype.com/book/c10查看实际效果。

核心要点

解释连字最简单的方式是：将多个字母组合成单一字形。

连字的起源可追溯到拉丁字母出现之前的时代。中世纪抄写圣经的僧侣使用连字以节省时间。

标准连字与自由连字是最常见的两类。正文中应尽可能使用标准连字；自由连字则更具装饰性。

无衬线字体较少支持连字功能。

连字有助于保持文本的水平节奏一致，并对可读性产生普遍的积极影响。

小型大写字母与数字

上一章已经探讨了连字及其对可读性的影响，并阐述了优秀排印师与普通排印师在此处的差异。随着每一章的深入，我们将逐步探索排版的精微细节——小型大写字母与数字样式无疑是排版领域中极为微观的层面。

我依然记得初次接触小型大写字母的经历。那是很久以前，我在微软Word里偶然注意到一个特定按钮。点击之后，我的文字全部变成了大写字母，但总觉得有些不对劲——有种说不出来的怪异感。这些文字看起来比周围的其他文字更细，在正文中反而有种脱颖而出的感觉。当时不明白发生了什么，只好再次点击同一个按钮恢复原样。现在我才知道，当时启用的就是小型大写字母功能。确切地说，那是伪小型大写字母，不过这部分内容我们会在本章稍后详细探讨。

我也记得当时自己总是避免使用那些带有奇怪、老式数字的字体。我完全不知道那些是什么，但就是觉得它们看起来很过时，所以总是避开不用。Georgia 就是默认使用这种数字样式的字体之一，因此我从来没用过它。那时还是网页设计的早期阶段，我们只能使用网页安全字体。直到我开始学习排版，才了解到不同的数字样式以及它们各自的用途。原来数字样式种类繁多，每一种都有其特定用途。在本章第二部分，我们将探讨等高数字、旧样式数字、比例数字和等宽数字。也会简单介绍序数和分数，以及如何在网页上使用它们。

好了，我们直接开始。并排来看两段文字。

比较这两个段落。其中一个开启了小写大写字母和旧式数字的功能。您也可以在 betterwebtype.com/book/c11e1 查看实时示例。

现在请尝试回答以下问题。查看上方的示意图，如有必要可多看几遍。

哪个看起来更精致？

哪个看起来更匀称？

你注意到这两者之间有什么主要区别吗？

这些问题有点棘手，因为你或许能自信地回答前两个问题，但却没有注意到第三个问题所询问的主要差异。

要想在排版方面有所进步，你真正需要的是了解其本质和缘由，并掌握得力的工具。工具的种类多种多样，可能是一款支持大量OpenType功能的字体，也可能是一个帮助你生成代码并打造排版更精良的网站的工具。正因如此，我们才要学习这些看似细微的知识点。也许乍看之下似乎无关紧要，但在排版领域中，正是这些微小的细节造就了天壤之别。

内在品质是绝对品质的一部分，没有它，事物就会显得粗制滥造。用户或许不知道原因何在，但他们总是感受得到。
——埃里克·施皮克曼

小型大写字母

小型大写字母正如其名——它们是常规大写字母的缩小版本。由于尺寸较小，它们采用与小写字母相同的高度和字重设置。它们主要用于正文文本中，因为我们希望它们能更好地融入其中。再看一下上图。你注意到第一段中的缩写如何显得突出吗？这不是我们想要的。我们希望它们尽可能地融为一体。这能让文本显得专业而匀称。

伪小型大写字母与真小型大写字母
你可以使用 CSS 将网页上的任意文本转为小型大写字母。但大多数情况下，这些并非真小型大写字母，而是所谓的“伪小型大写字母”。“伪”这个说法听起来不妙，事实也确实如此。CSS 只是单纯缩小了实际大写字母的大小，所以它字面意义上是在伪造小型大写字母。而且，我个人认为，这甚至比使用标准的大写字母还要糟糕。

对比真正的小型大写字母与伪小型大写字母。注意伪小型大写字母看起来比其对应的大写字母要细得多。真正的小型大写字母在字重上则没有差异。

仔细观察这些字母的细节。比较它们的字重。上面的"Bob Dylan"使用的是Tisa Pro字型，该字型通过OpenType特性支持小型大写字母。请仔细对比常规大写字母"B"与其对应的小型大写字母版本。小型大写字母"B"单独看起来字重较大，但与常规大写字母相比，其比例完全协调。更重要的是，它与其他小写字母的搭配也十分均衡。下面的"Bob Dylan"使用的是Georgia字体，该字体本身不支持小型大写字母，因此我通过CSS强制实现了这一效果——即产生了所谓的"伪小型大写字母"。再次对比两个"B"字母：无论较粗还是较细的笔画部分都截然不同且比例失调。让我们更仔细地观察这一点。

伪小型大写字母“A”仅仅是常规大写字母“A”等比例缩小的版本，因此字母较粗的部分明显比应有的更窄。而在真正的小型大写字母中，这个比例保持不变。

请看下图。当伪小型大写字母被实际用于正文时，情况会变得更加糟糕。它们会让这些字母显得更加突兀。原因还在于这是错误的。

请注意伪小型大写字母实际上在文本中很显眼：这与它们的设计初衷背道而驰。

你可以通过访问 betterwebtype.com/book/c11e2 查看真实与伪小型大写字母的实际范例。

如何正确使用小型大写字母
小型大写字母似乎是排版领域在数字转型期初期被完全遗弃的事物之一。直到最近它们才开始流行起来。就排版而言，网络似乎终于开始摆脱稚气了。

检查字型
要使用真正的小型大写字母，您所选的字型需要支持它们。这类字型很少见。如果支持，通常意味着它们的文件大小（Kb）会重不少。当包含小型大写字母时，它们通常以 OpenType 功能的形式提供。因此，请先检查这些功能。如果没找到，就检查是否有同名但添加了“SC”或“Small caps”标识的另一种字体。例如，TypeKit 上的 P22 Underground 就附带了许多不同字重的小型大写字母附加字体。

在P22 Underground字体中，小型大写字母是作为独立字型提供的。

寻找一款小型大写字母型
许多字体并不包含小型大写字母型，或者不支持其作为 OpenType 功能。在这种情况下，您仍可以尝试在其他地方寻找一款与之匹配的小型大写字母字体。这里的重点是匹配。不要使用大致相近的字体。如果您使用 Garamond 作为正文字体，您需要的便是 Garamond 小型大写字母。我曾经在 fonts.com 上找到一款基于 Garamond 的“Garamont”字体，其中包含了小型大写字母。我对两者进行了检视和比较，得出的结论是它们是兼容的。

启用小型大写字母
如果您的字体支持将小型大写字母作为OpenType特性，您可以使用以下CSS来启用它们：

.class {
  // Change lowercase to small caps, leave capital letters unchanged
  font-variant-caps: small-caps;
  font-feature-settings: "smcp";

  // Change all letters into small caps (including capital letters)
  font-variant-caps: all-small-caps;
  font-feature-settings: "c2sc", "smcp";
}

如果它不具备，而您需要为此使用单独的字型，您就需要通过 font-face 单独加载那个字型。

如果无法通过任何一种方式使用真正的小型大写字母，那就干脆不要使用。改用常规的大写字母即可。千万不要使用伪小型大写字母。

在 Sketch 中使用小型大写字母
Sketch 默认不支持 OpenType 特性，因此无法在软件内部使用它们。但有一个变通方案。选中你想转换为小型大写字母的文本（实际的文本内容，不仅仅是图层），然后点击 视图 > 显示字体。一个窗口会弹出，你的字体已经被选中。

窗口左上角有一个带有齿轮图标的小按钮。这就是你在 Sketch 中访问 OpenType 魔法的入口。点击它并选择Typography。将弹出另一个窗口。所有 OpenType 功能都列在那里（你的字体支持的功能）。

本例中我们需要小型大写字母，因此前往大写字母区段并选择小型大写字母。这会将大写字母转换为小型大写字母。如需将小写字母转为小型大写字母，可前往小写字母区段并启用小型大写字母功能。此操作仅转换小写字母，常规大写字母将保持不变。

图示

数字有两种常见样式：旧式数字，其主体与字体的x字高相匹配，具有升部和降部；等高数字，其高度与大写字母一致，没有升部和降部。数字革命后，对线数字几乎成为标准。说“几乎”，是因为正如我们在Georgia字体中看到的那样，有些字体默认使用旧式数字。

旧式数字（Old-style figures）
如今，旧式数字（通常称为文本数字）已相当罕见。与小写字母体一样，它们在数字革命开始时就被遗忘了。它们或许被称为旧式数字，甚至看起来比其替代品（对齐式数字）更经典一些，但它们有着与小写字母体相同的目的：与正文融为一体，从而不影响整体的平衡。

它们在网页排版中有三种形式：

作为主字体的默认数字样式

作为一项OpenType功能

作为独立小型大写字体的一部分

例如，Merriweather这款字体默认就包含旧式数字样式（通常缩写为OSF），而我们用于示例网站的FF Meta字体也通过OpenType功能提供了支持。独立的small caps字体通常也默认采用旧式数字。

当它们作为OpenType特性出现时，可以用这段代码启用：

.class {
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum";
}

或许可以把它们想成是小写数字。所以，它们理应用在正文内。还记得我说过，需要阅读文本内容，才能产出好的排版吗？这正是派上用场的地方。如果你阅读文本时发现内容中充满数字，不妨使用那些以衬线数字（旧式数字）作为默认样式，或是支持这种样式作为OpenType功能的字体。实际看看案例：betterwebtype.com/book/c11e3。

等高数字（Lining figures）
等高数字（也称为现代数字）之所以称为“等高”，是因为它们从大写字母的顶线延伸到底线。其高度是统一的。正因如此，它们会干扰正文内部的平衡性，因此应尽可能避免使用。它们在表格和电子表格中效果更好。如果您的字体默认样式为旧式数字，但您需要在表格中使用等高数字，可以使用以下代码启用它们：

.class {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum";
}

现代数字体有两种版本：比例式（默认）和表格式。比例现代数字体完全适用于全大写的标题，或在需要强调数字时使用。

要启用比例等宽数字，需要使用以下代码（如果它们是作为 OpenType 字体特性提供的）：

.class {
  font-variant-numeric: proportional-nums;
  font-feature-settings: "pnum";
}

相反，等宽数字非常适合用于数字密集的文档，尤其是在多行多列设置时。与比例数字不同，所有数字（从水平方向看）占据相同的空间，无论数字本身的宽度如何。在这种情况下，数字1周围相比大多数其他数字有更多的白空间。正因如此，即使不同行的数字也能够做到完全对齐。

启用表格式等宽数字，可使用此代码（如果该功能作为OpenType特性提供）：

.class {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

在betterwebtype.com/book/c11e4查看比例和表格数字的在线示例。

在 Sketch 中使用不同样式的数字
我们可以像使用小型大写字母一样，在 Sketch 中使用不同样式的数字。如果你所用的字体支持此功能作为 OpenType 特性，请先选中你想更改样式的数字。前往视图 > 显示字体，然后点击弹出窗口中的齿轮图标。选择排版，进入数字大小写区域，即可在旧式数字和等高数字之间切换。若要在成比例的等高数字和表格等线数字之间切换，请前往数字间距区域。

确保利用好所有这些样式，让您的排版和谐统一，文本易于阅读。

分数（Fractions）
OpenType有一个特性，可以将我们输入的分数（例如1/4）取代为排版正确的字形。请参见下图。

如果您使用的字体支持分数显示（作为一个OpenType功能），您可以使用以下代码启用该功能：

.fraction {
  font-variant-numeric: diagonal-fractions;
  font-feature-settings: "frac";
}

查看实时示例，访问betterwebtype.com/book/c11e5。

在Sketch中使用分数
要在Sketch中使用分数，请如前文屡次提及的那样，进入那充满魔力的排版窗口。进入后，找到上下文分数形式，并选择对角线。

序数（Ordinals）
写成 1st、2nd 等是可以的。但更好的做法是将它们替换为带有恰当样式的序数——一个标准数字，其中“st”部分以上标形式展现。如果你的字体通过 OpenType 功能支持此特性，你可以在 CSS 中实现，示例：

.ordinal {
  font-variant-numeric: ordinal;
  font-feature-settings: "ordn";
}

你只需要用这个类包裹 'st' 部分，像这样：

<p>He came in 1<span class="ordinal">st</span>.</p>

在 Sketch 中使用序数
要在 Sketch 中使用序数，请进入神奇的 排版 窗口。进入后，找到 垂直定位 选项并选择 序数。

让我们把小型大写字母和数字字体弄对

小型大写字母
与上一章一样，我们主要将在示例网站的主体文本上进行操作。首先是小写字母。我将创建一个新类并相应使用它。FF Meta 字体通过 OpenType 特性支持小型大写字母，因此我会用它来启用此功能。我还会为它们添加一点字母间距，因为通常建议对大写字母这样做。

.small-caps {
  font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
  letter-spacing: 0.05em; // Equals 5%
}

现在，无论何时我们需要在正文文本中使用缩写，都可以为其应用small-caps类。这在任何主流内容管理系统（如WordPress、Drupal）中都可以轻松实现。

数字、分数与序数
FF Meta 默认使用旧式数字作为其数字样式，因此我们无需为正文文本特意启用它们。我在项目初期就做了调研，所以我知道我想要的就是这样一款字体，同时也明白这里不需要用到等高数字。

FF Meta 字体也支持通过OpenType特性显示分数和序数，因此我也会为这些功能创建相应的类。同样，这些类必须能够通过我们用于管理内容的任何CMS进行访问。负责内容管理的人员也需要接受适当教育，了解何时以及为何使用哪个类。或者，我们可以编写一个JavaScript代码片段，来检测这些情况并根据需要应用相应的类。让我们首先创建一个专用于分数的类：

.fraction {
  font-variant-numeric: diagonal-fractions;
  -moz-font-feature-settings: "frac";
  -webkit-font-feature-settings: "frac";
  font-feature-settings: "frac";
}

还有另一个用于序数（注意厂商前缀；仍建议使用它们以获得更好的支持）：

.ordinal {
  font-variant-numeric: ordinal;
  -moz-font-feature-settings: "ordn";
  -webkit-font-feature-settings: "ordn";
  font-feature-settings: "ordn";
}

我们已经准备好在网站上使用小型大写字母、分数和上标数字，而且无需考虑数字样式。现在让我们在页面中添加一些示例，并相应地应用这些样式类。您可以在 betterwebtype.com/book/c11 上查看示例网站。

核心要点

小型大写字母是常规大写字母的缩小版本，最适合用于正文中的缩写。其目的是使它们更好地与正文字母融为一体，避免过于突出而扰乱阅读节奏。

使用小型大写字母最常见的方式是通过OpenType特性。此外，它们也可以作为独立的字体提供。

"假的"小型大写字母是调整过大小的常规大写字母，因此在视觉重量上与其他字母不相称。应不惜一切代价避免使用。

数字主要有两种样式：旧式数字（或称文本样式）和线性数字（也称为现代样式）。线性数字进一步分为比例数字和表格数字。正文中理想情况下应使用旧式数字。

标点符号

这一章可能会让你有些惊讶。标题不言自明——是的，这是一章关于标点符号的内容。我第一次读到这个时很惊讶，你可能也是。在此之前，我从未想过标点符号是排版的一部分。我甚至不知道引号有不同的种类，或者破折号有不同的宽度。我是在读了罗伯特·布林赫斯特的《排版风格要素》（The Elements of Typographic Style）之后才知道破折号的。在那之前，我一直认为标点符号是英语课的一部分。事实证明，大多数人（从排版的角度看）对标点符号的理解是完全错误的。

我认为这主要有两个原因。学校并未教导我们如何使用排版意义上的正确标点。没错，老师会反复提醒我们何时使用逗号及其他基础标点符号，但也就到此为止。另一个原因是所有这些标点符号都隐藏在我们难以记住的键盘快捷键背后。QWERTY键盘本就源自一个不佳的设计，却最终成为了标准。键盘上只保留了一种引号的位置——直引号。那些带花边造型的引号未被纳入。破折号的情况也是如此。键盘上的一个按键对应两个横线符号，但通过包含该键的快捷键组合，还能调出更多隐藏选择。

本章我们依然身处微观排版的领域。我敢说，这已经是微观到极致的范畴了。正如我总在这些微观排版章节中提到的，初看之下或许差异不大，但排版正是关于细节的艺术。你愿意投入多少时间探索这些细节，完全取决于自己。

破折号

如果你曾经和我一样，可能只用一种短横线：连字符号（-）来应付所有情况。在代码中我们可以用这个符号代表一切：减号、连接两个单词的破折号、"to"的替代符号。但从排版角度来看，这些用途都有不同的破折号对应。总共有五种不同的破折号，多数字体至少包含其中三种。刚才提到的连字符（-）、全角破折号（—）和半角破折号（–）。通常还有专用的减号符号（-），但它不被视为破折号。

连字符与三种主要破折号

全角破折号
全角破折号是这类符号中最宽的一个。它很可能也是被误用最多的一个。其宽度与一个全角（em）的宽度相匹配，因而得名。在叙事中，全角破折号可用作说话者的指示符。—"为什么排版很重要？" 他询问道。全角破折号更常见的用法是在引文后标示作者，像这样：

这是一句著名的引言
——作者

长破折号后面最好跟一个窄空格（没错，我们这里讲的是空格，它的种类也有差异，这部分内容稍后详谈）。

如何用HTML正确实现：

<blockquote>
  <p>This is a famous quote.</p>
  <footer>&mdash;&thinsp;Author name</footer> // Notice the thin space
</blockquote>

全角破折号也可作为逗号的替代符。同样地，它为读者表达了一种停顿，可能比逗号的停顿稍长一些。常用作插入语或补充说明的标识，例如：“使用全角破折号——即三种横线中最长的那种——来表达比一对逗号更强的停顿。”

短破折号
短破折号的宽度恰好是长破折号宽度的一半，同时也与另一个排版单位——en的宽度相匹配。又一次，这正是它名称的由来——排版在这方面非常注重实用性。与长破折号的情况类似，短破折号也常被误用。其主要用途是替代“至”这个词。因此，我们可以用6–5 p.m.来代替6 to 5 p.m. 请注意短破折号两侧都没有空格。

若使用"from"一词表示范围开端，请用"to"连接两个值而非短破折号。正确：from 1939 to 1945。错误：from 1939–1945。短破折号应用于表示任何数值（例如：第33–40页）及非数值（例如：单元A–D）之间的范围。

短破折号在表示两个单词之间的关联或对比时也必须使用（例如：共和党–民主党分歧）。不要用两个连字符（--）替代短破折号，或用三个连字符（---）替代长破折号。这是打字机时代的旧习，且是错误的。请务必使用符合排版规范的破折号。

在HTML中使用短破折号的方法如下：

<p>5&ndash;6PM</p> // No spaces

连字符 (Hyphen)
最后，我们讲讲连字符 (Hyphen) —— 这个符号常被误用来代替全角破折号 (em dash)、半角破折号 (en dash) 和减号 (minus symbol)。它是当你按下键盘上带有“两条小横线”的那个键时（人们通常这样描述这个键），得到的默认符号。其宽度是全角破折号的四分之一。它主要用于单词的连字（因此得名），以及连接两个或更多个单词：如微调 (fine-tuned)、叛军支持的 (rebel-backed)、五美元钞票 (five-dollar bills) 等。

引号（Quotation marks）

直引号与弯引号
信不信由你，就像破折号一样，引号也不止单引号和双引号这两种。你键盘上的直引号通常被称为哑引号（" 和 '），也常被用作英寸符号。智能引号或弯引号（“ ”‘ ’）才是排版上正确的引用标点符号。在编程中无需使用智能引号。但当你要引用某人所说的话，或者想引起读者对某个不寻常术语的注意时，就应该使用它们。

输入弯引号有点麻烦。键盘上的任何按键都没有它们，所以要花一些时间记住快捷键。有些写作工具/平台（Medium、DropBox Paper）会尽力自动将直引号替换为弯引号。上述两种工具在这方面都做得很好。以下是如何在 HTML 中正确使用弯引号的方法：

<p>&ldquo;He left yesterday.&rdquo;</p> // Double quot. marks

或

<p>&lsquo;He left yesterday.&rsquo;</p> // Single quot. marks

记住哪个是哪个有个简单方法：l/r（左/右），d/s（单/双），quo（引号）。

& + l/r + d/s + quo + ;

以下是键盘快捷键。我的建议是：尝试使用它们直到记住为止，或者使用一个工具，能根据需要很好地替换这些标记。我通常会在其中一个工具中编写最终会出现在网站上的内容，然后将其复制到 HTML 中。这样，我就避免了手动将直引号替换为智能/花式引号的繁琐工作。

撇号（Apostrophe）
用一个直印单引号来代替撇号同样是错误的。应该使用正确的单右引号：’。让我们看另一个同时使用引号和撇号的例子。

<p>&ldquo;I don&rsquo;t want to go&rdquo;</p>

直引号与撇号
“直引号”在书写英寸、英尺等单位时更合适，像这样：

但它们也并非排版上正确的标点符号。表示这些测量单位时，应使用所谓的上标引号。

<p>He&rsquo;s 6&prime;4&Prime;</p>

表示英尺和英寸的上撇号之间唯一的区别在于双引号用大写“P”来表示，因此在HTML中使用时要务必小心。

那直引号有什么用？问得好。它们用于代码。仅此而已；别在其他场合使用它们。

你应该使用的其他标点符号

间距

发丝空格（Hair space）
可配合破折号使用，但并非强制。发丝空格是可用空格中最细的一种。

窄空格也常与短破折号配合使用。其宽度通常等于一个 em 的 1/5 或 1/6。

不换行空格
不换行空格在网页设计中非常有用。我一直在使用它。在文本中，如果一次换行仅将一个单词推到新的一行，这在美学上是令人不悦的。以下是两个在网络上经常发生的例子。

这些被称为寡行。寡行被认为是排版效果不佳，因为它会在段落之间或页面底部留下过多的空白。这会干扰读者的视线并降低可读性。⁵⁶ 在现代响应式网页中，几乎不可能完全避免寡行。但是一个聪明的解决方法是，在段落最后一个词和倒数第二个词之间插入一个不换行空格。就像这样：

<h3>Exploring London at night</h3>
<p>... as he did not know that he has already done it.</p>

不是只把"it"这个词挤到了新的一行，而是"done"和"it"都被挤到了新行。这并不完美，但比只有"it"单独一行要好得多。

数学标点
使用星号 (*) 表示乘法或使用斜杠 (/) 表示除法在排版上是错误的。表示乘法必须使用乘号 (×)，而表示除法则使用除号 (÷)。同时，别忘了使用正确的减号 (−)，它比连字符更宽更粗。

排版中有大量符号，每个符号都有其特定的用途。由于键盘空间有限，许多符号被省略了，久而久之它们逐渐淡出了日常使用。它们被相似的符号所取代，非对称引号与对称引号就是典型的例子。如今，排版在很大程度上被滥用了，至少大多数情况如此。为了清晰传达信息，同时与平庸和滥用划清界限，我们必须使用正确的标点符号。减号不同于连字符，三点省略号不等于三个句号，撇号也不同于单边非对称引号。此外，不要忘记不同宽度的空格——某些符号应搭配特定宽度的空格，而非默认空格。例如不换行空格，即使两个单词之间需要换行，它也能将其紧密连接。以下列出所有能令文本排版规范化的符号列表。

符号 | 名称 | HTML code
− | 减号 | &minus;
– | 半角破折号 | &ndash;
— | 全角破折号 | &mdash;
… | 省略号 | &hellip;
÷ | 分区 | &divide;
× | 尺寸 | &times;
| 发丝空格 | &hairsp;
| 窄空格 | &thinsp;
| 不换行空格 |
’ | 撇号 | &rsquo;

让我们确保我们的标点符号是正确的

坦白说，对标点符号我们能做的其实很有限。当然可以编写 JavaScript 函数在必要时将连字符替换成全角破折号，但这样做工作量较大。让标点符号在排版上保持正确的最佳方法，是先去学习它们，然后正确地使用。不妨给自己制作一份速查表或类似的参考资料，以便随时查阅。

目前为止，我已经在我们示例网站的示例网站中使用了正确的标点符号用法，但现在想为引述内容添加引号。需要记住要用正确的智能引号，对吧？那么，我们就在HTML中添加它们。

<blockquote class="big-quote">
  &ldquo;SpaceX is working on Dragon 2, a capsule designed to bring crew to and from the <span class="allsmallcaps">ISS</span>&rdquo;.
</blockquote>

上面的代码会产生以下结果：

上面的截图中有些地方不太对劲，你发现了吗？没错，引号把第一行向内推挤，破坏了水平节奏。让我们用改变段落缩进的小技巧来解决这个问题。我给 .big-quote 类添加了 text-indent: -0.5em;，效果如下：

好些了，但还不够理想。在这种情形下，段落缩进-0.5em过大了。咱们试一下-0.4。

没错，就是这样。第一行的字母“S”现在与下面几行的字母完美对齐了。太棒了！

核心要点

如果我们不采用排版上正确的标点符号来收尾，那么我们在优化网页排版方面付出的所有努力都将付诸东流。

破折号共有五种类型，每种字体中至少包含三种：全角破折号、半角破折号和连字符。每种都有其特定的用途。

直引号（也称为哑引号）在排版上是不正确的，只应在代码中使用。表示引用时，应使用花引号（也称为智能引号）。

不要用直单引号代替撇号。请使用花单引号。

首字下沉

首字下沉的历史

首字下沉——段首采用大型字母的排版方式——自公元4世纪早期的抄本起便已投入使用。它们是首字母大写的一种变体，其名称源自拉丁语“initialis”，字面意为“立于开端”。⁵⁷ 首字下沉通常下嵌至文本数行之内，因而得名。早期的手抄本及印刷书籍常以繁复装饰为特色，在某些极端情况下，首字母大写甚至占据抄本的整个页面。

但在那时，它们的作用并非仅限装饰。它们有助于提升文本的可读性，用以标记手稿中重要段落的开端，以便读者轻松记忆（或记住阅读进度的节点），尤其是因为在早期拉丁文中，尚未使用标点和空格来分隔句子。这在当下难以想象，毕竟我们早已习惯这些元素。古腾堡印制第一本印刷版圣经时，就完整模仿了手稿中的首字母大写样式。然而工艺略有不同：正文先印刷在留有空白区的纸张上，首字母随后由抄写员手工添加。再到后来，连首字母也采用木刻或金属活字制作了。虽然随着标点标准化的发展，其原有功能逐渐弱化，但它们仍在数百年间保留在大多数印刷品中，唯余装饰属性。那时候的首字母大写装饰性非常强，不妨看看这个来自罗马式圣经的首字母“L”范例。

既然在網頁上已不需要用首字下沉來標示文本重要部分的開頭，那麼它們就只剩下裝飾目的了。我們來看看該如何實現這些效果。

网页上的首字下沉

虽然首字母下沉在网页上纯属装饰，但我认为它们能为网站增添一抹点睛之笔。我曾在"Better Web Type"网站以及个人网站的早期版本中使用过。在网页上实现首字母下沉有几种方法，但我们只探讨其中三种，每种都有其优缺点。让我们深入了解一下。

CSS & HTML
这是一种将首字母下沉融入设计的非常简单的方案。此示例紧密遵循了 Chris Coyier 在 CSS-tricks 网站上描述的实现方式。⁵⁸ 其思路是：我们将首字母包裹在一个 span 标签中，并为其添加一个类。这样，我们就可以随心所欲地为其设定样式。

<p><span class="dropcap">H</span>ello there. My name is Matej and I’m a designer. I live in London...</p>

随后，我们可以把这个应用到那个首字母上。

.dropcap {
  float: left;
  font-size: 35px;
  line-height: 30px;
  padding-right: 4px;
}

这种方法效果不错，但确实需要借助额外的代码标记才能实现。上面的示例代码大致如下：

请查看实时示例：betterwebtype.com/book/c13e1。

纯 CSS 方法
另一种获得相同结果的纯 CSS 方法是使用 CSS3 的魔力。我们可以使用一个首字母伪类。其代码与前面的示例非常相似，但我们不再需要那个额外的 span 元素了。

<p>Hello there. My name is Matej and I’m a designer. I live in London...</p>

而CSS则简单如：

p:first-child:first-letter {
  float: left;
  font-size: 35px;
  line-height: 30px;
  padding-right: 4px;
}

您可以在betterwebtype.com/book/c13e2查看实时示例。

这两种方法的缺点在于，它们都需要通过微调像素级别（从字面意义上）来手动设置样式。我们必须将首字下沉恰当地放置在段落的起始位置：深入数行，并与文本块的外边缘完美对齐。我们可以尝试使用像素以外的单位（例如 ems），但最终总是会碰到需要手动调整的情况。如果要对它应用响应式网页设计，为了让这些效果在不同尺寸的屏幕上看起来无误，我们可能会增加许多额外的工作量。不过，还有另一种方法，但它需要借助一点 JavaScript 的帮助。

JavaScript实现方式
理论上，我们可以使用CSS的`initial-letter`属性，以更好的方式在段落中实现首字下沉效果。有了它，我们可以简单地设置我们希望首字下沉占据多少行的高度。如果我们将其设置为2，那么首字下沉就会占据两行的高度。例如，我们可以轻松地为更大的屏幕将其改为三行。但有一个问题。主流网页浏览器尚未完全支持此属性。不过，没关系，我们仍然可以使用一种非常相似的方法。

Dropcap.js 是一个JavaScript代码片段，可以很好地处理这个问题。我们仍然需要使用额外的标记符来应用它，但到目前为止它确实能产生最佳效果。我的建议是，在initial-letter属性获得更广泛的浏览器支持之前使用它（这可能需要一段时间）。让我们来看一个例子。根据Dropcap.js文档，我们需要将首字母包装在一个带有"dropcap"类的span标签中。

<p>
  <span class="dropcap">H</span>ello there. My name is Matej and I’m a designer. I live in London...
</p>

我们需要加载 Dropcap.js 脚本（显然）。

<script src='./dropcap.min.js'></script>

我们已经可以开始使用它。只需将其添加到 <script></script> 标签内即可。

var dropcaps = document.querySelectorAll(".dropcap");
window.Dropcap.layout(dropcaps, 3);

上述示例将为页面中每个.dropcap类应用一个三行高的首字下沉效果。太棒了！

请访问 betterwebtype.com/book/c13e3 查看实例。

不过，关于 Dropcap.js 我们还有很多可以探索的地方。现在让我们观察一下 dropcap 函数的定义方式。

window.Dropcap.layout(dropcapRef, heightInLines, baselinePos);

请看上面代码示例末尾的 baselinePos 参数。其默认值与 heightInLines 参数相等，这意味着首字下沉将与第三行文本对齐（就我们目前的示例而言）。若将该值更改为1，首字下沉将变为上浮样式。此时它会突出于正文文本之外，这为我们提供了另一种可用的首字母变化形式。

不妨访问这个实际的例子：betterwebtype.com/book/c13e4。

让我们为网站添加首字下沉效果

那我们先看看它们是否适合吧。我们示例网站的页面布局本身就相当动态化了，所以首字下沉可能根本不适合。我建议各位额外注意，确保这种首字母下沉的设计能提升这个网站的美学价值，纯粹因为它们的作用就是装饰性的。如果做不到这一点，那各位或许就不该使用它们。

让我们用Dropcap.js尝试制作下沉首字母，这样我们就可以使用上面介绍的相同代码。先来尝试一个三行高的下沉首字母。

这个太大了。我开始觉得这页不适合下沉式首字母了。试试把高度设为两行。

这样好一些，但我还是不太满意。我担心页面上会多出不必要的视觉重量，而且首字下沉并没有达到它应有的装饰目的。在这个例子中，它反而增加了视觉噪音，所以我决定完全不用它。当你考虑使用首字下沉时，脑子里应该要过一遍这种思考过程。如果它起不到该有的作用，就干脆不要用它。

通过对首字下沉的探讨，我们完成了整个设计流程的总结。我们从内容出发，围绕其构建了一个响应式的移动端优先网站。我们确保内文字型与内容气质相符，并选择了与之形成对比的标题字体。运用模块化比例为文本内容的不同部分赋予尺寸层级，同时构建了基于完整响应画布的16列网格系统。我们甚至细心地在内文中使用连字处理，缩写部分采用小型大写字母，数字则选用旧式数字。这一路走来，我们的最终成果是一个动态且以内容为核心的网站。这虽是个虚构示例，但此类网站的访问者定会享受阅读其中的内容。请访问最终示例网站 betterwebtype.com/book/c13。

核心要点

首字下沉是所谓“首字母大写”的一种样式，这种样式会将字母嵌入文本主体数行。

首字下沉自早期手稿时代就开始使用，那时的首字下沉除了装饰作用，还具备功能用途。由于早期的拉丁文文本中没有标准化的标点符号和字母间距，它帮助人们浏览和阅读书籍。

首字下沉在网页上也能产生美学效果。目前最简单、最一致的使用方法是借助Dropcap.js。

结语

在人人参与排版的时代，每个人都应精进于此。无论谁在为特定媒介制作排版内容，都需要提升自身技能并邀请他人共同努力。在网页领域，这指的是网页设计师与网页开发者。或许还包括大型网站的内容管理者（或无论现今如何称呼）。无论您扮演何种角色，我期许本书能为您带来助益。无论您收获颇丰，抑或重温了排版知识，此刻您已做好准备成为"优质网页排版"的倡导者。请向他人推荐本书，告知他们免费课程的存在。让我们邀请尽可能多的人了解排版艺术。是时候传播理念，告诉人们排版不仅关乎字体选择，绝非可有可无之事，更不应被我们视为理所当然。排版需要特别关注，正如网页设计流程中的其他环节。如今这份责任也落在了您的肩头。您已阅读本书，准备好将新知与他人分享。欣见您与我同行。让我们携手优化网络世界。就此一劳永逸地提升网页排版水准，并说服他人共同践行。设计师与开发者们，我们能够协力创造更好的网页排版，打造更优秀的网页。

附录A：接下来是什么？

反馈
我真心希望你喜欢这本书，但更重要的是，我希望你学到了新的东西。一些你可以立即运用到工作中并能看到立竿见影效果的东西。你现在已经准备好运用新掌握的网页排版技能，为构建更好的网络做出贡献。如果你喜欢这本书（或者即使你不喜欢），我真的很希望你能以书评的形式给出反馈。来自课程学员的真诚反馈，正是促使它不断改进的动力，也让它从一个简单的起点，成长为如今这样一本完整的书。

您可以在以下网址查阅本书：

Amazon：betterwebtype.com/amazon

Goodreads：betterwebtype.com/goodreads

（这些网址将把您重定向到各自平台上的正确网址。）

帮助他人认可这本书的价值。对于任何反馈，我都将衷心感激。

敬请期待
Better Web Type 最初是一门简短的 10 节课电子邮件课程，但大家非常喜欢，因此要求将其写成书。这个项目不断发展，更多精彩内容即将到来。本书发布后不久，我将推出一个博客。所以，如果你还没有订阅 Better Web Type，你可以在 betterwebtype.com 订阅。我将通过更多文章、实验性内容和更多免费资源，更深入地探讨网页排版。确保你不会错过即将到来的所有精彩内容。

邀我参加您本地的聚会
这个项目的灵感来源于我在一次CSS聚会上做演讲的经历。当时我意识到，几乎没有人与那些真正构建网站的群体——网页开发者们——探讨网页排版这个话题。那场聚会中有相当数量的开发者，他们完全沉浸在其分享的内容中。仅从这些演讲来看，我相信我已在世界上为“多培养了几个排版狂热爱好者”贡献了一份力量。聚会结束后，人们不断走到我面前告诉我，他们对此多么着迷，多么迫不及待想要深入探索。

能够这样激励他人真是令人激动，所以我很高兴加入开发者或设计师的聚会（最好是两者皆有）来讨论排版。我随时可以参与英国本地的线下聚会，但要参加国外活动需要多些准备。请通过hello@matejlatin.co.uk联系我，我相信我们能想出合适的安排。

附录 B：关于作者

Matej 是一位设计师，他怀着热忱的好奇心与不懈的创作欲望。这种特质，加之他对简洁易用设计的追求，驱使他从斯洛文尼亚的小海滨城镇出发，一路途经德国、卢森堡，最终抵达英国。他现居伦敦，目前在 Auto Trader UK——英国最大的汽车类在线市场——担任首席 UX/UI 设计师。他的设计之旅始于 13 岁报名参加一个名为“网页设计”的课外班。高中时期，他已开始承接本地客户的自由项目，赚取外快，这些钱大多花在了电子游戏、重金属音乐专辑和糖果上。他在 matejlatin.co.uk 上运营个人博客，定期分享基于其专业工作——主要是设计——的故事与文章。他的作品和文章曾出现在 CSS Tricks、Smashing Magazine、Codrops、Net 杂志、Creative Bloq 和 Web Designer 杂志等平台。

尾注

Typography, [website], 2017, https://en.wikipedia.org/wiki/Typography, (accessed 3 May 2017).

Definition of typography (noun), Oxford Advanced Learner's Dictionary, [website], 2017, http://www.oxfordlearnersdictionaries.com/definition/english/typography (accessed 3 May 2017).

Digital vs Traditional Media Consumption Summary, 2014, http://insight.globalwebindex.net/hs-fs/hub/304927/file-1414878665-pdf/Reports/GWI_Media_Consumption_Summary_Q3_2014.pdf, (accessed 3 May 2017).

J. Tschichold, Clay in a Potters Hand, **as cited in The Form of the Book, Washington, Hartley & Marks Publishers Inc., 1948.

R. Bringhurst, The Elements of Typographic Style, Vancouver, Hartley & Marks Publishers Inc., 2012, p. 196.

J. Tschichold, The New Typography, Los Angeles, University of California Press, 2006, p. 66.

J. Tschichold, The New Typography, Los Angeles, University of California Press, 2006, p. 67.

R. Bringhurst, The Elements of Typographic Style, Vancouver, Hartley & Marks Publishers Inc., 2012, p. 24.

J. Shoaf, The 10 Most Popular Web Fonts of 2015 (And Fonts You Should Consider Using Instead), [website], 2016 https://www.typewolf.com/blog/most-popular-fonts-of-the-year, (accessed 10 May 2017).

S. Coles, Massimo Vignelli’s A Few Basic Typefaces, [web blog], 2016, https://fontsinuse.com/uses/14164/massimo-vignelli-s-a-few-basic-typefaces, (accessed 10 May 2017).

R. Bringhurst, The Elements of Typographic Style, Vancouver, Hartley & Marks Publishers Inc., 2012, p. 24.

What’s OpenType? [website], https://www.typography.com/techniques/opentype/#benefits, (accessed 10 May 2017).

S. Mcbride, Font Events: Controlling the Flash of Unstyled Text, [web blog], 2010, https://blog.typekit.com/2010/10/29/font-events-controlling-the-fout/, (accessed 11 May 2017).

Z. Leatherman, Flash of Faux Text—Still More on Font Loading, [web blog], 2015, https://www.zachleat.com/web/foft/, (accessed 11 May 2017).

A. Haley, Text v. Display, [website], https://www.fonts.com/content/learning/fontology/level-1/type-anatomy/text-v-display, (accessed 12 May 2017).

I. Strizver, Print vs Web fonts: What’s the difference?, [website], 2013, https://creativepro.com/print-vs-web-fonts-what-s-the-difference/, (accessed 12 May 2017).

D. Fadeyev, Please Stop “Fixing” Font Smoothing, [web blog], 2012, http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/, (accessed 8 June 2017).

J. Nielsen, Serif vs. Sans-Serif Fonts for HD Screens, [web blog], 2012, https://www.nngroup.com/articles/serif-vs-sans-serif-fonts-hd-screens/, (accessed 8 June 2017).

K. Thomas, The Serif Readability Myth, [web blog], 2013, http://asserttrue.blogspot.co.uk/2013/01/the-serif-readability-myth.html, (accessed 8 June 2017).

FontFaceNinja, [website], 2016, https://fontface.ninja/, (accessed 12 May 2017).

T. Brown, Web Font Specimen, [website], 2009, http://webfontspecimen.com/, (accessed 15 June 2017).

Typography, [website], https://material.io/guidelines/style/typography.html#typography-other-typographic-guidelines, (accessed 9 June 2017).

R. Parikh, Distribution of Word Lengths in Various Languages, [website], http://www.ravi.io/language-word-lengths (accessed 9 July 2017).

Baskerville Tercentenary, [website], 2007, http://typefoundry.blogspot.co.uk/2007/01/baskerville-tercentenary.html, (accessed 9 July 2017).

Gibson from Canada Type, [website], https://typekit.com/fonts/gibson/details/gibson-light, (accessed 13 May 2017).

T. Brown, A Pocket Guide: Combining Typefaces, 2016, https://typekit.files.wordpress.com/2016/04/combiningtypefaces.pdf, (accessed 9 June 2017).

R. Carter and B. Day, Typographic Design: Form and Communication, Hoboken, John Wiley & Sons Inc., 2007, p. 88.

J. Brownlee and E. Morris, How Typography Shapes Our Perception of Truth, [web blog], 2015, https://www.fastcodesign.com/3046365/errol-morris-how-typography-shapes-our-perception-of-truth (accessed 9 June 2017).

M. Butterick, Letterspacing, [website], http://practicaltypography.com/letterspacing.html (accessed June 9 2017).

Lettering.js A jQuery Plugin for Radical Web Typography, [website], http://letteringjs.com/, (accessed 9 June 2017).

Dos and don'ts on designing for accessibility, [website], 2016, https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/ (accessed 9 June 2017).

Hanging Punctuation, [website], 2017, https://en.wikipedia.org/wiki/Hanging_punctuation, (accessed 11 May 2017).

C. Coyier, Hanging Punctuation, [web blog], 2017, https://css-tricks.com/almanac/properties/h/hanging-punctuation/, (accessed, 9 June 2017).

M. Latin, Gutenberg—A Meaningful Web Typography Starter Kit, [website], 2016, http://matejlatin.github.io/Gutenberg/, (accessed 9 June 2017).

I. Yates, How to Establish a Modular Typographic Scale, [web blog], 2013, https://webdesign.tutsplus.com/articles/how-to-establish-a-modular-typographic-scale--webdesign-14927, (accessed 9 June 2017).

T. Brown, Modular Scale, [website], 2016, http://www.modularscale.com/, (accessed 18 May 2017).

Golden ratio, [website], 2017, https://en.wikipedia.org/wiki/Golden_ratio, (accessed 24 May 2017).

Sketch-Plugin: Typographic Scale, [website], 2014, https://github.com/automat/sketch-plugin-typographic-scale, (accessed 9 June 2017).

R. Bringhurst, The Elements of Typographic Style, Vancouver, Hartley & Marks Publishers Inc., 2012, p. 10.

N. Smith, 960 Grid System, [website], https://960.gs/, (accessed 9 June 2017).

K. Vinh, Subtraction.com, [web blog], 2017, https://www.subtraction.com/, (accessed 9 June 2017).

M. Vignelli, The Vignelli Canon, Baden, Lars Muller Publishers, 2010, p. 72.

J. Tschichold, The New Typography, Los Angeles, University of California Press, 2006, p. 68.

Display aspect ratio, [website], 2017, https://en.wikipedia.org/wiki/Display_aspect_ratio (accessed 24 May 2017).

Screen Resolution Statistics, [website], 2014, http://www.rapidtables.com/web/dev/screen-resolution-statistics.htm, (accessed 25 May 2017).

K. Joseph, Flexbox Grid, [website], http://flexboxgrid.com/, (accessed 9 June 2017).

Mobile Share of Organic Search Engine Visits in the United States from 3rd Quarter 2013 to 1st Quarter 2017, [website], 2017, https://www.statista.com/statistics/297137/mobile-share-of-us-organic-search-engine-visits/, (accessed 9 June 2017).

M. Woolf, Almost Every Smartphone and Tablet Browses the Web in Portrait Mode, [web blog], 2015, http://minimaxir.com/2015/03/portrait/, (accessed 9 June 2017).

Z. Liew, PX, EM or REM Media Queries?, [web blog], 2016, https://zellwk.com/blog/media-query-units/, (accessed 9 June 2017).

Typographic ligature, [website], 2017, https://en.wikipedia.org/wiki/Typographic_ligature, (accessed 9 June 2017).

Talk:Ampersand, [website], 2017, https://en.wikipedia.org/wiki/Talk%3AAmpersand, (accessed 9 June 2017).

A. Haley, Ampersand, [website], https://www.fonts.com/content/learning/fontology/level-1/type-families/ampersand, (accessed 12 July 2017).

Typographic ligature: History, [website], 2017, https://en.wikipedia.org/wiki/Typographic_ligature#History, (accessed 9 June 2017).

Syntax for OpenType features in CSS, [website], https://helpx.adobe.com/typekit/using/open-type-syntax.html, (accessed 9 June 2017).

Hoefler Text, [website], https://www.typography.com/fonts/hoefler-text/overview/, (accessed 9 June 2017).

I. Strizver, Rags, Widows & Orphans, [website], https://www.fonts.com/content/learning/fontology/level-2/text-typography/rags-widows-orphans, (accessed 9 June 2017).

Initial, [website], 2017, https://en.wikipedia.org/wiki/Initial, (accessed 9 June 2017).

C. Coyier, Drop Caps, [web blog], 2017, https://css-tricks.com/snippets/css/drop-caps/, (accessed 9 June 2017).

This book was downloaded from AvaxHome!

Visit my blog for more new books:

www.avxhm.se/blogs/AlenMiler