排版需要处理大量的数据、文字、图片等，还有其搭配的比例，所以排版的一些技巧就有点难以抓住了。但这同样也意味着你越了解排版，那就越可能用这些技巧排版出更好的设计和更好的阅读体验。排版出好的网页是一件困难的事情，当我们讨论到网页排版的的时候，我们提出了一个术语：垂直阅读节奏。

经过反复试验——调整字体间距和大小——你会发现在阅读过程中创建一个完美的垂直节奏是一个非常好的排版。

延伸阅读：(Re)Adopting the Design-in-Browser Approach

什么是垂直阅读节奏？

现在就让我为大家解释下这个术语，让我们来定义下什么是垂直阅读节奏。通常情况下，节奏是指反复出现的模式，越一致的模式，节奏越强。当把它用到网页设计里，垂直阅读节奏的意思是怎样让阅读者的眼睛浏览到网页的内容。越一致越平衡的模式，对于访问网站的人来说就越容易阅读。

为什么它如此重要？

垂直阅读节奏很重要，是因为它允许访问者更容易方便去阅读内容。当节奏一致的时候，阅读内容就不用去拉内容、分清楚网页的板式去看了，这样就会创造出一个更好的全程体验。它主要是在访问者在阅读、获得信息的过程中，去掉视觉上的变形和阻碍。

创造一个好的垂直阅读节奏是一个非常有挑战性的事情。在网页上，将文字和图片搭配好事非常困难的。有太多你应该要问的问题了：标题会不会太大？或者太小了？段间距会不会太大或者太小？

它全部是关于怎样得到正确的比例，这不是火箭科学，而是怎样去解决。没有一个神奇的比例数据可以将所有的设计都可以有垂直阅读节奏。但好消息就是去找出这个数据、得到这个窍门并不难。

了解基础

有三大影响垂直阅读节奏的因素：行高度、字体大小和内边距（或版口）。让我们一个一个的来讨论一下，这样你就可以自己计算垂直阅读节奏了。

定义字体大小和行高度

你想做的第一件事情就是去定义网页正文的标准字体大小和行高度。为了能清晰的阅读文本，文本的行间距或者行高度需要足够的间距，读者才能毫不费力的去阅读、浏览。下面这个例子就是我们所定义的。

举这个例子的目的是，我用12PX作为基本尺寸。我设置了行高度为1.5em,这样就可以增加6PX的底部高度给文本，这样行高度就是18PX。这就是怎么创建行高度，当然还有垂直阅读节奏的基本单元。

测量外边距

标准的，浏览器会加载外边距从段落的顶部到底部，这个区域间节奏是最容易混乱的。很多浏览器设置的外边距的顶部和底部为1em，但是为了保持一个号的节奏外边距，需要把大小和行高度设置成一样。当你开始考虑这个问题，这就相当有意义了，因为段落之间的间距与专线之间的间距一样，这样使页面看起来很好并且平分会很有节奏感。

重置外边距

我强烈的建议你用Mayer’s Reset（没有被所有的浏览器中设置的元素标准所限制）的所有元素做一个非常难得重置。这是很有帮助的，因为你就可以不受现有的标准化设置限制，你可以完全无顾虑的、从一个完全空白的浏览器开始。

采用一个快速但是不是特别干净的方法去摆脱各种元素间不需要的内间距和外边距，可以采用下面的步骤：

定义外边距

无论你是不是要适当的重置，我们需要定义段落之间的外边距。这里的区别在于在这次的重置里，你正在定义的外边距并不是你有的，你必须得高于浏览器自带的标准。

正如你上面所看到的，我们简单把外边距和行高设置成一样。当然你也可以分开设置外边距的顶边与底边，但是在这个例子里并没有必要。

设定文本多余的部分

段落不是网页仅有的文本。让我们在看看怎样设定多样的标题大小。

无论是什么样的文本，它都应该有一个为段落设置的行高（在我们的例子里，行高是18px）。你可以调整多个标题以去匹配这个行高。

H1

定义H1要稍微简单点，例如一般设置为段落的两倍——2em。为了保证我们的段落的行高一样，我们需要设置H1的行高为1.5em。事实上，这意味着H1要比行高要大一点，所以我们将要使用外边距区弥补这个差距。

H2

H2要比H1小一点点。记住18px的行高，让我们设置H2的高度为22px或者1.8333em。为了保持18px的行高，我们需要定义H2的行高和外边距的顶部与底边为1.6364em。为什么？因为18/14=.8181em，现在H2要大一些。所以我们需要简单的去加倍2*.8181=1.6364em的行高与顶边。

H3到H6

到现在，你应该在设置垂直阅读节奏后找到了方法。我只是给你一些剩下的H3到H6的代码，你就有正确的测量值了。

总结

我希望你已经在你的CSS里如何创造出垂直阅读节奏的好方法。定义其实是一件相当简单的事情，它对你的网页设计非常的重要。