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