Quelles sont les tailles de police les plus courantes pour les balises H1-H6 ?

Question

Je n'ai jamais su par où commencer comme base de référence pour les meilleures pratiques générales. Oui, je sais que cela dépend de votre conception, mais qu'est-ce qui est le plus courant ?

Voici ce que j'ai actuellement en guise d'entrée en matière :

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

Oui, nous n'utilisons pas d'EM à mon travail actuel.

Answer 1

Cela dépend de la feuille de style par défaut du navigateur. Vous pouvez consulter un tableau (non officiel) des feuilles de style par défaut de l'agent utilisateur CSS2.1 aquí .

Sur la base de la page ci-dessus, les tailles par défaut ressemblent à ceci :

    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

Il convient également de jeter un coup d'œil à la feuille de style par défaut pour HTML 4 . Le W3C recommande d'utiliser ces styles par défaut. Un extrait abrégé :

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

Answer 2

Les titres sont normalement en caractères gras ; cette fonction a été désactivée pour cette démonstration de la correspondance des tailles. MSIE et Opera interprètent ces tailles de la même manière, mais notez que les navigateurs Gecko et Chrome interprètent l'en-tête 6 comme étant de 11 pixels au lieu de 10 pixels/taille de police 1, et l'en-tête 3 comme étant de 19 pixels au lieu de 18 pixels/taille de police 4 (bien qu'il soit difficile de faire la différence même dans une comparaison directe et impossible à l'usage). Il semble que Gecko limite également la taille du texte à 10 pixels.