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 (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)
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.)?
Oh, I forgot to specify where I came up with the original numbers, they're from here
Description. The HTML <h1> to <h6> tag is used to define headings in an HTML document. <h1> defines largest heading and <h6> defines smallest heading.
To change font size in HTML, use the CSS font-size property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.
H1: 32 pt (30–34pt)
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With