H1-H6 font sizes in HTML

Question

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

Answer 1

I came up with the following algorithm/ calculation after looking at several different methods for font-size with H1~H6, p, menus, etc. with html set to 100% (usually 16px) and the following in rem units. This is tweaked from the often used 1.14/.875 'magic number.' Mine is .8735 which seems to work out nicely with p at 16px/1rem up to H1 at 36px/2.25rem and hits fairly 'normal' px values throughout like 12, 14, 16, 18, 21, 24, 28, 32, 36, etc. up to 54 for Jumbotrons and down to .zilch which is overkill, I know. I usually stay within .huge and .micro. Basically I start at p which equals 1.0rem and multiply by .8735 successively to get smaller or divide by it successively to get larger:

 item    rem   px   pt
.giant  3.38  54.4  41
.huge   2.95  47.2  35
.big    2.58  41.3  31
 h1     2.25  36.0  27
 h2     1.97  31.5  24
 h3     1.72  27.5  21
 h4     1.50  24.0  18
 h5     1.31  21.0  16
 h6     1.15  18.4  14
 p      1.00  16.0  12
.menus  0.87  13.9  10
.legal  0.76  12.2   9
.micro  0.67  10.7   8
.zilch  0.58   9.3   7

/* Font-Sizes using pt */
.giant { font-size:41pt; }
 .huge { font-size:35pt; }
  .big { font-size:31pt; }
    h1 { font-size:27pt; margin-top:0; }
    h2 { font-size:24pt; }
    h3 { font-size:21pt; } 
    h4 { font-size:18pt; }
    h5 { font-size:16pt; }
    h6 { font-size:14pt; }
     p { font-size:12pt; margin-bottom:15pt; }
.menus { font-size:10pt; }
.legal { font-size: 9pt; }
.micro { font-size: 8pt; }
.zilch { font-size: 7pt; }

I have been using points lately (pt) which as you can see are even easier to work with, and before everyone gets bent out of shape for not using rem's or em's I will say that frankly, at this point (no pun intended) I really do not think it matters. I started using what is easier for me. It is easier to work with points that calculate to simple integers than mess around with rems in decimal points.

Answer 2

Many of them say different sizes for heading tags but there was a variation from bootstrap to default font-size.here mentioned are default font-sizes:

h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;} 
h5 { font-size: 12px;} 
h6 { font-size: 10px;}

Answer 3

For bootstrap the variation of heading tags font-sizes in pixels are as follows check this bootstrap headings

h1 - 36px)
h2 - 30px
h3 - 24px
h4 - 18px
h5 - 14px
h6 - 12px

Answer 4

One possible progression approach is to use square roots, via a formula such as 2/sqrt[heading#]. Hence, you'd have:

H1 = 2/sqrt1 = 2
H2 = 2/sqrt2 = 1.414
H3 = 2/sqrt3 = 1.155
H4 = 2/sqrt4 = 1
H5 = 2/sqrt5 = 0.894
H6 = 2/sqrt6 = 0.816

For a font base of 12, that'd be close enough to 24, 17, 14, 12, 11, 10. For other bases, the results may be a bit farther away from integers.

Fibonacci would work well with base 16, so you'd have:

H1=32
H2=24
H3=19
H4=16
H5=14
H6=13

Answer 5

In a more general way, related sizes like this are often based on a geometric series, i.e. each successive number is bigger by a constant factor (something like 1.2, or sqrt(2)) from the previous one. There is the same kind of progression in the size of wrenches and hexagonal keys, or screw diameters, etc in mechanics, or in the A5/A4/A3… family of paper sizes.

Answer 6

I think it is up to the browser, which may even even let the user define the font sizes (I remember opera doing that). The HTML spec doesn't go into much detail:

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

This is intentional since HTML is designed to describe the structure, not the presentation of the document.