59

What are the default font pixel sizes for the heading (h1-h6) tags?

2
  • 9
    This 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
    Commented Jul 14, 2019 at 22:14
  • Which of the 321,219,449 different browsers/version/OS permutations are you asking for exactly?
    – connexo
    Commented Jan 15, 2022 at 9:36

5 Answers 5

75

Another way of putting it is:

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

http://zuga.net/articles/html-heading-elements/

1
  • The values for h3, h5 and h6 are outdated, see answer below.
    – mb21
    Commented Dec 6, 2023 at 15:34
60

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).

2
  • Sam Benson's reply answers the original question about sizing in pixels.
    – benihana21
    Commented Jan 18, 2021 at 2:33
  • 1
    The values for h3, h5 and h6 are outdated, see answer below.
    – mb21
    Commented Jan 15, 2022 at 9:00
18

This is set in the browser's default stylesheet. As of 2023, 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>

11

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;
}
2
  • 2
    That is right. check this. html.spec.whatwg.org/multipage/rendering.html
    – snowdream
    Commented Oct 20, 2020 at 2:13
  • On a 16-pixel scale, that's: h1: 32px, h2: 24px, h3: 18⅔px, h4: 16px, h5: 13⅓px, h6: 10⅔px. On a 12-pixel scale, that's: h1: 24px, h2: 18px, h3: 14px, h4: 12px, h5: 10px, h6: 8px Commented Mar 9, 2021 at 16:15
3

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.

1
  • 1
    Actually, they are the same on every current major browser.
    – PRMan
    Commented Apr 28, 2022 at 17:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.