html - 计算标题的理想底部边距

Question

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

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

我查看了边距，在我看来它们不成比例。

问题:

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

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

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 之间的通知裕度。

我愿意接受您的建议:)

Answer 1

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

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

http://alistapart.com/article/settingtypeontheweb

你已经在正确的行上，但我首先以像素为单位设置正文字体大小，其他所有内容(包括行高)都相对于使用em。

例如:

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 */ }

在上面的示例中，正文行高 1.6em 等于 24px。因此你的基线是 24px。这意味着行高应始终是其倍数，边距也应是该倍数。

我的 H1 和 H2 示例的下边距为 24 像素，行高分别为 48 像素和 24 像素。当然，您可以从您喜欢的任何字体大小开始，并使用正文字体大小或行高的任意倍数，只要保持垂直节奏即可。

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