构建一个垂直规律
本文由大漠根据Richard Rutter的《Compose to a Vertical Rhythm》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明原作者相关信息http://24ways.org/2006/compose-to-a-vertical-rhythm。
——作者：Richard Rutter
——译者：大漠
排版中的空间就如音乐中的时间。它是无法区分的，但少数的时间间隔比任意数量的选择更有意义。印刷商Robert Bringhurst曾经说过：“常规时间为音乐提供了更好的节奏”。所以在排版中提供有规律的空间比没有规律的要更具有可读性，不会让读者变得迷惘和丢失方向。
在Web排版中，垂直规律指的是文本的排版和间距，引导读者往下阅读主要包括三个因素：文字大小，行高和外距或者内距。所以这些因素要让垂直规律保持不变。
垂直空间的基本单位就是行高。建立一个可以用于页面上的所有文本，不管是标题，主体内容还是侧边栏内容，最关键的就是有一个可靠稳定的垂直方向的规律，这能让读者更好的往下阅读。在这里，我为标题，主内容和侧边栏内容创建了一个实例。
创建适当的行高
开始创建一个行高的单位，最简单的办法就是从<body>的文本的字体大小中复制出来。在这个示例中，我选择了12px。为了保证文本具有更好的可读性，我们需要设置一个行间距。1.5em的行高会给文本之间增加一个6px的间距。这将创建一个18px的行高，也就成为我们的一个基本单元。CSS是这样写的：
body {
font-size: 75%;
}
html>body {
font-size: 12px;
}
p {
line-height 1.5em;
}
在CSS中设置文字大小有多种方法，上面提供的方法是依据印刷排版的方法，使用像素给文本设置大小。顺便解释一下，第一个文本大小，我从16px（浏览器默认字体为16px）降低到12px，将其设置为正文的字体大小。第二条规则主要是用于Windows系统IE6以下浏览器，百分比值用于文本大小会或多或少的偏差。忽略IE6浏览器，使用Firefox、Safari、IE7+和Opera等主流浏览器，用户可以自动调整浏览器的文本大小。
段落之间的间距
随着垂直规律的单元设置为18px，我们需要确保的是他依据于body的文本基础之上（保持body文本大小不变）。失去垂直规律一个常用的地方是设置边缘之间的空白。在Web浏览器中段落具有一个默认的顶部和底部的外边距值为1em。在我们的示例之中，给段落设置了顶部和底部边距为12px。如果要让垂直规律保持不变，需要将段落间距与行高设置相等。这一般是通过设置段落的顶部和底部的外边距等于行高来实现。
为了适配用户调整文本大小，也能保持排版的完整性，我们必须给垂直方向的测量值使用em为单位，包括line-height、padding和margin。
p {
font-size:1em;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
浏览器对一些块元素（比如，标题，列表和引用元素等）都有一个默认的顶部和底部的外边距，为了让排版对这些元素具有一致性，常使用的方法是重置他们的外边距值。你可以参考下面这样的方法：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
margin:0;
padding:0;
}
或者你可以考虑使用Yahoo的重置样式表。从而消除了浏览器对元素的默认样式，提供一个较好的基础。你可以显示的声明你的设计意图。
文字大小变化
当基本文本大小改变时，或许是标题或者是侧边栏内容，不同的文本也应该按基本单位的倍数来进行调整。这意味着，在我们的示例中，基本文字大小，都应该是18px的倍数。这可以通过调整相应的行高或外边距来实现，如下所述。
标题
示例页面中的副标题设置了字号为14px。为了使每一行的高度为18px，行高应该设置为18 ÷ 14 = 1.286。类似上面段落部分所言，标题的顶部外边距和底部外边距也要做一定相应的调整。标题简单的将外边距设置为1em，但为了保持垂直规律，上下外边距应该设置为1.286em，这样间距才将等于18px这个基本单元值。
h2 {
font-size:1.1667em;
line-height: 1.286em;
margin-top: 1.286em;
margin-bottom: 1.286em;
}
你也可以为标题设置不对称的外边距，基于基本行高单元值，你可能结合起来设置。在我们的示例中，顶部边外边距设置为行高的1.5倍，而底部外边距设置为行高的一半：
h2 {
font-size:1.1667em;
line-height: 1.286em;
margin-top: 1.929em;
margin-bottom: 0.643em;
}
另外，在我们示例中主标题文字大小设置为18px，因此行高设置为1em。因为外边距进行了修改：
h1 {
font-size:1.5em;
line-height: 1em;
margin-top: 0;
margin-bottom: 1em;
}
侧边栏文本
侧边栏文本，相对于基本的文本而言，文字大小设置都相对较小。为了保持垂直规律，这种较小的文本也应该依据于body的字号进行设置。类似于标题计算一样，在我们示例中，文本大小设置为10px,因此他们的行高应该增加到18 ÷ 10 = 1.8。
.sidenote {
font-size:0.8333em;
line-height:1.8em;
}
边框
一个垂直规律的丢失往往跟元素增加水平边框有很大的关系。这些边框直接将文本推到后面，所以哪怕两个像素的边框也将让垂直规律失去。解决办法就是使用背景图像来制作水平边框，在我们示例中是给边框使用em为单位，并通过调整内距来解决。
在我们示例中，页脚有一个1px的水平边框。页脚文本大小是12px，所以1px就等于：1 ÷12 = 0.0833。我们在边框上面加入1.5的外边距:1.5 × 18 ÷12 = 2.5em。所以为了保持垂直规律的边界，那么边框加上内距要等于一半，也就是9px。我们知道，边框设置为1px，内距就要设置为8px，如此我们可以计算出：8 ÷12 = 0.667。
打造我的垂直规律
打造一个具有垂直规律助于吸引读者并引导读者继续往下阅读，但他需要排版按这样的规律来做。它可能看起来更像是一些数学计算，较为麻烦，但良好的设置都是依据这些数据，而正是这种关注细节，才能成功的关键。
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
如需转载烦请注明出处：
英文出处：http://24ways.org/2006/compose-to-a-vertical-rhythm/
中文译文：https://www.fedev.cn/css/compose-to-a-vertical-rhythm.html
jordans for sale edition