H1-H6 font sizes in HTML

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.


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

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.

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

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

Update: Nowadays, modern browsers use these values.

Original answer:

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)