Read this article in English

Прочитайте эту статью на русском языке. 

作为一名网页开发者，你每天都在和文字与排版打交道。你经常需要决定这些文字的呈现方式，尤其是在没有设计师参与的情况下。即使你没有意识到这些选择，它们也确实存在。坦白说，有些人做出的选择相当糟糕。

在本指南中，我们将介绍关键的排版设置，并学习如何用 CSS 来调整它们，这样你网页和应用程序上的文本就能默认呈现出不错的效果。这个教程适合那些想用 20% 的努力获得 80% 排版效果的开发者，而不用一头扎进复杂的排版设计中。如果你本来就熟悉排版，但还没怎么用过 CSS，这篇文章也能帮你快速掌握与常见概念相对应的 CSS 语法。

本文不会涉及为你的项目选择特定字体或字体分类。但我们会讲到字体的合适格式。此外，也不会讨论引号的正确使用或连字符与长破折号的区别。不过如果你对这类话题感兴趣，我强烈推荐阅读 Butterick’s Practical Typography。

相反，我们将专注于让文本看起来更美观、易读的通用调整，尤其是实现这些效果所需的 CSS 规则。

最后要记住，在设计中，规则固然有用，但不必害怕打破它们。今天我会分享一些规则和建议，但这并不意味着你不能走另一条路。如果你对自己的选择有信心——请尽情打破规则！但如果没有把握，那就坚持合理的默认值。

排版基础：选择字体

考虑使用本地字体

在网页中使用字体时，你可以选择用户设备上已安装的字体，也可以加载自定义字体。对于没有特殊排版需求的项目，我推荐直接使用系统内置字体。但这并不意味着你只能用 Arial 或 Times New Roman！你可能会惊讶于 system-ui 能带你走多远。想要更多选择，可以看看 Modern font stacks。

外部字体

要加载自定义字体，你需要托管字体文件并在样式中添加 @font-face rule。

也有一些服务可以帮你托管字体，其中最受欢迎且免费的就是 Google Fonts。如果你使用的是商业字体，字体发行商或字体公司也可能提供托管服务。

外部字体的格式

历史上，字体分发有多种格式。最常见的是 TrueType (.ttf) 和 OpenType (.otf)，它们都可以用作外部字体，但除非你要兼容非常老的浏览器，否则没有太大意义。对于现代浏览器，WOFF2 是更好的选择。浏览器可以加载多种不同格式的字体，但我们只在意现代浏览器，它们都很好地支持 WOFF2。WOFF 字体与 TrueType 和 OpenType 类似，但经过压缩，而且字体开发者更愿意以 .woff 格式授权网页应用，而不是 .ttf 或 .otf。你可以用 Google 提供的 woff2 tools（或如果你用的是 Mac，可以使用相应的 brew formula）将字体转换为 WOFF2（也可以反向转换)。

优先使用可变字体

以前，如果你想在文本中使用不同的字重（如加粗），必须加载多个字体文件（斜体也一样)。

/* 这个定义只加载权重 400、正常样式的字体文件 /
 @font-face { font-family: 'Sonko';
 src: url('path/to/sonko-regular.woff2') format('woff2');
 font-weight: normal;
 font-style: normal;
 font-display: swap;}
 / 如果想使用不同权重或斜体，就需要在这里加载多个文件 */

可以想象，仅仅为了加载字体就写 120 行 CSS，对于开发者来说并不是一个好消息。像 Google Fonts 这样的服务会自动生成，但下载多个文件依然会增加网页加载时间。

幸运的是，现在有了可变字体（variable fonts）。可变字体可以通过调整一个或多个轴的数值来改变宽度、倾斜、光学大小等，而我们最常用的是 weight（wght）轴。它允许你精确地设定字重，比如 582，而传统字体只能在 500 和 600 之间选择。

除了让你更灵活地控制字体外，可变字体在文件体积上也更优。通常，一个可变字体文件会比单一字重的文件大，但仍然小于多个单一字重文件的总和。所以，如果你的网站需要多个字重（几乎所有网站都是如此），选择可变字体可以节省几百 KB 的下载量，加快页面加载速度。

@font-face { font-family: 'MyFont';
 /* 可接受的字重范围 */
 font-weight: 100 900;
 font-style: normal;
 font-display: swap;
 src: url(/fonts/MyFont.woff2) format('woff2-variations');}

字体子集化

有些字体支持多种文字系统，因此包含大量字形。但很可能你用不到全部。如果你确定内容仅为英文，就没必要让用户加载包含西里尔字母、希腊字母或阿拉伯字母的部分。

为了优化此类场景的加载时间，你可以使用子集化。它是一种基于原始字体创建新字体、但移除所有未用字形的技术。这样可以减小字体文件体积，从而显著改善加载时间。

字号与间距

字号

字体必须足够大才能舒适阅读。所有浏览器的默认字体大小是 16px，这对大多数情况都适用。如果你选用的字体在这个大小下看起来过大或过小，可以用百分比在根元素上调整字体大小：

:root { font-size: 112.5%; /* = 18px */}

受“排版之神”的摆布，相同字号的不同字体看上去可能差别很大，所以如果你更换了字体，也需要相应调整字号。了解更多内容请看这里。

使用 rem 为其他元素设置字体大小：

.alert { font-size: 1.25rem; /* = 20px /}
 .tip { font-size: 0.875rem; / = 14px */}

有些用户会在浏览器中更改默认字体大小（例如视力障碍者）。如果你用绝对单位（如 16px）设置字号，浏览器会严格遵守该规则，并以 16px 渲染文本，即使用户把默认字号设为 18px 或 20px。我们应该尊重用户的选择，因此在根元素上使用百分比（以默认字号为基准）设定字体大小，并在其他元素上使用 rem（以根字号为基准）。关于标题等特定元素的字号没有固定规则。但作为一个不错的起点，我喜欢使用 typographic scale（排版比例），它可以基于固定比率为不同元素计算字号。在 typescale.com 上，你可以尝试不同比率，并查看它们在着陆页或博客文章中的实际效果。

行高（line height 或 leading）

这是你在排版中最容易获得成效的设置之一。设置合适的行高会对整体观感产生巨大影响。如果文本行距过于紧凑，会降低可读性；而行高过大，则会破坏视觉节奏，让读者更难从当前行跳到下一行。

在 CSS 中，行高可以使用绝对单位（例如 24px）或相对于当前元素字号来设置。我尚未发现绝对行高的好用例（如果你有，请给我留言！），因此我建议使用相对值。

:root {
 line-height: 1.5; /* 字号乘以 1.5 */
 }

浏览器的默认行高通常在 1.1 到 1.2 之间，这对于大段文本来说太小了。理想值会因你所用的字体而异，但 1.5 是一个很好的起点。

这个建议适用于正文字体，也就是大约 16px 左右的文字。对于更大的文字，比如标题，你不需要那么多的行距。依然要看所用字体与视觉效果的需求，但通常在 1.15 到 1.3 之间会比较合适。如果你想更深入了解为什么不同字体的行高表现不同，这里有两篇文章可读：one，two。

限制行宽

长行不易阅读，不要让行太长。移动设备上通常不是问题，但对于使用宽屏显示器的人来说，如果你不限制行宽，阅读你的网站可能会非常痛苦。

关于最佳行宽的研究并没有我们期望的那么明确，但 45 到 100 个字符之间的长度通常被认为是理想范围。例如，本网站的平均行长是 90 个字符。

在 CSS 中没有办法显式设置行长上限，因此你需要限制文本容器的尺寸。

main {
max-width: 800px;
}

玩转字距

这一点有点微妙。字距是指字母之间的间隙。如果你使用的是精心制作的字体，其内置字距很可能已经是最佳的。如果你不确定是否需要调整字距，那你大概就不需要。但在非常小的文字上，有时需要手动微调以提高可读性；而在非常大的文字上，可能需要稍微收紧以更紧凑。

字距通过 letter-spacing 属性设置，通常以 em 为单位，这是一种相对于当前元素字号的相对单位。这里我们用的是 class=”small-tip”，当然你可以使用任意类名。

.small-tip { 
letter-spacing: -0.02em;
}

建立层次

清晰的层次结构能定义页面上什么是重要内容。它有助于用户更好地理解页面内容的重要顺序。当标题、副标题和正文具有清晰的层次时，文档结构也更明确，能帮助用户更快地浏览。

不要错过：欢迎来到欢迎来到《R 语言数据新闻》课程 通常这是通过字号实现的：标题会更大，正文会（相对）更小。但这不是唯一方法。同样，你也可以通过颜色和字重来建立层次。不妨看看 Emil Kowalski 的网站。

那里所有文本的字号都相同，但 Emil 为标题使用了略微更粗的字重，为正文使用了略淡的灰色。这在元素之间创造了足够的对比，从而形成清晰的层次。

选择颜色

对于正文，选择一种中性色会是个好主意，这样不会让读者的眼睛感到疲劳。深色背景的页面通常使用浅灰色文字，浅色背景的页面使用深灰色文字。传统的黑底白字（或白底黑字）在一些屏幕上可能对比过强。界面元素（如按钮）往往更为多彩。重要的是要确保其文字具有足够的对比度。小号和常规文字的对比度至少应为 4.5，而大号或加粗文字至少应为 3:1。你可以直接在 Chrome DevTools 中检查，或使用类似这个的应用进行检测。

文本换行

在排版中，单个词被挤到下一行称为“孤行（orphan）”，这看起来有点凌乱，尤其是在标题中。幸运的是，text-wrap: balance 属性正是为解决这个问题而生的。

h1, h2, h3, h4, h5, h6 { 
text-wrap: balance;
}

使用该属性后，浏览器会采用不同的算法来换行多行文本——它会尝试平衡每一行的长度，使其相近。这有助于避免孤行，让标题看起来更整洁。但也有一个缺点：它仅适用于较短的文本块（Chrome 最多 6 行，Firefox 最多 10 行），因此更适合用于标题以及像警示或提示这类短文本。这里有一篇很好的文章可供参考。

Chrome 支持 text-wrap: pretty，它能取得类似效果，并可用于更长的文本块。不过，Firefox 和 Safari 暂不支持。

浏览器特性

移动端字体大小

移动端浏览器（通常是 iOS 上的 Safari）在某些情况下可能会自动放大字体（了解更多）。通常这并不是我们想要的，因此请使用 text-size-adjust 属性将其禁用。

:root { 
-moz-text-size-adjust: 100%; 
-webkit-text-size-adjust: 100%; 
text-size-adjust: 100%;
}

 如果你需要在移动端调整字号，请为此使用媒体查询。

macOS 上的字体平滑

CSS 允许你选择在 macOS 上的字体渲染方式。你可以使用 -webkit-font-smoothing 和 -moz-osx-font-smoothing 属性来设置。默认情况下，浏览器会自动选择它认为最好的方式，通常是 subpixel-antialiased。不过，你也可以手动将其设置为 antialiased/grayscale（灰度抗锯齿），主观上会让文本看起来更好。

这是一个颇有争议的话题。比如，有一篇非常流行的文章解释了为什么不应该这样做。但与此同时，大约 60% 的网站都启用了抗锯齿，并且它也包含在默认的 Vite starters 中。

就我的经验而言，这个设置能让渲染的文本看起来更好、更锐利。

:root { 
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

我会根据具体情况决定是否使用字体平滑。如果你有一台 Mac，看看开启抗锯齿后你的网站是否更好看（或者请一位用 Mac 的朋友帮你看看）。本网站也设置了这个属性，因为它的效果相当明显，尤其是在用于标题的字体上。

这里是一条使用默认字距的标题

<div style="font-family:system-ui; background-color: lightyellow;padding:10px 30px;margin-bottom:20px">
<p style="-webkit-font-smoothing: antialiased"> 如果你在 Mac 上阅读，你会看到这两个段落的差异。这个段落设置了 -webkit-font-smoothing: antialiased，而另一个设置为 auto。对于其他浏览器和平台，它们看起来会是一样的.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

延伸阅读

如果你对排版更感兴趣，这里有一些很棒的资源可供深入了解。前面提到的 Butterick’s Practical Typography 也是我最喜欢的相关书籍之一。如果你想深入到自己制作字体的领域，Type Design Resources 是我所知的该主题最大的资料集合。

如果你能读到这里，我相信你已经同意排版有多么重要。也希望这篇文章能帮助你更好地理解什么是良好的排版。但遗憾的是，它并不能直接让你做出伟大的排版——那需要大量的尝试与错误。所以，现在就去做一些排版练习吧！本文最初发布于 Korniieko 的网站。

本文由AI（ChatGPT）翻译。

在准备本教程时，我们测试了ChatGPT，Claude和Gemini翻译技术类文章的能力。

最终文章由团队里的母语人士审核与编辑。

敬请期待与关注下周我们对AI表现的解析。