web-dev-qa-db-fra.com

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

Je me suis toujours demandé par où commencer en tant que base de référence des meilleures pratiques. Oui, je sais que cela dépend de votre conception - mais qu'est-ce qui est le plus commun?

Voici ce que j'ai actuellement en entrée:

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 de EM dans mon travail actuel.

Merci

htmlcssfrontend
97
rsturim

Cela dépend de la feuille de style par défaut du navigateur. Vous pouvez afficher une table (non officielle) des valeurs par défaut de la feuille de style de l'agent utilisateur CSS2.1 here .

Selon la page indiquée 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 est également intéressant de jeter un œ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; }

J'espère que cette information est utile.

206
Donut

Les titres sont normalement gras. qui a été désactivé pour cette démonstration de correspondance de taille. 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 11 pixels au lieu de 10 pixels/taille de police 1 et l'en-tête 3 comme 19 pixels. de 18 pixels/taille de police 4 (bien qu'il soit difficile de faire la différence, même en comparaison directe et impossible à utiliser). Il semble que Gecko limite également le texte à moins de 10 pixels.

3
Sujit Agarwal