如何设置基线网络

发布于大漠

10 年前

本文由大漠根据Joshua Hibbert的《How to Set Up a Baseline Grid》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明原作者相关信息http://joshnh.com/2011/08/03/how-to-set-up-a-baseline-grid。

——作者：Joshua Hibbert

——译者：大漠

如何设置基线网络

在线工具

首先，当谈到排版，我们先要了解基线是什么？维基百科是这样定义)的：在排版和书法中，基线是以字终sit底线为基础，并且向两边延伸的直线。

好极了，但我为什么要忽视他呢？好希望你充满激情的去设计一个非常好看的网站。我的愚见是，一个惊人的网站的基础在于他的排版。为了让网站上的所有文本流动顺畅对齐，我们就要基于一个网格线来排版，这也就有了基线网格一说，也使基线网格有用武之处。基线将确保有一个适当的行高，这是非常重要的，它适用于任何列的布局当中。

让我们继续深入！正如我将要创建一个具有响应性的基线，我使用em做为单位，并且在<body>元素中设置默认font-size值，以确保所有浏览器呈现的文字大小是一致的。

body {
    font-size: 100%;
}

采用100%值，浏览器将会渲染字体大小等于浏览器的默认值，也就是16px。接下来，我们需要创建一个排版的样式风格。根据排版元素的层次结构，我将文本字号定义为：16,18,21,24,36,48。我们来看看样式：

h1 {
    font-size: 3em; /* 48 ÷ 16 = 3 */
}
h2 {
    font-size: 2.25em; /* 36 ÷ 16 = 2.25 */
}
h3 {
    font-size: 1.5em; /* 24 ÷ 16 = 1.5 */
}
h4 {
    font-size: 1.3125em; /* 21 ÷ 16 = 1.3125 */
}
h5 {
    font-size: 1.125em; /* 18 ÷ 16 = 1.125 */
}
h6 {
    font-size: 1em; /* 16 ÷ 16 = 1 */
}
p {
    font-size: 1em; /* 16 ÷ 16 = 1 */
}

这里就是一大堆数学运算，可能让人感觉头晕，会比较混乱。em是一个相对单位，1em是当前font-size的一倍，而3em就是当前font-size的3倍（记住，我们当前字体大小是100％或16px）。我们排版需要将单位转换成em。我这里有一个公式："目标字号　÷ 当前字号"。如果我们希望<h1>的font-size设置值为32px，根据公式可以计算出:"32px ÷ 16px = 2em"。我给每个样式后面注释了计算方法，以免混淆。

em是一个相对单位，在px和em之间转换时是一门复杂的数学运算，其中具有一定的规则。如果你从未深入了解过两者之间的转换，我个强烈建议您阅读《CSS中强大的EM》一文。——@大漠

现在我们已经有了一份使用em制作的排版风格，我们还需要创建一个合适的行高line-height。正是这种行高加上元素上下外边距，并且根据不同的排版元素做相应的调整，创建了我们的基线。根据经验，可读文本的一般规则是将行高设置为字体大小的1.4~1.5倍。我这里使用的是1.5倍，我不介意给文本之间留有更多的间隙。鉴于我们的默认字体大小是16px，那么行高就是24px（16px的1.5倍）。

还记得前面算出font-size的em公式吗？我们也可以运用到我们行高的计算中来："目标行高 ÷ 当前字号"。加上行高的排版样式是这样：

h1 {
    font-size: 3em; /* 48 ÷ 16 = 3*/
    line-height: 1em; /* 48 ÷ 48 = 1 */
}
h2 {
    font-size: 2.25em; /* 36 ÷ 16 = 2.25 */
    line-height: 1.333333333333333em; /* 48 ÷ 36 */
}
h3 {
    font-size: 1.5em; /* 24 ÷ 16 */
    line-height: 1em; /* 24 ÷ 24 */
}
h4 {
    font-size: 1.3125em; /* 21 ÷ 16 */
    line-height: 1.142857142857143em; /* 24 ÷ 21 */
}
h5 {
    font-size: 1.125em; /* 18 ÷ 16 */
    line-height: 1.333333333333333em; /* 24 ÷ 18 */
}
h6 {
    font-size: 1em; /* 16 ÷ 16 */
    line-height: 1.5em; /* 24 ÷ 16 */
}
p {
    font-size: 1em; /* 16 ÷ 16 */
    line-height: 1.5em; /* 24 ÷ 16 */
}

正如大家所看到的，h1和h2的字号比较大，我们把行高也翻倍了。

剩下的事情就是给这些元素添加一些间距。我喜欢将行高的值用到margin-bottom上去。这样我们的垂直规律(vertical rhythm)看起来蛮不错，而且均匀。我创建的基线网格：

h1 {
    font-size: 3em; /* 48 ÷ 16 */
    line-height: 1em; /* 48 ÷ 48 */
    margin-bottom: .5em; /* 24 ÷ 48 */
}
h2 {
    font-size: 2.25em; /* 36 ÷ 16 */
    line-height: 1.333333333333333em; /* 48 ÷ 36 */
    margin-bottom: .6666666666666667em; /* 24 ÷ 36 */
}
h3 {
    font-size: 1.5em; /* 24 ÷ 16 */
    line-height: 1em; /* 24 ÷ 24 */
    margin-bottom: 1em; /* 24 ÷ 24 */
}
h4 {
    font-size: 1.3125em; /* 21 ÷ 16 */
    line-height: 1.142857142857143em; /* 24 ÷ 21 */
    margin-bottom: 1.142857142857143em; /* 24 ÷ 21 */
}
h5 {
    font-size: 1.125em; /* 18 ÷ 16 */
    line-height: 1.333333333333333em; /* 24 ÷ 18 */
    margin-bottom: 1.333333333333333em; /* 24 ÷ 18 */
}
h6 {
    font-size: 1em; /* 16 ÷ 16 */
    line-height: 1.5em; /* 24 ÷ 16 */
    margin-bottom: 1.5em; /* 24 ÷ 16 */
}
p {
    font-size: 1em; /* 16 ÷ 16 */
    line-height: 1.5em; /* 24 ÷ 16 */
    margin-bottom: 1.5em; /* 24 ÷ 16 */
}

就这样，我们有一个漂亮的文字排版的基础。但使用em对于大家来说是一个挑战，但对于基线网格来说是一个很好的处理方式，可以让你的排版更方便而且还可以做到大小响应（用户修改字体大小）。您的访问会非常欣赏你的网站，因为你为此付投入了时间与精力。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文出处：http://joshnh.com/2011/08/03/how-to-set-up-a-baseline-grid/

中文译文：https://www.fedev.cn/css/how-to-set-up-a-baseline-grid.html

Undercover Nike Daybreak Release Date