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.
H1: 32 pt (30–34pt) H2: 26 pt (24–28pt) H3: 22 pt (20–24pt) H4: 20 pt (18–22pt)
font-size: 1.17em Default h1 style nested twice.
HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With