构建一个垂直规律

本文由大漠根据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-heightpaddingmargin

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/

中文译文:http://www.w3cplus.com/css/compose-to-a-vertical-rhythm.html

返回顶部