用CSS设计垂直间距优化文字界面

我在 Web 2.0中文Typography设计一文中已经提到，垂直间距的设置是文字布局的关键，也是比较复杂的地方，我们需要通过计算来实现精确布局，达到一种和谐的美，下面我将具体展示如何使用CSS设置垂直间距达到精确定位文字布局的目的。

首先我们需要一个拥有基准线的文档，这样就可以衡量我们的字里行间是否真正精确无误，在这里我设置了 24px 的行距以便测试。

首先你需要取消所有的浏览器默认样式。

*{
    margin : 0;
    padding : 0;
}

然后设置你希望的文档的具体内容的一般性字体大小，我这里采用 13px 。

body{
    font-size : 0.8125em;
}

为了使我的 13px 的字体嵌入到 24px 的行距中，我应该如何做呢？是的，设置 line-height 。

p{
    line-height : 1.846em;
}

我希望在每个段落之后能够有一定的空白，使我的每个段落能够更加清晰，所以我应当设置 margin-bottom ，它必须是 1.846em 的整数倍，才能使后一段落仍然嵌在 24px 的行距中。

p{
    line-height : 1.846em;
    margin-bottom : 1.846em;
}

注意，整体段落的整齐划一是最重要的，其他如标题，分割线之类应当穿插在其中，所以设置标题等元素时需要进行一番计算。首先你需要确定你想要的标题的字体大小和行高，因为它们将决定你的文字看起来有多大相隔多少，但是注意应当使你的插入的元素的行高均以 24px 为基准，设置以它为整数倍的值为插入元素的行高。如 h1 大小我选择 1.6em ，行高就需要 1.154em ， h2 大小选择 1.4em ，行高就需要 1.319em 。如果我需要在 h2 与段落之间有比段落之间更大的宽度，我希望 margin-top 在 2em ，那么计算得到的 margin-bottom 就应当是 0.667em ，以使它们相加后能够成为 24px 的倍数。所以我将在 h1 和 h2 中应用以下样式：

h1{
    font-size : 1.6em;
    line-height : 1.154em;
    margin : 1.5em 0 0.808em 0;
}

h2{
    font-size : 1.4em;
    line-height : 1.319em;
    margin : 2em 0 0.667em 0;
}

最后，我们就能够看到一个嵌入的恰到好处的文章内容了。

本文首发于：http://www.lunaticsun.com/article/typography-vertical

相关文章：

你感兴趣的文章：

标签云：