在HTML（以及一般的排版，我想）中，似乎有一些H1-H6元素的定义大小。
即，如果基线字体大小为16px（或100％），则h1（w / c）应为2.25em（36px）。 H2（w / c）应为1.5em（24px）。等等。这些变量来自哪里？ H1 = 36px，H2 = 24px，H3 = 21px，H4 = 18px，H5 = 16px，H6 = 14px，即。 （或者，如果你愿意，H1 = 2em，H2 = 1.5em，H3 = 1.17em等，这一点不是数字本身，而是它们之间的关系）
它们有一些数学公式吗？它与黄金比例或斐波那契有关吗？我一直无法找到相关信息。
编辑：更具体地说，模式是什么;为什么从36到24到21，或从36开始（或者，如果你喜欢，从2em到1.5em到1.17em等）？
哦，我忘了说明我想出的原始数字，他们来自here
我知道这篇文章很老了。我遇到了同样的问题，他们从哪里得到这个。我想我找到了。
它是五声音乐音阶的衍生物。无论如何，类型比例。标题取自类型标度，但不是按1：1的顺序排列。
比例为：8 9 10 12 14 16 18 21 24 ......比例分为5个步骤（12到24）。每个步骤是基数（12）乘以2（标度['它加倍']）到i的幂（步长）除以5（ttl步）['i / 5'] - 四舍五入到最近。
所以h4是基础，h3是步骤1，h2是步骤3，h1是步骤5，或者是五音阶的12。 h5和h6从另一个方向是1步和3步。如果我理解这一点，它将相当于一个E大调和弦。
这花了我大约2个小时来弄清楚电子表格和音阶的解释。
W3C建议a default rendering stylesheet供浏览器实现。
你会发现你的数字与他们不同。那是因为浏览器制造商习惯忽视W3C所说的一切。
对于bootstrap，标题标签字体大小的变化（以像素为单位）如下所示检查此引导标题
h1 - 36px） h2 - 30px h3 - 24px h4 - 18px h5 - 14px h6 - 12px
它们由每个浏览器制造商独立定义。
它们在浏览器中并不统一，并且存在语义（大标题，略小的标题等等）。
如果你看一下HTML 4规范for these，就没有提到它们应该如何被设计，只有它们应该是。从规格：
Visual browsers usually render more important headings in larger fonts than less important ones.
如果您希望这些一致，则应使用定义它们的reset stylesheet。
即使w3已经为HTML 4定义了一个建议的default stylesheet，但是大多数浏览器都忽略了这个建议：
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6 { font-weight: bolder }
（是的，我看到h4没有font-size:）
一种可能的进展方法是使用平方根，通过公式如2 / sqrt [标题＃]。因此，你有：
H1 = 2/sqrt1 = 2
H2 = 2/sqrt2 = 1.414
H3 = 2/sqrt3 = 1.155
H4 = 2/sqrt4 = 1
H5 = 2/sqrt5 = 0.894
H6 = 2/sqrt6 = 0.816
对于12的字体基数，它足够接近24,17,14,12,11,10。对于其他基数，结果可能距离整数稍远一些。
Fibonacci适用于16号基础，所以你有：
H1=32
H2=24
H3=19
H4=16
H5=14
H6=13
正如其他人所说，它依赖于浏览器。
另一方面，排版中有一条规则来设置字体大小：如果基本字体的大小为X，则较大的字体应呈指数增长;通常的方法是有尺寸X*sqrt(2)，X*sqrt(2)^2，X*sqrt(2)^3等，但你可以改变基数。
但是，计算机字体有一些特殊要求。
它们过去只是以位图形式提供（所以大小是固定的），即使以矢量形式提供 - 某些格式更喜欢一些特殊尺寸：可被2或5整除（这与Amiga的旧矢量字体有关） ... Agfa Intellifont？）。
即使现在字体引擎更像整数，因为它们的提示算法效果更好。
由于这些技术限制，人们似乎已经习惯了所选择的值，即使字体引擎现在好多了。
一些名义数字：
Default style sheet for HTML 4：
Firefox 3和Safari 4 (actually, WebCore)：
在看了几种不同的字体大小的方法后，我想出了以下算法/计算：H1~H6，p，菜单等，html设置为100％（通常为16px），以及以下的rem单位。这是从经常使用的1.14 / .875'幻数中调整出来的。我的.8735看起来效果很好，p为16px / 1rem，高达H1为36px / 2.25rem，并且达到相当“正常”的px值，如12,14,16,18,21,24,28,32，我知道36，等等，对于Jumbotrons来说高达54，而对于.zilch来说这是矫枉过正的。我通常呆在.huge和.micro中。基本上我从p开始等于1.0rem并连续乘以.8735来变小或相继除以变大：
item rem px pt
.giant 3.38 54.4 41
.huge 2.95 47.2 35
.big 2.58 41.3 31
h1 2.25 36.0 27
h2 1.97 31.5 24
h3 1.72 27.5 21
h4 1.50 24.0 18
h5 1.31 21.0 16
h6 1.15 18.4 14
p 1.00 16.0 12
.menus 0.87 13.9 10
.legal 0.76 12.2 9
.micro 0.67 10.7 8
.zilch 0.58 9.3 7
/* Font-Sizes using pt */
.giant { font-size:41pt; }
.huge { font-size:35pt; }
.big { font-size:31pt; }
h1 { font-size:27pt; margin-top:0; }
h2 { font-size:24pt; }
h3 { font-size:21pt; }
h4 { font-size:18pt; }
h5 { font-size:16pt; }
h6 { font-size:14pt; }
p { font-size:12pt; margin-bottom:15pt; }
.menus { font-size:10pt; }
.legal { font-size: 9pt; }
.micro { font-size: 8pt; }
.zilch { font-size: 7pt; }
我最近一直在使用积分（pt），你可以看到它更容易使用，并且在每个人因为不使用rem或em之前弯曲变形之前我会坦率地说，此时（没有双关语意）我真的不认为这很重要。我开始使用对我来说更容易的东西。使用计算简单整数的点比使用小数点的rems更容易处理更容易。
以更一般的方式，像这样的相关尺寸通常基于几何系列，即每个连续数字比前一个更大的常数因子（类似于1.2或sqrt（2））。扳手和六角扳手的尺寸，或机械中的螺钉直径等，或A5 / A4 / A3 ...系列纸张尺寸都有相同的进展。
他们中的许多人说标题标签的大小不同，但是从bootstrap到默认font-size有一个变化。提到的是默认的字体大小：
h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}
我认为这取决于浏览器，甚至可能让用户定义字体大小（我记得歌剧这样做）。 HTML spec没有详细说明：
HTML中有六个级别的标题，其中H1是最重要的，而H6是最不重要的。可视浏览器通常在较大字体中呈现比不太重要的字体更重要的标题。
这是故意的，因为HTML旨在描述结构，而不是文档的表示。