H1-H6 font sizes in HTML

Question

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

Ie., if the baseline font size is 16px (or 100%), then h1

Answer 1

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 how they are supposed to be styled, only that they should be. From the spec:

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 stylesheet that defines them.

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

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)

Answer 2

Some nominal figures:

Default style sheet for HTML 4:

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

Firefox 3 and Safari 4 (actually, WebCore):

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

Answer 3

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.

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.

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.

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

Answer 4

W3C suggested a default rendering stylesheet for browsers to implement.

You'll notice that your figures differ from them. That's because browser makers have a habit of ignoring everything W3C say.

Answer 5

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)^3 and so on, but you can change the base.

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?).

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.