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

发布日期 : 2008-03-10

查看评论 [15]

我在 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;
}

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

良好的文档行距

类别标签 : , ,

读者评论

订阅本文评论

  • 1. usuning 发表于2008-03-10

    固定链接

    很不错..不过我对这方面不是专长..我比较偏于图像

  • 2. iamzhongshi 发表于2008-03-11

    固定链接

    算来算去还是不太会算…

  • 3. Lunatic Sun 发表于2008-03-11

    固定链接

    @iamzhongshi 如果还不太会算，那么可以先不要使用 em 作为单位，尝试使用 px 会使问题变得简单一些，我是用 em 的理由是它能够使IE6和以下版本能够改变字体大小。

  • 4. haloo 发表于2008-03-12

    固定链接

    这种算法好像在非IE浏览器中不受用哟。。如firefox

  • 5. Lunatic Sun 发表于2008-03-12

    固定链接

    @haloo 这个算法我在Windows操作系统的以下浏览器中测试过

    • firefox 2.0.0.12
    • firefox 3 beta 3
    • Opera 9.24
    • Safari 3.0.4

    请问您在哪个操作系统的哪个非IE浏览器中测试失败？

  • 6. haloo 发表于2008-03-12

    固定链接

    呵呵，你的效率还是蛮快的.
    我是在Firefox/2.0.0.12中试的。
    难道是我将你的代码抄错了..
    或是FF有默认的字体大小，代码不起作用了？

  • 7. Lunatic Sun 发表于2008-03-12

    固定链接

    firefox的默认样式表字体大小是16px，我是在这个设置下测试的，可能你将firefox的默认字体大小改变了，这会造成以上的代码失效，不过计算方法是没有错。

  • 8. haloo 发表于2008-03-12

    固定链接

    FF默认是16px,我并没有更改它，但显示的大小比IE总是要大，不知是什么原因？不知你说的“拥有基准线的文档”是指？

  • 9. Lunatic Sun 发表于2008-03-12

    固定链接

    “拥有基准线的文档”的文档就是在 body 元素的背景 background 上使用一张高度为 24px 的底部有一个横线的gif图片制作而成

  • 10. hax 发表于2008-03-16

    固定链接

    这种排版方法类似word里的line grid。确保line grid使得计算变得复杂很多，我觉得在web上倒是不必如此精准。当然我们平时见到的许多网站是太不注重排版了。因为这种排版较为复杂，使用者不太可能每次都自行计算，我建议你可以发布几个按照这种思路所作的完整的html默认样式表。

    我个人比较喜欢以font-size:15px/1.5作为基准的正文字体大小。即使用1.5倍行距（在word排版时我也偏好用1.5倍行距而不使用line grid。

    另外，最好也测试一下修改系统的dpi情况时的效果如何。

  • 11. Lunatic Sun 发表于2008-03-16

    固定链接

    @hax 你的提议很好，看来CSS文字界面的framework要比我的Javascript代码先行一步了。

  • 12. yoyo2007 发表于2008-03-17

    固定链接

    这样的方法挺不错！～！但有个小问题！～！为什么不用px？
    比如
    .aaa{ font-size : 12px; line-height : 170%; margin : 0px 2px;
    }

  • 13. yoyo2007 发表于2008-03-17

    固定链接

    个人比较习惯用px来定义！～

  • 14. Lunatic Sun 发表于2008-03-17

    固定链接

    @yoyo2007 评论第三项 已经说明

  • 15. 学习笔记 发表于2008-04-14

    固定链接

    要做成这样不难，但难在可维护性上，基准线的大小是个问题，每行的行高也是个问题，如果有张图片在这个文档中，效果会变成怎么样的呢？

    想也可以想出来~

本文发表6星期以后评论已自动禁止