62

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 (w/c)ould be 2.25em (36px). And H2 (w/c)ould be 1.5em (24px). Et cetera. Where do these variables come from? The H1=36px, H2=24px, H3=21px, H4=18px, H5=16px, H6=14px, that is. (or, if you like, H1=2em, H2=1.5em, H3=1.17em, etc., the point isn't the numbers themselves, but the relation between them)

Is there some mathematical formula for them? Does it have something to do with golden ratio or fibonacci? I haven't been able to find information on this.

EDIT: to be more specific, what is the pattern; why does it go from 36 to 24 to 21, or start from 36 to begin with (or, if you like, from 2em to 1.5em to 1.17em, etc.)?

Oh, I forgot to specify where I came up with the original numbers, they're from here

1
  • 3
    Dodging a bump here; It appears that the traditional scale is composed of two-stranded Fibonacci series. Example from The Elements of Typographic Style by Robert Bringhurst: (a) 5, 8, 13, 21, 34..., and (b) 6, 10, 16, 26, 42... => 5, 6, 8, 10, 13, 16, 21, 26...
    – morbusg
    Commented Feb 21, 2012 at 11:45

12 Answers 12

30

Update: Nowadays, modern browsers use these values.

Original answer:

They are defined by each browser maker independently.

They are not uniform across browsers and are there for semantics (Large header, slightly smaller header etc...).

If you look at the HTML 4 specification for these, there no mention of how they are supposed to be styled, only that they should be. From the spec:

Visual browsers usually render more important headings in larger fonts than less important ones.

If you want these to be consistent, you should use a reset stylesheet that defines them.

Even though w3 has defined a suggested default stylesheet for HTML 4 with the following details, most browsers ignore this suggestion:

h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6          { font-weight: bolder }

(yes, I see no font-size: for h4)

4
  • It doesn't even go that far. It describes what browsers do, not what they should do. :)
    – Quentin
    Commented Feb 24, 2010 at 12:28
  • Yeah the spec was written based on current practices really
    – Tor Valamo
    Commented Feb 24, 2010 at 12:29
  • I was afraid the question would be interpreted like that, for which I tried to make clear I wasn't asking about browser implementations by including the 100% and em's in there.
    – morbusg
    Commented Feb 24, 2010 at 12:34
  • 1
    There is no font-size for h4 because it's 100%/1em which is the default font-size for that stylesheet (no need to define it separately).
    – tomasz86
    Commented Jul 6, 2015 at 15:26
13

One possible progression approach is to use square roots, via a formula such as 2/sqrt[heading#]. Hence, you'd have:

H1 = 2/sqrt1 = 2
H2 = 2/sqrt2 = 1.414
H3 = 2/sqrt3 = 1.155
H4 = 2/sqrt4 = 1
H5 = 2/sqrt5 = 0.894
H6 = 2/sqrt6 = 0.816

For a font base of 12, that'd be close enough to 24, 17, 14, 12, 11, 10. For other bases, the results may be a bit farther away from integers.

Fibonacci would work well with base 16, so you'd have:

H1=32
H2=24
H3=19
H4=16
H5=14
H6=13
11

It is browser-dependant, as other say.

On the other side, there is a rule in typography to set font sizes: if the base font has size X, the larger fonts should grow exponentially; the usual way is to have sizes X*sqrt(2), X*sqrt(2)^2, X*sqrt(2)^3 and so on, but you can change the base.

However, computer fonts have some special requirements.

They used to be provided in a bitmap form only (so the sizes were fixed), and even when provided in vector form -- some formats preferred some special sizes: divisible by 2 or 5 (this was f.e. the case with Amiga's old vector fonts... Agfa Intellifont?).

Even now font engines like integer sizes more, because their hinting algorithms work better.

And people seem to got used to the values chosen because of these technical restrictions, even though font engines got much better now.

3
  • Although this answer has a formula, it doesn't quite work with those numbers; ie. 24*sqrt(2) ~ 34, and not 36. Or then I misunderstood/miscalculated.
    – morbusg
    Commented Feb 24, 2010 at 12:54
  • 2
    @DrJokepu: if I commented every time I learned something on SO, I'd get a lot more "are you a human" pages ;-) ( blog.stackoverflow.com/2009/07/are-you-a-human-being ) Commented Feb 24, 2010 at 13:13
  • I believe the progression you are providing is based on the Diatonic scale - basically, in 5 steps you get to double the size, or in the case of frequency, double the frequency as in an octave higher in a musical scale. Commented May 13, 2023 at 12:13
10

I know this post is old. I came across it with the same question, where do they get this from. I think I found it.

It is a derivation of a pentatonic music scale. The Type scale is anyway. The Headings are taken from the Type scale, though not in a 1:1 order.

The scale goes: 8 9 10 12 14 16 18 21 24... The scale doubles in 5 steps (12 to 24). Each step is the base(12) times 2(the scale['it doubles']) to the power of i(step) divided by 5(ttl steps)['i/5'] - rounded to the nearest.

So h4 is the base, h3 is step 1, h2 is step 3, and h1 is step 5, or the octive of 12 on a pentatonic scale. h5 and h6 are 1 and 3 steps from base the other way.If I understand this, it would be the equivalent of a, E major chord.

That took me about 2 hours to figure out with a spreadsheet and an explanation of musical scales.

1
7

Some nominal figures:

Default style sheet for HTML 4:

  • h1: 2em
  • h2: 1.5em
  • h3: 1.17em
  • h4: 1em
  • h5: 0.83em
  • h6: 0.75em

Firefox 3 and Safari 4 (actually, WebCore):

  • h1: 2em
  • h2: 1.5em
  • h3: 1.17em
  • h4: 1em
  • h5: 0.83em
  • h6: 0.67em
1
  • The pattern for HTML seem to be the triangular: n * (n + 1) * 0.17 where n is the level of the header away from h4. 0.17 * 1 = 0.17; 0.17 * 3 = 0.51, 1.02.
    – Ceasar
    Commented Sep 3, 2014 at 0:31
7

The classic typographical scale is based on getting from H6 at the root font size up to H1 at double the size. The :root or html element is set to 100% and that usually translates to 16px. Anything set to 1.0rem takes on the value of the :root element, abreviated as rem.

To calculate the progression in size from 1.0rem to 2.0rem in 5 steps, namely H2, H3, H4, H5, H6 the mathematical formula is as shown:
Typographic Formula

where fi is the calculated value (repeated 5 times),
f0 is the initial value, 1.0rem in this case,
r is the ratio, 2 in this case since we want to go from 1.0rem to 2.0rem from H6 to H1,
i is the iteration we are on, so 1~5, and
n is the number of steps to get from H6 to H1, 5 in this case.

The result you get is as follows:

h1 { font-size: 2.00rem; }
h2 { font-size: 1.74rem; }
h3 { font-size: 1.52rem; }
h4 { font-size: 1.32rem; }
h5 { font-size: 1.15rem; }
h6 { font-size: 1.00rem; }

and it looks like this:
Typographical Display

Some designs are based on the golden ratio (r = 1.618034)

They set the progression higher and in only 2 steps:

h1 { font-size: 2.06rem; }
h2 { font-size: 1.62rem; }
h3 { font-size: 1.27rem; }

Others use em instead of rem in an effort to allow the end user's settings to control the progression as successive headings reference parent header sizes instead of always referencing the :root element size.

I personally use the typographic scale and rem units as I find I have a bit more control over the display and layout, yet allow the end user to set their :root value by setting mine to 100%. I also set the big, p and small sizes accordingly. I therefore use:

  big { font-size: 2.29rem; }
    p { font-size: 1.00rem; }
small { font-size: 0.87rem; }
3

Many of them say different sizes for heading tags but there was a variation from bootstrap to default font-size.here mentioned are default font-sizes:

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

In a more general way, related sizes like this are often based on a geometric series, i.e. each successive number is bigger by a constant factor (something like 1.2, or sqrt(2)) from the previous one. There is the same kind of progression in the size of wrenches and hexagonal keys, or screw diameters, etc in mechanics, or in the A5/A4/A3… family of paper sizes.

2

For bootstrap the variation of heading tags font-sizes in pixels are as follows check this bootstrap headings

h1 - 36px)
h2 - 30px
h3 - 24px
h4 - 18px
h5 - 14px
h6 - 12px

1

I think it is up to the browser, which may even even let the user define the font sizes (I remember opera doing that). The HTML spec doesn't go into much detail:

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

This is intentional since HTML is designed to describe the structure, not the presentation of the document.

1

W3C suggested a default rendering stylesheet for browsers to implement.

You'll notice that your figures differ from them. That's because browser makers have a habit of ignoring everything W3C say.

4
  • 1
    I don't think it's what the W3C suggest: instead I think it's what the W3C say they've found has been actually implemented by browsers.
    – ChrisW
    Commented Feb 24, 2010 at 12:35
  • It's difficult for browser vendors to ignore the W3C when the W3C IS the browser vendor. All browser vendors are members of the W3C and sign off on the specs.
    – Rob
    Commented Feb 24, 2010 at 12:56
  • @ChrisW, FTA: "Developers are encouraged to use it as a default style sheet in their implementations." @Rob, Doesn't mean they follow the guidelines if they later feel another value better serves their purpose.
    – Oli
    Commented Feb 24, 2010 at 18:14
  • It says, "This style sheet describes the typical formatting of all HTML 4 ([HTML4]) elements based on extensive research into current UA practice." Commented Jul 6, 2017 at 4:40
0

Late to the party, but here's a fun mixin for Sass/SCSS that does some fibonacci math for you based on a starting font-size value for the H1 tags:

@use "sass:map";
@mixin headers($h1-em: 2em) {
    $fib: ("6": .236, "5": .382, "4": .50, "3": .618, "2": .786, "1":1);
    @for $i from 1 through 6 {
        h#{$i} {
            font-size: $h1-em * map.get($fib, #{$i})};
        }
      
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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