Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are the most common font-sizes for H1-H6 tags [closed]

Tags:

html

css

frontend

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.

like image 990
rsturim Avatar asked May 26 '11 14:05

rsturim


People also ask

What is the font size of h1 tag?

H1: 32 pt (30–34pt) H2: 26 pt (24–28pt) H3: 22 pt (20–24pt) H4: 20 pt (18–22pt)

What is the font size of h1 to h6 in HTML?

font-size: 1.17em Default h1 style nested twice.

Is h1 tag bigger than h6?

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.


1 Answers

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.

like image 162
Donut Avatar answered Sep 19 '22 15:09

Donut