What are the default font pixel sizes for the heading (h1-h6) tags?
-
Meaningless question - there's no requirement to have different size text for headings (or even to have the concept of "font" - think audio output, for instance). Perhaps you meant "what's a good choice of font sizes for a stylesheet targeting screens/print/whatever?". – Toby Speight Dec 7 '17 at 17:24
-
1This is not meaningless. There are default sizes that vary from one heading tag to the next, and it is legitimate to ask what those sizes are, – wesmat Jul 14 '19 at 22:14
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).
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)
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;
}
-
That is right. check this. html.spec.whatwg.org/multipage/rendering.html – snowdream Oct 20 '20 at 2:13
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.