2

我有标题，每个都有一些边距。

我使用的http://pxtoem.com/女巫是基于Normalize CSS 项目的。

我查看了边距，我认为它们不成比例。

问题：

如何计算标题的理想底部边距？

注意：寻找一些计算器/工具/公式

HTML：

<h1>Header H1</h1>
<h2>Header H2</h2>
<h3>Header H3</h3>
<h4>Header H4</h4>
<h5>Header H5</h5>
<h6>Header H6</h6>

CSS：

/* Base: 1em = 14px */

body {
    font-size: 0.875em;
    -webkit-text-size-adjust: 0.875em;
    -ms-text-size-adjust: 0.875em;
}

h1 {font-size: 2em; margin: 0.67em 0;}
h2 {font-size: 1.5em; margin: 0.83em 0;}
h3 {font-size: 1.17em; margin: 1em 0;}
h4 {font-size: 1em; margin: 1.33em 0;}
h5 {font-size: 0.83em; margin: 1.67em 0;}
h6 {font-size: 0.75em; margin: 2.33em 0;}

输出：

预习

注意 H5 和 H6 之间的余量。

我对你的建议持开放态度:)

4

1 回答 1

2

查看有关垂直节奏和基线结构的文章。

http://typecast.com/blog/4-simple-steps-to-vertical-rhythm

http://alistapart.com/article/settingtypeontheweb

你已经在正确的路线上，但我会从以像素为单位设置正文字体大小开始，其他所有内容（包括行高）都与使用 ems 相关。

例如：

body { 
  font-size: 15px;
  line-height: 1.6em; /* 24px */ }

p { padding-bottom: 1.6em;  /* 24px */  }

h1 { 
  font-size: 2em; /* 30px */
  line-height: 1.6em; /* 24px */
  margin: 0 0 0.8em; /* 24px */ }

h2 { 
  font-size: 1.6em; /* 24px */
  line-height: 1em; /* 24px */
  margin-bottom: 1em; /* 24px */ }

在我上面的例子中，body line-height 1.6em 等于 24px。因此，您的基线是 24 像素。这意味着 line-heights 应该始终是它的倍数，margin 也应该是它的倍数。

我的 H1 和 H2 示例导致下面的边距分别为 24px 和 48px 和 24px 行高。当然，你可以从任何你喜欢的 font-size 开始，并使用 body font-size 或 line-height 的任意倍数，只要保持垂直节奏即可。

印刷布局的关键是基线一致性。使布局非常整洁！

于 2013-09-13T12:48:32.913 回答