What are the default font pixel sizes for the heading (h1-h6) tags?
I think it is as follows:
h1 is 2 em
h2 is 1.5 em
h3 is 1.3 em
h4 is 1 em
h5 is 0.8 em
h6 is 0.7 em
An em is not the same as a pixel. It is a relative way of looking at sizes. With that said I think most browsers default to 16px (or 1em).
For an actual proof, take a look at the html.css (171 - 237) with the default style of Mozilla Firefox:
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.17em;
}
h4 {
font-size: 1.00em;
}
h5 {
font-size: 0.83em;
}
h6 {
font-size: 0.67em;
}
The whole css is:
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin-block-start: .67em;
margin-block-end: .67em;
}
h2,
:-moz-any(article, aside, nav, section)
h1 {
display: block;
font-size: 1.5em;
font-weight: bold;
margin-block-start: .83em;
margin-block-end: .83em;
}
h3,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
display: block;
font-size: 1.17em;
font-weight: bold;
margin-block-start: 1em;
margin-block-end: 1em;
}
h4,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
display: block;
font-size: 1.00em;
font-weight: bold;
margin-block-start: 1.33em;
margin-block-end: 1.33em;
}
h5,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
display: block;
font-size: 0.83em;
font-weight: bold;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
}
h6,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
display: block;
font-size: 0.67em;
font-weight: bold;
margin-block-start: 2.33em;
margin-block-end: 2.33em;
}
Another way of putting it is:
h1 is 32px (2em)
h2 is 24px (1.5em)
h3 is 20.8px (1.3em)
h4 is 16px (1em)
h5 is 12.8px (0.8em)
h6 is 11.2px (0.7em)
Size for h1 - h6 tags are different from browser to browser. There is no W3 spec that enforces standard size for heading tags. Each browser has implemented its own.
It is recommended to use a CSS normalizer to make the sizes uniform across all the browsers. You can do this by defining your custom sizes for the tags to override the default browser values.