HTML中的H1-H6字体大小

60
在HTML(和排版中一般都是如此),似乎为H1-H6元素定义了一些尺寸大小。例如,如果基准字体大小为16px(或100%),则h1将为2.25em(36px)。而H2将为1.5em(24px)。以此类推。这些变量来自哪里?也就是说H1=36px、H2=24px、H3=21px、H4=18px、H5=16px、H6=14px。是否有数学公式?是否与黄金比例或斐波那契数列有关?我找不到相关信息。
编辑:更具体地说,它们的模式是什么?为什么从36到24再到21,或者从36开始(或者,如果您喜欢,从2em到1.5em到1.17em等)?
哦,我忘了说明原始数字来自这里

3
避开这个隆起; 传统刻度似乎由两股斐波那契数列组成。例如,《印刷样式要素》一书中的示例:(a) 5、8、13、21、34...,以及 (b) 6、10、16、26、42... => 5、6、8、10、13、16、21、26... - morbusg
12个回答

28

更新:现代浏览器使用这些值

原始回答:

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

它们在各个浏览器中不是统一的,仅用于语义(大标题,稍小标题等等...)。

如果您查看HTML 4规范对于这些标题,没有提及应该如何应用样式,只是建议需要应用样式。从规范上看:

视觉浏览器通常将更重要的标题渲染为比不那么重要的标题更大的字体。

如果您想使这些标题保持一致,请使用定义了这些标题样式的重置样式表

尽管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 }

(是的,我没有看到对于h4的font-size:


它甚至没有那么深入。它描述了浏览器的行为,而不是应该做什么。 :) - Quentin
是的,该规范确实是基于当前的实践编写的。 - Tor Valamo
我担心这个问题会被误解,所以我试图通过包含100%和em来澄清我不是在询问浏览器实现。 - morbusg
1
h4没有字号,因为它是100%/ 1em,这是样式表的默认字号(无需单独定义)。 - tomasz86

13

一种可能的进阶方法是使用平方根,通过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

以字体基础大小为12为例,最接近整数的大小依次为24、17、14、12、11和10。对于其他基础大小,结果可能与整数略有偏差。

在使用基础大小为16的情况下,斐波那契数列也能很好地发挥作用,因此您将得到如下结果:

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

11

这与浏览器相关,正如其他人所说。

另一方面,印刷排版有一个设置字体大小的规则:如果基本字体大小为X,那么较大的字体应该呈指数增长;通常的方法是使用X*sqrt(2)X*sqrt(2)^2X*sqrt(2)^3等大小,但你可以更改基础大小。

然而,计算机字体有一些特殊要求。

它们过去只以位图形式提供(因此大小固定),即使以矢量形式提供 - 一些格式也更喜欢某些特殊大小:可被2或5整除(例如Amiga的旧矢量字体...Agfa Intellifont)。

即使现在字体引擎变得更好了,它们也喜欢整数大小,因为它们的提示算法更有效。

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


尽管这个答案有一个公式,但它并不完全适用于那些数字;即24*sqrt(2)约等于34而不是36。或者我误解/计算错误。 - morbusg
2
@DrJokepu:如果我每次在SO上学到东西都评论一下,那我会得到更多的“你是人类吗”的页面;-)(http://blog.stackoverflow.com/2009/07/are-you-a-human-being/) - Joachim Sauer
我相信你提供的进度是基于七声音阶 - 基本上,通过5个步骤,您可以使大小加倍,或者在频率的情况下,使频率加倍,就像在音乐音阶中高一个八度。 - Michael Moriarty

10

我知道这篇文章已经有些老了,但是我也有同样的问题,他们是从哪里得到的呢?我想我找到了答案。

它是五声音阶的一个派生物。至少 Type 音阶是如此。标题是从 Type 音阶中取的,但不是 1:1 的次序。

音阶如下:

8 9 10 12 14 16 18 21 24... 音阶每五步翻倍(12 到 24)。每一步都是基数(12)乘以2(音阶【它翻倍】)的i(step)次方除以5(ttl steps) [ 'i/5'] - 四舍五入。

所以 h4 是基数,h3 是第一步,h2 是第三步,h1 是第五步,或者是五声音阶上 12 的八度。h5 和 h6 是另一边距离基数的 1 和 3 步。如果我理解正确,这相当于 A、E 大调和弦。

我用电子表格和关于音阶的解释花了大约两个小时才弄明白这个。


你已经接近成功了 - 阅读我的回答可以更加明确一些:https://dev59.com/qXE95IYBdhLWcg3wadGq#36483225 H6是起点,H5是第一步,H4是第二步,以此类推,直到第五步就是H1。 另外,你还可以参考这个链接:https://spencermortensen.com/articles/typographic-scale/ - Michael Moriarty

7

HTML的模式似乎是三角形的:n * (n + 1) * 0.17,其中n是标题距离h4的级别。 0.17 * 1 = 0.17; 0.17 * 3 = 0.51, 1.02 - Ceasar

5
经典的排版比例尺是基于从根字体大小的H6到两倍大小的H1。:root或html元素设置为100%,通常对应16px。任何设置为1.0rem的元素都会采用:root元素的值,简写为rem。
要计算从1.0rem到2.0rem的5个步骤中的大小变化,即H2、H3、H4、H5、H6,数学公式如下所示: Typographic Formula

其中fi是计算得出的值(重复5次),
f0是初始值,在本例中为1.0rem
r是比率,在本例中为2,因为我们想要从H6H1的字号从1.0rem变为2.0rem
i是我们所在的迭代次数,即1~5
n是从H6H1所需的步数,在本例中为5

您得到的结果如下:

h1 { font-size: 2.0rem; }
h2 { font-size: 1.741rem; }
h3 { font-size: 1.516rem; }
h4 { font-size: 1.320rem; }
h5 { font-size: 1.149rem; }
h6 { font-size: 1.0rem; }

这是它的样子:
Typographical Display

一些设计基于黄金比例(r = 1.618034)。

他们将进展提高到更高的水平,仅需2个步骤:

h1 { font-size: 2.058rem; }
h2 { font-size: 1.618rem; }
h3 { font-size: 1.272rem; }

其他人使用em而不是rem,目的是允许最终用户的设置控制标题大小的递进,而不是始终参考:root元素的大小。
我个人使用排版比例尺和rem单位,因为我发现这样可以更好地控制显示和布局,同时允许最终用户通过将我的值设置为100%来设置他们自己的:root值。我还相应地设置了p和small的大小。因此,我使用:
p { font-size: 1.0rem; }
small { font-size: 0.87rem; }

2

通常,类似这样的相关尺寸都是基于等比数列的,也就是每个连续的数字都比前一个数字增加一个恒定的因子(例如1.2或sqrt(2))。在机械领域中,扳手和六角钥匙的大小、螺丝直径等也有同样的进展。在纸张尺寸方面,A5/A4/A3等也是如此。


2

许多人提到标题标签的不同大小,但是在Bootstrap和默认字体大小之间存在差异。以下是默认字体大小:

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

1

我认为这取决于浏览器,甚至可能让用户定义字体大小(我记得Opera做过)。 HTML规范 没有详细说明:

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

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


1

W3C建议浏览器实现默认渲染样式表

你会注意到你的图形与它们不同。这是因为浏览器制造商有忽略W3C所说的一切的习惯。


1
我认为这不是W3C建议的内容,相反,我认为这是W3C所说的浏览器实际实现的内容。 - ChrisW
当W3C是浏览器供应商时,浏览器供应商很难忽视W3C。所有浏览器供应商都是W3C的成员,并签署规范。 - Rob
@ChrisW,FTA:“鼓励开发人员在其实现中将其用作默认样式表。” @Rob,这并不意味着如果他们后来觉得另一个值更好地服务于他们的目的,他们就会遵循指南。 - Oli
它说:“这个样式表描述了所有基于对当前UA实践的广泛研究的HTML 4([HTML4])元素的典型格式。” - Michael Moriarty

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接