开发者排版

Taimur Abdaal 领导着 Retool 的设计工作，Retool 是一种快速构建内部工具的方法。他们正在为其平台开发一个新的设计系统，以便任何人都可以轻松构建美观的自定义应用程序。排版将是其中非常重要的一部分，Taimur 基于此经验撰写了本文。

您可能已经阅读了这篇文章的标题，并想：“为什么开发者需要了解任何关于排版的东西？”我的意思是，您已经有很多事情要处理，并且每天要做出数百个决定。您应该使用 React 还是 Vue？npm 还是 Yarn？ES6 还是 ES7？遗憾的是，这常常导致像字体类型这样的东西成为事后才考虑的事情。但是，让我们记住，网页设计 95% 是排版

网络上 95% 的信息都是书面语言。因此，网页设计师应该接受主要学科——塑造书面信息，换句话说，就是排版方面的良好培训，这是合乎逻辑的。

即使我们每天都处理内容——无论是阅读、写作还是设计——排版也可能让人望而生畏，因为它充满了术语和主观性，而且在学校很少会对其进行广泛的教学。

本文旨在作为开发人员学习网页排版的实用指南。我们将涵盖一系列实用且有用的主题，例如如何在网络上选择和使用自定义字体，但更重要的是，如何布局文本以创造愉悦的用户体验。我们将回顾排版的原理以及控制它们的 CSS 属性，以及快速获得良好效果的实用技巧。

什么是排版？

首先，排版与可用性有关。字体是传达信息的用户界面，而传达信息正是我们在网络上需要做的事情。我们可以利用许多杠杆来影响阅读文本的可用性，只有对这些杠杆进行刻意控制，我们才能为用户创造愉悦的体验。

在可用性之后（并且*只有*在可用性之后），排版与情感有关。这些字母是否补充了您的内容，还是与之矛盾？它们是否放大了您品牌的个性，还是抑制了它？应用于同一文本，不同的字体会让人产生不同的感觉。对排版进行刻意控制，让我们能够控制这些感觉。

尽管许多黄金比例爱好者可能会试图告诉您，排版并不是一门精确的科学。良好的指南可以帮助您完成大部分工作，但您也需要运用一点直觉。幸运的是，您一生都在阅读文本——书籍、杂志、互联网——因此，您拥有的未开发的直觉比您想象的要多得多！

字体包含什么？

让我们从掌握一些基本术语以及字体的分类开始。

字体 vs. 字形

这就是这两个术语在传统上是如何定义和区分的

• 字形：字形集合的设计（例如，字母、数字、符号）
• 字体：字形的一种特定大小、粗细或样式（例如，常规、粗体、斜体）

从本质上讲，字形就像一首歌，而字体就像它的 MP3 文件。您会在排版文献中看到这两个术语，因此了解它们的区别很有价值。“字体 vs. 字形”在设计界也是一个有点流行的梗——您可能会在 Twitter 上看到它，因此了解它会有所帮助。

如何主修平面设计
– 选择一种字体
– “它被称为字形，而不是字体”
– 选择一个该死的字形
– 你做错了选择

— Deena (@itsDeenasaur) 2014年11月2日

我可能在这篇文章中互换使用了字体和字形。请将所有投诉发送至 [email protected]。 https://#/IuHHmlaNAT

— Tristin Hopper (@TristinHopper) 2019年1月14日

但是，最近，您可以基本上互换使用这两个术语，人们会知道您的意思。

字体的分类方式

最广泛的分类是衬线和无衬线字形。您可能只是看到一些字形名称在四处飘动（比如，咳咳，Comic Sans）就遇到过这些术语。

“衬线”是指连接字母末端的短笔画，使它们呈现出传统的感觉。事实上，大多数书籍和报纸都是使用衬线字形排版的。相反，无衬线字形没有这些额外的笔画，使它们呈现出流畅、现代的感觉。

衬线和无衬线都包含各自的类别。例如，衬线有迪多体、板式和老式等子类别。

至于无衬线，它包括人文主义、几何和格罗特斯作为子类别。

等宽字体（是的，字体）本身就是一个值得注意的类别。等宽字体中的每个字形（即字母/数字/符号）都具有相同的宽度（因此得名等宽术语），因此可以将它们排列成视觉结构。您可能对等宽很熟悉，因为我们在编写代码时经常看到它，在代码中，它有助于使括号和缩进在视觉上对齐。您现在打开的代码编辑器可能正在使用等宽。

如何选择字体和字体搭配

这是主观的，取决于您要做什么。每种字形都有其独特的个性，因此您必须找到一种与您的品牌或它传达的内容相一致的字形。字形必须在其应用的上下文中进行考虑。我们是在寻找正式感吗？也许可以从衬线系列开始。温暖、有趣和友好？这可能是无衬线的暗示。哎呀，甚至 Comic Sans 也有一席之地……真的！只要知道选择字体没有硬性科学，即使是最训练有素的排版师也在考虑上下文线索以找到“正确的”字体。

但是字体可以一起搭配在同一设计中。例如，一些设计使用一种字形作为标题，另一种字形作为正文文本。这是一种获得独特外观的好方法，但要正确地做到这一点需要花费相当多的工作。就像调色板中的颜色一样，一些字形可以很好地搭配在一起，而另一些则会发生冲突。并且，即使是有目的的冲突也是有意义的，同样，也要考虑到正确的上下文。

找出两种字体是否互补的唯一方法是将它们放在一起查看。像FontPair和TypeConnection这样的工具可以帮助您实现这一点。如果在浏览网页时某字体吸引了您的眼球，WhatFont是一个很棒的浏览器扩展程序，可以帮助您识别它。另一个很棒的资源是Typewolf，它可以让您查看优秀的网页排版示例，包括正在使用的不同字体组合

虽然选择字体有很多主观性，但也有一些客观因素需要考虑。

字体粗细的考虑因素

一些字体系列拥有广泛的字体粗细范围——细体、细黑体、常规、中粗体、半粗体、粗体、特粗体——而另一些则只有几个。

如果你正在构建一个复杂的 Web 应用 UI，你可能需要一系列的字体粗细来在不同上下文中建立层级关系。对于不太复杂的东西，比如博客，你可能只需要几个就足够了。

可变字体 是一项激动人心的新技术，它提供了对字体特性的精确控制。对于字体粗细，这意味着不再局限于使用“细体”、“常规”和“粗体”，而是可以在两者之间使用任何粗细。 在这里尝试一些可变字体，并查看 Ollie Williams 的帖子。

这仍然处于早期阶段——目前可用的可变字体并不多，并且浏览器支持有限。但绝对值得关注这个领域！

考虑字体的可读性

一些字体比其他字体更难阅读。在段落中避免使用过于复杂的字体，如果**必须**在某个地方使用很小的文字，请确保其字体在这些小尺寸下仍然可读。

在这两个示例中，哪个更容易阅读？（这里有一个正确答案。🙂）

查看 Geoff Graham 的 CodePen 上的示例
字体对比：正文 (@geoffgraham)
在 CodePen 上。

记住，字体有多种样式

使字体变粗并不像在文本中添加轮廓那么简单，斜体也不仅仅是倾斜的字母。好的字体具有特定的粗体和斜体样式，如果没有这些样式，浏览器会尝试“伪造”它。

这些伪造的样式往往会降低可读性并破坏文本的视觉连贯性，因为浏览器只能根据提供的素材做有限的事情。 坚持使用提供 真正粗体/斜体样式的字体，如果可以的话。

其他值得考虑的事项

到目前为止，我们已经了解了可以帮助我们决定为特定设计或上下文选择哪种字体的字体的高级特性和功能。还有许多其他方面可以（也可能应该）考虑在内，包括

• 语言支持：一些字体包含外文字符的字形，这可能是面向多语言受众或包含多语言内容的项目的必要条件。
• 连字：一些字体（通常是衬线字体）具有字形来替换原本笨拙的字符，例如 ffi 和 ffl，它们是单个字形中的多个字符。
• 文件大小：你是开发者，所以我相信你关心性能。一些字体的文件比其他字体大，这些文件会导致网站加载时间变慢。

在万维网上使用字体

仅仅 10 年前，在 Web 上使用自定义字体有两种复杂的方法。

• SiFR：嵌入 Flash（还记得那个东西吗？）小部件来渲染文本。
• cufon：将字体转换为专有格式，并使用特定的 JavaScript 渲染引擎在 HTML <canvas> 上使用 VML 生成文本。

今天，我们只需要一个简单的办法：@font-face。它允许你指定字体文件 URL，浏览器随后下载并在你的网站上使用它。

你可以使用 @font-face 声明来定义你的自定义字体。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
        url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
        url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

然后像往常一样通过 font-family 属性引用它。

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

即使 @font-face 比旧的自定义 Web 字体的方案先进得多，但在浏览器支持方面仍然有很多需要考虑的地方。这是一个获取正确数量的跨浏览器支持的指南。

字体对性能的影响

性能是 Web 上使用自定义字体的唯一缺点。字体是相对较大的资源——通常大小为数百 KB——并且会对任何网站的速度产生不利影响。

以下是一些减轻影响的技巧。

• 对你的 Web 字体文件使用 GZIP 压缩。
• 禁用不需要的字体特性，例如 提示、字距调整。
• 删除不需要的字形，例如外语字符。

一个可以帮助你根据需要调整字体文件的工具是 Transfonter。只需确保你拥有在你的网站上使用任何字体的权利，因为，嗯，这是正确的事情。

一些服务将为你托管 Web 字体

另一种显著减少使用自定义 Web 字体带来的负担的方法是使用可以为你托管和提供服务的第三方服务。好处在于，第三方将文件存储在快速的 CDN 上，对其进行优化，并通过插入到文档头部的一个 JavaScript 代码片段将其提供给你的网站。简而言之：它为你省去了很多麻烦。

使用托管服务有多容易？考虑一下，在 Google Fonts 上使用任何东西只需要在 HTML 头部添加一个 <link> 即可。

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>

<!-- Rest of the document -->

此示例取自 Google Fonts——最受欢迎的托管字体服务。它是免费使用的，并且在撰写本文时，拥有 915 个字体系列的目录。它们的质量参差不齐。有些确实是一流的——设计精美，多种粗细，真正的粗体/斜体以及连字等高级功能。其他一些，通常是更新颖的设计，则非常基础，可能不适合具有不断变化需求的重要项目。

Adobe Fonts 也很受欢迎。它与 Adobe 的 Creative Cloud 产品捆绑在一起，每月起价为 20.99 美元。在撰写本文时，它拥有 1,636 个字体系列的目录。这些通常是需要付费才能获得的高质量字体，但使用 Adobe Fonts，你可以像 Netflix 一样无限使用它们。

以下是一些其他选项。

• Adobe Edge Web Fonts：这是 Adobe Fonts 的免费版本。Adobe 与 Google 在此方面进行了合作，因此与 Google Fonts 库有很多重叠之处。它总共有 503 个字体系列。
• Fontspring：这是一个拥有超过 14,000 个字体系列的庞大库，但采用的是单独许可的模式。这意味着需要预先支付更多费用，每个字体（以及每个粗细或样式）起价约为 20 美元，但没有持续费用。它也是自助式的——你必须自己托管文件。
• MyFonts by Monotype：这是一个主要的字体铸造厂。与 Fontspring 类似：拥有大量字体系列的庞大库，采用的是单独许可的模式。
• Fonts.com：这与 Fontspring 类似。提供一次性或按次付费定价选项（基于页面浏览量）。
• Cloud.typography by Hoefler&Co：这是一个主要的字体铸造厂。超过 1,000 个字体系列（全部由 Hoefler&Co 制作），提供托管（订阅，每年起价 99 美元）或自托管（单独许可）Web 字体选项。好处在于，你可以访问其他地方找不到的字体库。
• Fontstand：这项服务允许你以低廉的价格每月“租赁”单个字体（每月起价约 10 美元），12 个月后你将自动拥有该字体。迄今为止，它拥有 1,500 个字体系列，并提供托管 Web 字体服务。

CSS 和排版

好的，让我们继续探讨设计与开发的交汇点。我们已经涵盖了排版领域的大量基础术语和概念，现在我们可以将注意力转向使用CSS操纵和设置字体样式的可用方法。

调整字体大小

更改字体大小是典型项目中不可避免的操作。大小很重要，因为它可以创建层次结构，隐式地引导用户浏览页面。因此，在本节中，我们将了解工具箱中可用于调整字体大小以创建更好内容层次结构的两种CSS功能。

尺寸可以使用不同的度量单位表示

您知道CSS中有15种不同的尺寸单位吗？是不是很疯狂？我们大多数人可能都了解并习惯使用像素（px），但还有许多其他方法可以定义字体的尺寸。

其中一些是相对单位，另一些是绝对单位。用相对单位表示的元素的实际大小取决于页面的其他部分，而用绝对单位表示的元素的实际大小始终相同。并且，正如您可能预期的那样，这种差异很重要，因为它们根据设计的需求发挥不同的作用。

在我们可用的15个单位中，我们将重点关注其中的两个：px和em。它们不仅可能是您看到用于定义字体大小的两个最常用的单位，而且它们也完美地展示了绝对和相对大小之间的区别。

首先，px是一个绝对单位，它实际上与像素关系不大（它被认为是角度测量），但它的定义是为了使宽度为1px的线条清晰可见，无论屏幕分辨率如何。px值大致对应于字体中最高升部（例如字母A的顶部）到最低降部（例如字母p的底部）之间的距离。有些字体的字母比其他字体更高，因此一个字体中的16px可能看起来明显“更大”于另一个字体中的16px。在选择字体时，还需要考虑另一个因素！

有趣的是，在排版方面，px是一个需要理解但不用于实际设计的单位。px单位的真正目的是作为基于相对单位的类型系统的基础。换句话说，它是一个绝对值，相对单位可以指向它来定义自身相对于该值的大小。

这引出了em，一个相对单位。字体大小为2em的文本将是其父元素font-size的两倍。每个设备都有自己的body元素的默认font-size。例如，桌面浏览器通常默认为16px。其他设备（例如手机和电视）可能具有针对其外形尺寸优化的不同默认值。

em允许您以直观的方式推断排版：“我希望标题是段落文本的两倍大”直接对应于2em。它也很容易维护——如果您需要一个媒体查询来使移动设备上的所有内容都更大，只需增加一个font-size属性即可。正如我们稍后将看到的，使用em单位还可以让您根据font-size设置其他排版元素。

CSS可以针对语义HTML元素来调整大小

您已经接受了em，但是每个元素应该使用多少个em单位？您需要有一系列的文本大小来建立页面不同元素之间的层次结构。通常情况下，您会看到深度为六级的层次结构，这对应于HTML标题元素，从h1到h6。

正确的尺寸比例取决于用例。作为指南，许多人选择使用模数比例。它指的是一个基于常数比率的比例，用于层次结构中连续的文本元素。

模数比例是Tim Brown开发的工具，他推广了这种方法，使您可以轻松地可视化不同的尺寸比例。

调整字体的垂直间距和对齐方式

字体的物理尺寸是我们使用CSS设置字体样式的一种非常常见的方式，但垂直间距是CSS可以帮助提高内容可读性的另一种非常强大的方式。

使用line-height定义文本行的高度

行高是影响可读性的最重要因素之一。它由line-height属性控制，最好表示为一个无单位的数字，对应于定义的字体大小的倍数。

假设我们正在使用计算出的字体大小16px（当然，在CSS中指定为em单位），line-height为1.2将使每行高19.2px。（请记住，px实际上不是像素，因此小数是有效的！）

大多数浏览器默认的line-height为1.2，但问题是这通常太紧了——您可能需要更接近1.5，因为它在阅读时为眼睛提供了更多呼吸空间。

以下是一些定义良好行高的通用指南：

• 对于粗体字体，增加line-height
• 当字体为深色时，增加line-height
• 对于长篇内容，增加line-height

字体不会跳舞，但它们仍然有节奏

节奏描述了文本在页面上垂直流动的样式。就像音乐一样，一定程度的一致性和结构通常会导致良好的“节奏”。与大多数设计技巧一样，节奏不是一门精确的科学，但有一些合理的指南可以带来良好的效果。

一种观点主张使用段落行高作为基线单位，所有其他间距都源自该单位。这包括段落和标题之间的间隙以及文本与其他页面元素之间的填充。

在此系统下，您可以将标题的行高设置为段落行高的两倍，并在标题和段落之间留出一个行高的间隙。方便的是，您可以使用相同的em单位来定义边距和填充，因此实际上无需硬编码任何内容。

在此处阅读有关节奏的更多信息。

水平形状

希望您现在已经相信，垂直间距是提高可读性的一个重要因素，我们可以在CSS中控制它。同样重要的是单个字符的水平间距和内容的整体宽度。

CSS可以控制字母之间的间距

字母间距是影响可读性的最重要因素之一。它由CSS letter-spacing属性控制，最好（再次）以em单位表示，以保持所有内容的相对性。字距调整（排版术语中的“字母间距”）完全取决于字体——有些字体在默认情况下看起来很棒，而其他字体可能需要一些调整。

通常，您只需要担心文本元素特别大或小的情况下的字母间距，因为大多数字体在典型的段落大小下间距都很好。

对于较大的文本，如标题和标题，您通常需要减少字母之间的间距。并且一点空间就能产生很大的影响。例如，-0.02em是一个微小的十进制数，但它是一个不错的起点，可以根据您的需要进行微调，直到它看起来恰到好处。您应该考虑增加字母间距的唯一时间是处理样式上不寻常的文本时——例如全大写标题，甚至是一些数字序列。

某些特定的字母对，如AV，如果没有一点手动调整，可能会出现间距不佳的情况。精心制作的字体通常会为这样的字母对指定自定义间距，将font-kerning属性设置为normal可以让您启用此功能。默认情况下，浏览器在较小的文本上禁用此功能。这里有一些关于字母间距的更多信息，以及我们控制字体间距的其他CSS工具。

文本行长度比你想象的更重要

阅读时，眼睛移动长距离会让人感到不适，因此行宽应该经过仔细考虑。普遍认为，良好的行宽在每行 60 到 70 个字符之间。如果你发现某一行文本（尤其是长篇内容）严重超出此范围，那么就开始调整。

ch 是一个鲜为人知的 CSS 单位，我们之前没有介绍过，但它可以帮助控制行长。它是一个相对单位，定义为元素字体中字符“0”的宽度。由于像“l”和“i”这样的窄字符比较常见，因此将文本容器的宽度设置为类似 50ch 的值应该会产生 60 到 70 个字符长的行。

p {
  width: 50ch;
}

CSS 可以使原本粗糙的字体变得平滑

-webkit-font-smoothing 是一个巧妙的 CSS 属性，它控制着字体的抗锯齿方式。这是一种花哨的说法，表示它可以在原本方形的像素周围绘制灰色阴影，以创造更平滑的外观。但是请注意，这里有 -webkit 前缀，因为这表示该属性仅受 WebKit 浏览器（例如 Safari）支持。

默认设置为 subpixel-antialiased，但看看你的字体在设置为 antialiased 时的样子也是值得的。它可以改善许多字体的外观，尤其是在非白色背景上的文本。

在较小的字体大小下，应该谨慎使用此属性——它会降低对比度，影响可读性。在使用此属性时，还应确保调整 letter-spacing，因为更大的抗锯齿会增加字母之间的间距。

总结

呼！我们在相对较短的篇幅内涵盖了很多内容。尽管如此，这绝不是一份详尽的指南，而更像是我希望能够鼓励你在未来的项目中更多地控制排版，并寻求更深入的知识。为此，我整理了一份额外的资源列表，帮助你从这里开始提升水平。

---

学习排版

• 《应用于 Web 的印刷风格要素》
• 《巴特里克实用排版》
• 《更好的 Web 字体》

排版灵感

• Typewolf
• Fonts in Use
• Awwwards

识别字体

WhatFont

Identifont

WhatTheFont

CSS 中的排版

• CSS 参考
• CSS-Tricks 排版指南