Login/Register
Why do <h5> and <h6> have smaller font sizes than <p> in most user agent default stylesheets?
Asked Answered
htmlcssfont-sizetypography
G

2

35

The default <h5> and <h6> section headings in HTML5 have font sizes of 0.83em and 0.67em, respectively, while the default <p> font size is 1em. That means in a block of text containing <h5>, <h6> and <p> tags, these headings will be smaller than the text they head:

Default font sizes from h1 to h6 in relation to paragraph font size

(Default body font size above is 14px)

This seems counter-intuitive: headings are supposed to draw the eye and command the start of a section, and font size is an important visual cue. Is there a reason why the default font sizes make these headings smaller than the text under them?

Georganngeorge answered 15/4, 2019 at 20:30 Comment(7)
they're defaults. I've never worked on a site that made heavy use of defaults or really ever cared what they are. the h tags could be over a section with smaller text and are mostly important for SEO purposes these days anyway. – Lysine
agree with @Lysine that they're for SEO purposes, nothing more – Peaked
At the fifth level of heading, you're getting into some pretty unimportant stuff. The fact that the heading is smaller than paragraph text makes them stand out in a different way. Of course, as @Lysine says, they are default values provided by HTML. It's trivial to override them. I wouldn't say they are only for SEO purposes; screen readers and other accessibility helper use headings frequently. – Snigger
@HereticMonkey, CSS and HTML had designers who decided sensible defaults. Typically, these discussions and decisions are also taken on public mailing lists, especially for W3C work. I think it's valid to ask this question to a community of experts familiar with the history. – Georganngeorge
you said it: discussions and decisions so I doubt you can get any clear answer since it's a simple decision and not a programming issue. You probably need to dig more to find when and why this decision was made. – Insensible
Indeed it is a matter of opinion whether h5s and h6s should be smaller than ¶ text. That's not what this question asks. Researching and presenting documented evidence of a W3C author's opinion which has now been codified in browser defaults is a matter of factual research. That is what this question asks, and it's a valid one. – Asperse
@JacobFord It looks like these weren't a "W3C author's opinion" but rather the W3C sample attempting to describe what browsers were already doing. – Horeb
A
45

I've been searching through W3C mailing lists but haven't found any debate on this decision.

Here's what I can infer:

1995

The first published version of the HTML spec (before CSS came into play) actually specified that h4 and h5 should be "normal font" size. The font size for h6 wasn't explicitly specified, but I would presume that it was also the normal font size.

H3

         Italic, large font, slightly indented from the left
         margin. One or two blank lines above and below.

H4

         Bold, normal font, indented more than H3. One blank line
         above and below.

H5

         Italic, normal font, indented as H4. One blank line
         above.

H6

         Bold, indented same as normal text, more than H5. One
         blank line above.

1996

CSS broke onto the scene. Or really, limped onto the scene and broke. The first recommended default style sheet for browsers specified only:

H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }

h4 through h6 would thus be 1em.

1997

HTML 3.2 dropped any font-size recommendations relative to document text, only recommending:

More important headings are generally rendered in a larger font than less important ones.

This conflicts a bit with CSS1, but the two were not integral to each other at the time. Most styling was still done with inline HTML attributes, which were still very much not deprecated.

1998

CSS2 came out, and it removed a default style sheet from its own spec, and instead linked to the new sample style sheet for HTML 4.0 in HTML's specification.

This is the origin of headers explicitly being set smaller than 1em, at least as far as I can tell. The recommended HTML 4.0 stylesheet specifies the values most browsers keep to today as defaults:

H5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
H6              { font-size: .67em; margin: 2.33em 0 }
Asperse answered 16/4, 2019 at 15:13 Comment(2)
Wow, what a great effort! Thanks for the research. I'll see what I can find, but hopefully someone involved in the decision eventually finds this and gives a definitive answer! – Georganngeorge
@JacobFord I've dug a bit more, and traced it back to (probably) IE4.0pp2. It's unlikely we'll find out where IE got its defaults from. – Horeb
H
18

Ooh, digital archaeology!

So, it turns out that you can trace this back to the default "styles" (not exactly CSS!) of Internet Explorer 3-4 and Netscape Navigator 3-4. More specifically, they are likely pulled from IE4pp2 but introduced with IE3. How IE/Microsoft decided on those values is, unfortunately, lost to the sands of time (at least publicly - it may well be available in Microsoft internal email archives ... anyone know a MS employee?).

I've tried to reconstruct the chain below.

As Jacob mentioned, the earliest draft of CSS2 from November 1997 includes a sample stylesheet that defines h5 as .83em and h6 as .67em. It also notes:

The Base Stylesheet describes the typical rendering of all HTML 4.0 [HTML40]) elements visual UAs. The style sheet is based on extensive research on how current UAs render HTML, and developers are encouraged to use it as a default style sheet in their implementations.

Digging a bit further, we can find a "base stylesheet" with the same values, which notes:

I developed the sample stylesheet for the W3C CSS2 Draft, but the editorial development of materials at this location has no official W3C status.

...

The Base Stylesheet describes the "consensus default" rendering of all HTML 4.0 elements in Mosaic-derivative Web browsers (Netscape Navigator and Microsoft Internet Explorer). It is intended as a basis for editing or "cascading in" other stylesheet modules, an informative reference, an (unofficial) complement to the HTML 4.0 specification, an exercise in stylesheet architecture, and a browser testing tool. The Base Stylesheet captures the status quo in order to move beyond it.

We can further track this base stylesheet back to the www-style mailing list.

Of possible interest is that around that time, W3C endorsed a set of "Core Style Sheets" intended(?) to become a better default. These stylesheets (now accessible via the Internet Archive) do use larger values for all headings, resulting in h6 at 1em and h5 at 1.17em. Unfortunately, it seems this set of stylesheets never really took off, so we're left with the weirdly small h5 and h6.

Horeb answered 5/6, 2019 at 2:49 Comment(2)
Great digging! I think that last paragraph about the W3C core style sheets seems to get to the answer: W3C wanted the headings to be larger, but IE defaults with smaller h5 and h6 became the de-facto defaults which we are now stuck with. I'll accept your answer in a week or two unless someone responds to your call for someone who works at Microsoft to dig up an old email! – Georganngeorge
Stylesheet (sorta) in the Windows Registry! Nature is amazing. – Asperse

© 2022 - 2024 — McMap. All rights reserved.