What are the default font sizes (in pixels) for the html heading tags (<h1>, <h2>, <h3>, etc.)?

What are the default font pixel size开发者_C百科s for the heading (h1-h6) tags?

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)

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;
}

This is set in the browser's default stylesheet. Modern browsers all set these to the same em values. And by default 1em is 16px in modern browsers, thus:

h1 | 2em    | 32px
h2 | 1.5em  | 24px
h3 | 1.17em | 18.72px
h4 | 1em    | 16px
h5 | 0.83em | 13.28px
h6 | 0.67em | 10.72px

These values are what the WhatWG's living standard recommends and I checked that Chrome, Firefox and Safari indeed implement these values.

(Note that the values for h5 and h6 are slightly different than in the legacy default style sheet for HTML 4).

Finally, you can run the following snippet and inspect in your browser of choice:

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

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.