111

I've always been unsure of where to start as a general best practice baseline. Yes, I know it depends on your design, but what's most common?

Here's what I currently have as a starter:

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

Yes, we don't use EMs at my current job.

9
  • 4
    dont think that this is an appropriate question as there is no answer..
    – Treemonkey
    May 26, 2011 at 14:43
  • 22
    Treemonkey, really? Is it not okay to ask for opinions?
    – rsturim
    May 27, 2011 at 7:26
  • 30
    My favorite thing is when I google something, the top result is a StackOverflow post, and the question is closed or on hold. Nothing quite like the stale encapsulation of knowledge to stand the test of time. Sep 24, 2013 at 14:08
  • 2
    No, @rsturim, it is not ok to ask for opinions
    – Liam
    Nov 22, 2013 at 13:05
  • 7
    I searched for a question like this, so while off topic for this particular stack, I found it useful. Having this question closed means no further dialog, debate, or answers can be added, lowering the value of this question to the community overall. I've seen other off-topic questions migrated to more-appropriate stacks. Can this be done for this question? Cheers~
    – Pete
    Dec 18, 2013 at 18:53

2 Answers 2

222

It would depend on the browser's default stylesheet. You can view an (unofficial) table of CSS2.1 User Agent stylesheet defaults here.

Based on the page listed above, the default sizes look something like this:

    IE7     IE8     FF2         FF3         Opera   Safari 3.1
H1  24pt    2em     32px        32px        32px    32px       
H2  18pt    1.5em   24px        24px        24px    24px
H3  13.55pt 1.17em  18.7333px   18.7167px   18px    19px
H4  n/a     n/a     n/a         n/a         n/a     n/a
H5  10pt    0.83em  13.2667px   13.2833px   13px    13px
H6  7.55pt  0.67em  10.7333px   10.7167px   10px    11px

Nowadays, all modern browsers have the same values as defaults.

6
3

Headings are normally bold-faced; that has been turned off for this demonstration of size correspondence. MSIE and Opera interpret these sizes the same, but note that Gecko browsers and Chrome interpret Heading 6 as 11 pixels instead of 10 pixels/font size 1, and Heading 3 as 19 pixels instead of 18 pixels/font size 4 (though it's difficult to tell the difference even in a direct comparison and impossible in use). It seems Gecko also limits text to no smaller than 10 pixels.

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