web-dev-qa-db-fra.com

Pourquoi <h5> et <h6> ont-ils des tailles de police plus petites que <p> dans la plupart des feuilles de style par défaut de l'agent utilisateur?

La valeur par défaut <h5> et <h6> les en-têtes de section en HTML5 ont une taille de police de 0.83em et 0.67em, respectivement, tandis que la valeur par défaut <p> la taille de la police est 1em. Cela signifie que dans un bloc de texte contenant <h5>, <h6> et <p> tags, ces titres seront plus petits que le texte qu'ils contiennent:

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

(La taille de police par défaut ci-dessus est 14px)

Cela semble contre-intuitif: les titres sont censés attirer l'œil et commander le début d'une section, et la taille de la police est un indice visuel important. Y a-t-il une raison pour laquelle les tailles de police par défaut rendent ces en-têtes plus petits que le texte en dessous?

htmlcssfont-sizetypography
24
Sean

J'ai cherché listes de diffusion W3C mais je n'ai trouvé aucun débat sur cette décision.

Voici ce que je peux déduire:

1995

La première version publiée de la spécification HTML (avant l'entrée en vigueur de CSS) spécifiée que h4 et h5 doit avoir la taille d'une "police normale". La taille de police pour h6 n'était pas explicitement spécifié, mais je suppose que c'était aussi la taille de police normale.

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 a fait irruption sur la scène. Ou vraiment, boitait sur la scène et cassé . La première feuille de style par défaut recommandée pour les navigateurs spécifié uniquement:

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

h4 à travers h6 serait donc 1em.

1997

HTML 3.2 a supprimé toutes les recommandations de taille de police par rapport au texte du document, seulement recommandant :

Les titres plus importants sont généralement affichés dans une police plus grande que les titres moins importants.

Cela est un peu en conflit avec CSS1, mais les deux ne faisaient pas partie l'un de l'autre à l'époque. La plupart des styles étaient toujours réalisés avec des attributs HTML en ligne, qui n'étaient toujours pas obsolètes.

1998

CSS2 est sorti, et il a supprimé une feuille de style par défaut de ses propres spécifications, et à la place lié à le nouveau exemple de feuille de style pour HTML 4. dans HTML spécification.

Il s'agit de l'origine des en-têtes explicitement définis comme plus petits que 1em, au moins pour autant que je sache. La feuille de style HTML 4.0 recommandée spécifie les valeurs que la plupart des navigateurs conservent jusqu'à aujourd'hui par défaut:

H5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
H6              { font-size: .67em; margin: 2.33em 0 }
30
Jacob Ford

Ooh, l'archéologie numérique!

Il s'avère donc que vous pouvez retracer cela aux "styles" par défaut (pas exactement CSS!) D'Internet Explorer 3-4 et de Netscape Navigator 3-4. Plus précisément, ils sont probablement extraits d'IE4pp2 mais introduits avec IE3. La façon dont IE/Microsoft a décidé de ces valeurs est malheureusement perdue au fil du temps (au moins publiquement - elle pourrait bien être disponible dans les archives de messagerie internes de Microsoft ... quelqu'un connaît-il un employé de MS?).

J'ai essayé de reconstruire la chaîne ci-dessous.

Comme Jacob l'a mentionné, la première version de CSS2 de novembre 1997 inclut une exemple de feuille de style qui définit h5 Comme .83em Et h6 comme .67em. Il note également:

La feuille de style de base décrit le rendu typique de tous les UA visuels des éléments HTML 4.0 [HTML40]). La feuille de style est basée sur des recherches approfondies sur la façon dont les UA actuels rendent le HTML, et les développeurs sont encouragés à l'utiliser comme feuille de style par défaut dans leurs implémentations.

En creusant un peu plus loin, nous pouvons trouver un "feuille de style de base" avec les mêmes valeurs, qui note:

J'ai développé l'exemple de feuille de style pour le brouillon W3C CSS2, mais le développement éditorial des matériaux à cet endroit n'a pas de statut W3C officiel.

...

La feuille de style de base décrit le rendu "consensus par défaut" de tous les éléments HTML 4.0 dans les navigateurs Web dérivés de Mosaic (Netscape Navigator et Microsoft Internet Explorer). Il est destiné à servir de base pour l'édition ou la "mise en cascade" d'autres modules de feuille de style, une référence informative, un complément (non officiel) à la spécification HTML 4.0, un exercice d'architecture de feuille de style et un outil de test de navigateur. La feuille de style de base capture le statu quo pour aller au-delà.

Nous pouvons continuer à suivre cette feuille de style de base pour revenir à la liste de diffusion de style www.

Il est peut-être intéressant de noter qu'à cette époque, le W3C a approuvé un ensemble de "feuilles de style de base" destiné (?) À devenir un meilleur défaut. Ces feuilles de style ( désormais accessibles via Internet Archive ) utilisent des valeurs plus grandes pour toutes les rubriques , ce qui donne h6 À 1em Et h5 À 1.17em. Malheureusement, il semble que cet ensemble de feuilles de style n'ait jamais vraiment décollé, nous nous retrouvons donc avec les étrangement petits h5 Et h6.

16
Bob