HTML 中的 H1-H6 字体大小

H1-H6 font sizes in HTML

提问by morbusg

In HTML (and in typography in general, I suppose), there appears to be some defined sizes for H1-H6 -elements.

在 HTML（以及一般的排版中，我想）中，似乎有一些 H1-H6 元素的定义大小。

Ie., if the baseline font size is 16px (or 100%), then h1 (w/c)ould be 2.25em (36px). And H2 (w/c)ould be 1.5em (24px). Et cetera. Where do these variables come from? The H1=36px, H2=24px, H3=21px, H4=18px, H5=16px, H6=14px, that is. (or, if you like, H1=2em, H2=1.5em, H3=1.17em, etc., the point isn't the numbers themselves, but the relation between them)

即，如果基线字体大小是 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，等等，重点不是数字本身，而是它们之间的关系）

Is there some mathematical formula for them? Does it have something to do with golden ratio or fibonacci? I haven't been able to find information on this.

他们有什么数学公式吗？它与黄金比例或斐波那契有关系吗？我一直无法找到这方面的信息。

EDIT: to be more specific, what is the pattern; why does it go from 36 to 24 to 21, or start from 36 to begin with (or, if you like, from 2em to 1.5em to 1.17em, etc.)?

编辑：更具体地说，模式是什么；为什么它从 36 到 24 到 21，或者从 36 开始（或者，如果你喜欢，从 2em 到 1.5em 到 1.17em，等等）？

Oh, I forgot to specify where I came up with the original numbers, they're from here

哦，我忘了说明我是从哪里得到原始数字的，它们来自这里

采纳答案by Dante

I know this post is old. I came across it with the same question, where do they get this from. I think I found it.

我知道这个帖子很旧。我遇到了同样的问题，他们从哪里得到这个。我想我找到了。

It is a derivation of a pentatonic music scale. The Type scale is anyway. The Headings are taken from the Type scale, though not in a 1:1 order.

它是五声音阶的派生。无论如何，类型比例是。标题取自类型比例，但不是 1:1 的顺序。

The scale goes: 8 9 10 12 14 16 18 21 24... The scale doubles in 5 steps (12 to 24). Each step is the base(12) times 2(the scale['it doubles']) to the power of i(step) divided by 5(ttl steps)['i/5'] - rounded to the nearest.

比例尺为：8 9 10 12 14 16 18 21 24... 比例尺分 5 步（12 到 24）翻倍。每一步都是基数（12）乘以 2（比例['它加倍']）到 i（步）的幂除以 5（ttl 步）['i/5'] - 舍入到最接近的值。

So h4 is the base, h3 is step 1, h2 is step 3, and h1 is step 5, or the octive of 12 on a pentatonic scale. h5 and h6 are 1 and 3 steps from base the other way.If I understand this, it would be the equivalent of a, E major chord.

所以 h4 是基音，h3 是第 1 步，h2 是第 3 步，h1 是第 5 步，或五声音阶上的 12 八度。h5 和 h6 是相反的 1 和 3 步。如果我理解这一点，它就相当于一个，E 大调和弦。

That took me about 2 hours to figure out with a spreadsheet and an explanation of musical scales.

我花了大约 2 个小时才用电子表格和对音阶的解释来弄清楚。

回答by Oded

They are defined by each browser maker independently.

它们由每个浏览器制造商独立定义。

They are not uniform across browsers and are there for semantics (Large header, slightly smaller header etc...).

它们在浏览器之间并不统一，并且是为了语义（大标题，稍小的标题等......）。

If you look at the HTML 4 specification for these, there no mention of howthey are supposed to be styled, only that they shouldbe. From the spec:

如果你看一下HTML 4规范这些，也没有提到如何，他们都应该是病急乱投医，只是他们应该是。从规范：

Visual browsers usually render more important headings in larger fonts than less important ones.

Visual browsers usually render more important headings in larger fonts than less important ones.

If you want these to be consistent, you should use a reset stylesheetthat defines them.

如果您希望这些保持一致，您应该使用定义它们的重置样式表。

Even though w3 has defined a suggested default stylesheetfor HTML 4 with the following details, most browsers ignore this suggestion:

尽管 w3为 HTML 4定义了一个建议的默认样式表，包含以下详细信息，但大多数浏览器忽略了这个建议：

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 }

(yes, I see no font-size:for h4)

（是的，我看不到font-size:h4）

回答by liori

It is browser-dependant, as other say.

正如其他人所说，它依赖于浏览器。

On the other side, there is a rule in typography to set font sizes: if the base font has size X, the larger fonts should grow exponentially; the usual way is to have sizes X*sqrt(2), X*sqrt(2)^2, X*sqrt(2)^3and so on, but you can change the base.

另一方面，排版中有一个规则来设置字体大小：如果基本字体有 size X，则较大的字体应该呈指数增长；通常的方式是有大小X*sqrt(2)，X*sqrt(2)^2，X*sqrt(2)^3等等，但你可以改变的基础。

However, computer fonts have some special requirements.

但是，计算机字体有一些特殊要求。

They used to be provided in a bitmap form only (so the sizes were fixed), and even when provided in vector form -- some formats preferred some special sizes: divisible by 2 or 5 (this was f.e. the case with Amiga's old vector fonts... Agfa Intellifont?).

它们过去仅以位图形式提供（因此大小是固定的），即使以矢量形式提供 - 某些格式更喜欢某些特殊大小：可被 2 或 5 整除（Amiga 的旧矢量字体就是这种情况...爱克发智能字体？）。

Even now font engines like integer sizes more, because their hinting algorithms work better.

即使现在字体引擎更喜欢整数大小，因为它们的提示算法效果更好。

And people seem to got used to the values chosen because of these technical restrictions, even though font engines got much better now.

人们似乎已经习惯了由于这些技术限制而选择的值，尽管字体引擎现在变得更好了。

回答by Lucian Davidescu

One possible progression approach is to use square roots, via a formula such as 2/sqrt[heading#]. Hence, you'd have:

一种可能的级数方法是使用平方根，通过诸如 2/sqrt[heading#] 之类的公式。因此，您将拥有：

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

For a font base of 12, that'd be close enough to 24, 17, 14, 12, 11, 10. For other bases, the results may be a bit farther away from integers.

对于 12 的字体基数，这足够接近 24、17、14、12、11、10。对于其他基数，结果可能与整数相差一些。

Fibonacci would work well with base 16, so you'd have:

斐波那契数以 16 为底时效果很好，所以你有：

H1=32
H2=24
H3=19
H4=16
H5=14
H6=13

回答by kennytm

Some nominal figures:

一些名义数字：

Default style sheet for HTML 4:

HTML 4 的默认样式表：

• h1: 2em
• h2: 1.5em
• h3: 1.17em
• h4: 1em
• h5: 0.83em
• h6: 0.75em

• h1：2em
• h2：1.5em
• h3：1.17em
• h4：1em
• h5：0.83em
• h6：0.75em

Firefox 3and Safari 4 (actually, WebCore):

Firefox 3和Safari 4（实际上是 WebCore）：

• h1: 2em
• h2: 1.5em
• h3: 1.17em
• h4: 1em
• h5: 0.83em
• h6: 0.67em

• h1：2em
• h2：1.5em
• h3：1.17em
• h4：1em
• h5：0.83em
• h6：0.67em

回答by Michael Moriarty

I came up with the following algorithm/ calculation after looking at several different methods for font-size with H1~H6, p, menus, etc. with html set to 100% (usually 16px) and the following in rem units. This is tweaked from the often used 1.14/.875 'magic number.' Mine is .8735 which seems to work out nicely with p at 16px/1rem up to H1 at 36px/2.25rem and hits fairly 'normal' px values throughout like 12, 14, 16, 18, 21, 24, 28, 32, 36, etc. up to 54 for Jumbotrons and down to .zilch which is overkill, I know. I usually stay within .huge and .micro. Basically I start at p which equals 1.0rem and multiply by .8735 successively to get smaller or divide by it successively to get larger:

在查看了 H1~H6、p、菜单等几种不同的字体大小方法后，我想出了以下算法/计算，html 设置为 100%（通常为 16px），以下以 rem 为单位。这是从经常使用的 1.14/.875 'magic number' 调整而来的。我的是 .8735，它似乎在 16px/1rem 处的 p 到 36px/2.25rem 处的 H1 下效果很好，并且在整个过程中都达到了相当“正常”的 px 值，例如 12、14、16、18、21、24、28、32， 36，等等。对于 Jumbotrons 到 54，再到 .zilch，我知道这是矫枉过正。我通常保持在 .huge 和 .micro 之内。基本上我从等于 1.0rem 的 p 开始，然后依次乘以 0.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; }

I have been using points lately (pt) which as you can see are even easier to work with, and before everyone gets bent out of shape for not using rem's or em's I will say that frankly, at this point (no pun intended) I really do not think it matters. I started using what is easier for me. It is easier to work with points that calculate to simple integers than mess around with rems in decimal points.

我最近一直在使用点 (pt)，正如你所看到的，它更容易使用，在每个人都因为不使用 rem 或 em 而变形之前，我会坦率地说，在这一点上（没有双关语）我真的不觉得没关系。我开始使用对我来说更容易的东西。处理计算为简单整数的点比处理小数点中的 rem 更容易。

回答by Damien Pollet

In a more general way, related sizes like this are often based on a geometric series, i.e. each successive number is bigger by a constant factor (something like 1.2, or sqrt(2)) from the previous one. There is the same kind of progression in the size of wrenches and hexagonal keys, or screw diameters, etc in mechanics, or in the A5/A4/A3… family of paper sizes.

以更一般的方式，像这样的相关大小通常基于几何级数，即每个连续数字比前一个大一个常数因子（例如 1.2 或 sqrt(2)）。在扳手和六角扳手的尺寸、机械方面的螺钉直径等方面，或在 A5/A4/A3……系列纸张尺寸中，都有相同的进展。

回答by Meghana

Many of them say different sizes for heading tags but there was a variation from bootstrap to default font-size.here mentioned are default font-sizes:

他们中的许多人说标题标签的大小不同，但从引导程序到默认字体大小有所不同。这里提到的是默认字体大小：

h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;} 
h5 { font-size: 12px;} 
h6 { font-size: 10px;}

回答by Meghana

For bootstrap the variation of heading tags font-sizes in pixels are as follows check this bootstrap headings

对于引导，标题标签字体大小（以像素为单位）的变化如下检查此引导标题

h1 - 36px)
h2 - 30px
h3 - 24px
h4 - 18px
h5 - 14px
h6 - 12px

h1 - 36px)
h2 - 30px
h3 - 24px
h4 - 18px
h5 - 14px
h6 - 12px

回答by Otto Allmendinger

I think it is up to the browser, which may even even let the user define the font sizes (I remember opera doing that). The HTML specdoesn't go into much detail:

我认为这取决于浏览器，它甚至可以让用户定义字体大小（我记得歌剧就是这样做的）。在HTML规范不会进入太多细节：

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

HTML 中有六个级别的标题，其中 H1 是最重要的，H6 是最不重要的。视觉浏览器通常以较大的字体呈现更重要的标题，而不是不太重要的标题。

This is intentional since HTML is designed to describe the structure, not the presentation of the document.

这是有意为之，因为 HTML 旨在描述结构，而不是文档的呈现。