排版比例基础知识

构建一个排版比例可能看起来很难。但只要学习一些基本的技巧和原则，就并不那么困难。

首先，选择一个字体系列，一个字体大小的起始值和一个作为缩放因子的比例。这些变量的常见值是Roboto字体系列，由于其拥有许多不同的字重，因此是一个很好的选择，起始字体大小为18px，比例为1.618，即黄金比例。

基于这些值，我们的排版比例的基础是一个具有font-size: 18px和line-height: 1.618的元素。注意，比例也应用于行高。这样可以使文本有更多的空间，更容易阅读，同时创建一个一致的垂直韵律。

接下来，我们将应用比例来放大或缩小字体，根据需要进行调整。例如，我们可以将字体乘以1.618一次，用于副标题，两次用于普通标题，三次用于大标题（例如主页上的网站名称）。同样地，我们可以通过除以比例来缩小字体，使元素的视觉重要性降低（例如脚注）。

虽然这给我们提供了一个相当稳定的设置，但有些元素可能看起来没有得到适当的强调。为了解决这个问题，我们可以使用字重来增加或减少某些元素的视觉重要性。例如，我们可以使标题加粗，以使它们更重要。我们还可以使脚注略微加粗，以强调它们，因为它们的字体大小非常小，可能会被忽视。

将所有这些内容整合在一起，我们应该得到一个类似于以下的排版比例：

```css :root { --font-family: 'Roboto', sans-serif; --font-size: 18px; --font-weight: 300; --line-height: 1.618; }

• { font-family: var(--font-family); font-size: var(--font-size); font-weight: var(--font-weight); line-height: var(--line-height); }

上面的示例是构建自己的排版比例的一个非常简单的起点，应用一些简单的原则来创建一个自然且有效的视觉层次结构。请随意调整变量的起始值并进行实验，以获得最适合您设计的最佳结果。