为任何新项目设置排版始终是一项复杂的任务。可调整的变量多达数百个，很容易花费大量时间调整字号、行高、边距和字重。避免崩溃的最佳方法是使用一个设计系统，它可以快速解答大多数细枝末节的问题，让您专注于“大局”决策。
由于读者阅读正文的时间远超其他任何文本大小，因此我们首先要考虑的关键排版决策通常是为默认布局设置正文字体大小（暂且不谈响应式设计）。多年来，16 像素一直被认为是网页的默认正文字体大小。
然而，随着如今屏幕尺寸的增大，像博客和新闻服务这类文字较多的网站通常会选择 18 像素到 21 像素的正文字体大小。而使用更复杂、模块化 UI 单元的社交媒体和电商应用则倾向于使用 14 像素到 16 像素的正文字体。显然，这些只是总体趋势，并非绝对规则，但您可以在下面的列表中看到这些总体趋势。
要点总结
设计系统的重要性：为新项目确定字体排版是一项复杂且耗时的任务，涉及众多变量。利用设计系统可以快速解决常见的设计问题，从而极大地简化这一流程，使设计师能够专注于更广泛、更具影响力的决策。
选择正文字体大小和字体缩放：选择正文字体大小是排版设置中至关重要的早期步骤。目前的趋势是，对于文本量大的网站，字体大小应稍大一些；而对于界面元素较多的场景，字体大小则应稍小一些。字体缩放或模块化缩放的概念通过应用数学比例来保持不同字号之间的和谐与一致性，从而进一步简化了排版，使排版设计更加系统化和协调统一。
实施垂直基线韵律和响应式缩放：垂直基线韵律创建了一个结构化的网格，用于对齐字体，从而增强设计的整体视觉和谐性。然而，使用 CSS 媒体查询来调整不同设备尺寸的字体缩放比例也至关重要，以确保在所有平台上都具有良好的可读性和美观性。Type-scale.com、Gridlover.net 和 Archetype 等工具为在网页设计中尝试和实施这些排版原则提供了实用的解决方案。
知名网站的典型正文字体大小
《纽约时报》、Medium.com、SitePoint.com 和 Wikipedia.com 的正文字体大小示例
Medium.com：
21px纽约时报网站：
18pxCNN.com：
18pxAirbnb.com：
18pxSitePoint.com：
18pxBBC.co.uk：
16pxDeveloper.mozilla.org：
16pxTwitter.com：
15pxEtsy.com：
14px维基百科.com：
14pxFacebook.com：
14px
请记住，这些大型互联网平台会进行大量的用户测试，因此请仔细考虑您的应用程序与这些测试结果的契合度。确定基本文本大小后，请在真实的屏幕、平板电脑和手机上进行视觉测试，直到您对初始效果满意为止。
缩放你的类型
现在您已经设置好了正文字体大小。那么，您如何决定标题、章节标题、副标题、列表和引用块的大小呢？
对我来说，以前的答案是：“嗯……调整一下，直到看起来……差不多吧？ ”我会放大标题，稍微加粗，向上移动一个像素，……再向下移动，……然后再向上移动。坦白说，这很累人，因为有很多细微的调整要做，而完全错误的答案却很少。
字体缩放 （有时也称为 模块化缩放 ）允许您使用 简单的 数学运算来获得 简单的 排版解决方案。它允许我们设置一个单一的缩放比例来生成所有字体大小，同时保持它们之间的协调性。它就像字体大小的音阶。
实践中的类型量表
我们先将正文字体大小 18px设置为 。这样，默认段落大小 1em （或 18px）就变成了 。
我将设置一个字体缩放比例 1.25。要计算 h5 字体大小，我只需将段落字体大小乘以该比例即可 1.25。也就是 1em * 1.25，或者 1.25em：
标题 h4 尺寸将是 字号 h5 乘以括号 1.25 。继续此过程，我们将得到类似这样的结果：1.25em * 1.251.563em
如果我觉得 h1 标题在这个比例下有点太大了，我可以把字体大小调小， 1.2 得到这样的效果：
好吧，难道我需要一个袖珍计算器来调整文本大小吗？好消息是，不需要。有很多很棒的工具可以让你实时调整和测试生成的 CSS 中的字体缩放比例。我最喜欢的是 Jeremy Church 开发的 Type-scale.com （如下所示），它能让你快速测试不同的字体缩放比例并生成可用的 CSS。右侧面板甚至还有一个示例布局，方便你查看效果，还有一个 CodePen 导出选项。这为你的排版 CSS 打下了良好的基础。
Type-scale.com 生成一组比例一致的字体大小
单一类型的缩放比例是否适用于所有设备尺寸？
答案是，不，通常并非如此。我们可以从传统印刷格式中汲取经验。如果你比较一下普通报纸和经典平装小说（如下所示）的排版，你会发现除了显而易见的纸张尺寸之外，还有一些有趣的差异。
《泰晤士报》采用的字体大小比例比《绿野仙踪》更陡峭。
虽然报纸正文的字体大小可能非常相似，但标题的大小却差异很大。常识告诉我们， 《泰晤士报》上的那些标题 肯定不适合用作 《绿野仙踪》的章节标题。一般来说，较小的尺寸（例如手机和小说）需要较小的字号。
类型尺度：微小的增长累积起来会产生巨大的变化。
请注意，字体大小的差异无需很大。如上图所示，字体大小的微小增加——从 1.125 到 1.25 ——就会产生连锁反应，最终生成一个更大的顶级标题。虽然这样的 h1 标题在笔记本电脑上看起来不错，但在移动设备上会占用太多屏幕空间。
简而言之，明智的做法是使用 CSS @media 查询来提供两种字体缩放比例——较大的字体缩放比例适用于大屏幕，较小的字体缩放比例适用于小屏幕。我们将在项目的后续部分讨论这个问题。
既然我们已经有了一个可靠、可重复的流程来缩放设计中的字体，那么让我们来看看 字体之间的空白区域。
什么是垂直基线节律？
垂直基线节奏 ——有时也称为 垂直度量 ——是由水平线组成的网格，你可以用它来“悬挂你的排版”。这与我们许多人小时候用来练习写字的蓝线练习本非常相似。
诀窍在于如何让较大的字体单元与正文排版在同一网格内。在一封简单的手写信（如下）中，EG Webb 为签名预留了额外的一行。他可能在使用某种基线节奏，甚至不知道它叫什么。
这幅精美的复古手写书法作品带有内置基线。
在 《网页排版风格要素》一书中，理查德·鲁特这样描述基线节奏：
标题、副标题、大段引文、脚注、插图、图注以及其他插入文本的内容，都会与规则行距的诗行形成节奏上的错位和变化。这些变化能够也应该为页面增添活力，但正文也应该在每次变化之后，精准地在节拍和相位上回归。
这在网络上是如何实现的呢？我们来看一个实际例子。优秀的 《Colossal》杂志 采用了一种非常开放、轻盈的布局，但却依然给人一种稳固而有条理的感觉。它是如何做到的呢？原来，如果我们把一个 21px 垂直网格叠加在整个布局上（见下图），就会发现之前隐藏的结构。在这个例子中，我把网格中的一行称为一个“单元”。
你会注意到：
网站品牌标识完美地融入了一个五格高的盒子里。
主导航台高三格
文章标题高两格
二级导航和社交链接的高度为 1 个单位
优秀的艺术与设计杂志《This is Colossal》
事实上，大多数用户界面元素都“悬挂”在这个底层网格上，就像袜子挂在隐形的晾衣绳上一样。即使我们看不到底层网格，也能通过一种平衡和谐的感觉感知到它的存在。一切都恰到好处。
请注意，我们这里说的不仅仅是字体大小，而是 文本所占据的整个空间 ——包括行高和页边距。因此，在 Colossal 的 例子中，文章标题的行高为 42px2 个单位，即每行 2 个单位。
不过，你会注意到 并非所有 元素都固定在这个网格内。设计师选择将照片等元素从网格中偏移放置。这也没问题。网格是一个很好的起点，而不是戒严令。
在 UI 设计中使用布局网格
大多数现代图形布局工具（例如 Sketch、Figma 或 Adobe XD）都可以轻松地为任何画布/框架添加垂直基线。在以下 Figma 示例中（见下文），我选择了文档框架，然后使用“ +” 按钮在“布局网格”面板中添加了单独的行和列。
这些网格图层可以通过眼睛图标打开或关闭。我发现，启用网格并开启“对齐网格”功能后，调整元素大小会比不使用网格时更加方便。这会让你的工作更轻松。
甚至还有一个工具可以帮助你计算 CSS 代码。Gridlover.net （如下所示 ）是一个非常棒的免费工具，它可以让你尝试不同的基本字体大小、行高和字体缩放比例——所有这些都与垂直基线绑定。如果你尝试在右侧的 CSS 面板中调整任何行高或边距，你会注意到每次调整的数值都只会改变一个完整的“网格单位”。
Gridlover.net：一款用于生成垂直基线节奏的优秀工具。
您可能还会注意到，该工具在排版中避免使用 CSS 内边距。我发现，在使用垂直基线系统时，这通常是一个很好的做法。容器单元可以随意使用内边距，但切勿在排版中使用。即使是文本按钮，也可以通过设置行高来赋予其高度，而无需使用 CSS 高度或内边距。
Gridlover不仅编写了实用的 CSS 代码，而且还真正帮助我理解了垂直基线和字体缩放在实际应用中的运作方式。我认为这里是学习 CSS 排版的绝佳起点。
Archetype 是另一款旨在帮助您创建精心设计、一体化字体系统的工具。它在精心设计的用户界面中同时提供了字体缩放和基线韵律的控制选项。它甚至鼓励您开箱即用地为移动设备和桌面设备设置不同的字体缩放比例。我认为它是该领域最先进的工具。
Archetype 唯一的不足之处在于，目前解锁“导出为 CSS”功能需要每年支付 59 美元。显然，这比免费的 Gridlover 要贵一些，但如果您花费大量时间构建字体系统，它可以为您节省大量时间和金钱。Archetype 非常 出色。
Archetype：专业级字体系统设计工具。
垂直基线节奏是一种工具，而非一种信仰。
垂直基线是一个非常有用的工具，但它不应该成为你设计的最终目标。我必须承认，曾经有一段时间，我花费了大量精力试图让页面上的每个元素都符合我那套严苛的网格规则。我费尽心思地调整排版比例和边距，“符合网格”本身成了我的目标，而不仅仅是一个帮助我更好地设计的工具。
那既不好玩也没用。
如今，我认为最好把垂直的低音线看作乐队中强劲的低音鼓——一个规律的节拍，它能帮助乐队其他成员把握演奏的空间。设定一个每个人都能感受到的清晰的后拍，但也不要害怕加入一些轻微的切分音。这些切分音往往能为作品（无论是视觉上的还是音乐上的）增添活力和韵味。
我个人喜欢从清晰的网格布局开始。如果标题或段落之间有空白，最好是留出一到三个完整的“垂直单元”，而不是 1.3 几个 2.75 单元。这样一来，整体感觉总是更加平衡和谐。
同样，你的主图高度最好正好是 100 12 个单位，而不是 100 个单位 11.8 或 12.3100 个单位，这样图片的底部边缘更有可能与旁边文字的底部边缘完美对齐。它具有“自动整理”功能。
但另一方面，如果图片上的文字说明在 25 像素行高下显得过于稀疏，那也没关系。这时就不用网格线了，只要看起来美观就好。
要点总结
归根结底，大多数设计工作只不过是对“为什么”问题给出一长串的答案。
为什么把主标题的高度设为 49 像素？
为什么底部边距是 17 像素？
为什么行
h3高为1.7778？
等等。
即使是小型项目，也可能存在数百个这样的小问题。你或许拥有足够的“设计师直觉”最终解答所有这些问题。问题是，这 很累人。
但是，如果你能找到一个可重复使用的系统，为大多数枯燥乏味的小问题提供可行的答案，你就可以把你的设计直觉留给更大、更重要的问题了。
这通常才是最有趣的部分。
更多内容
最新见解和行业趋势
