H1-H6 font sizes in HTML

前端 未结 11 757

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

11条回答
  •  情深已故
    2021-01-29 22:21

    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.

提交回复
热议问题