如何设置基线网络

本文由大漠根据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是一个相对单位,在pxem之间转换时是一门复杂的数学运算,其中具有一定的规则。如果你从未深入了解过两者之间的转换,我个强烈建议您阅读《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上去。这样我们的垂直规律(ver­tical 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/

中文译文:http://www.w3cplus.com/css/how-to-set-up-a-baseline-grid.html

Undercover Nike Daybreak Release Date

如需转载,烦请注明出处:https://www.w3cplus.com/css/how-to-set-up-a-baseline-grid.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部