Why do and have smaller font sizes than in most user agent default stylesheets?

问题

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 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?

回答1:

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 }

回答2:

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.

Oct 1997: Todd Fahrner announces the stylesheet https://lists.w3.org/Archives/Public/www-style/1997Oct/0056.html
Jul 1997: Todd Fahrner indicates intention to create a ""default" stylesheet": https://lists.w3.org/Archives/Public/www-style/1997Jul/0150.html, https://lists.w3.org/Archives/Public/www-style/1997Jul/0159.html
- There E. Stephen Mack notes that IE 4.0 pp2 has some default styles that may be useful as a reference: https://lists.w3.org/Archives/Public/www-style/1997Jul/0152.html
- Where Chris Lilley, "Graphics and Fonts Guy" of W3C, says it would be nice to have a default stylesheet as an example in the spec and suggests that the default font-size units should be em: https://lists.w3.org/Archives/Public/www-style/1997Jul/0190.html
- E. Stephen Mack notes that at that point they only wanted to describe current behaviour, not prescribe behaviour for new UAs: https://lists.w3.org/Archives/Public/www-style/1997Jul/0171.html
- Jay pulls IE4pp2 styles from the registry: https://lists.w3.org/Archives/Public/www-style/1997Jul/0172.html
  - Of significant interest here are the font sizes. Looking at SerifMedium, Normal is 12 (pt, probably), H1, H2, H3, H4, H5, and H6 were 24, 18, 14, 12, 10, and 8 respectively.
  - In other words, these sizes when converted into relative em with "Normal" (12pt) as 1em, match the base stylesheet sizes! H5 at 10/12 = .83em, H6 at 8/12 = .67em!
- Chris Wilson, "Stylesheets guy" on the IE team, notes that despite being shipped with IE4pp2, those styles are actually used by IE3: https://lists.w3.org/Archives/Public/www-style/1997Jul/0174.html
  - And that styles are hardcoded in IE4: https://lists.w3.org/Archives/Public/www-style/1997Jul/0183.html

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.

回答3:

No, it is just a default font size. Usually, you edit the heading with a CSS file where you are able to choose every font size.

来源：https://stackoverflow.com/questions/55696808/why-do-h5-and-h6-have-smaller-font-sizes-than-p-in-most-user-agent-default

标签

html

css

font-size

typography

Why do <h5> and <h6> have smaller font sizes than <p> in most user agent default stylesheets?

问题