Quelles sont les tailles de police les plus courantes pour les balises H1-H6 [fermé]

107

Je n'ai toujours pas su par où commencer en tant que référence générale des meilleures pratiques. 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 tant que démarreur:

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

Merci

html css frontend

— rsturim
source

ne pensez pas que c'est une question appropriée car il n'y a pas de réponse ..

— Treemonkey

Treemonkey, vraiment? N'est-il pas acceptable de demander des opinions?

— rsturim

Ce que je préfère, c'est que lorsque je cherche quelque chose sur Google, le meilleur résultat est un article StackOverflow et la question est fermée ou en attente. Rien de tel que l'encapsulation obsolète des connaissances pour résister à l'épreuve du temps.

— Kyle Kelley

Non, @rsturim, ce n'est pas bien de demander des avis

— Liam

J'ai cherché une question comme celle-ci, donc en dehors du sujet pour cette pile particulière, je l'ai trouvée utile. Le fait de fermer cette question signifie qu'aucun dialogue, débat ou réponse ne peut être ajouté, ce qui réduit la valeur de cette question pour la communauté dans son ensemble. J'ai vu d'autres questions hors sujet migrées vers des piles plus appropriées. Cela peut-il être fait pour cette question? Cheers ~

— Pete

Réponses:

213

Cela dépendrait de la feuille de style par défaut du navigateur. Vous pouvez afficher un tableau (non officiel) des valeurs par défaut de la feuille de style de l'agent utilisateur CSS2.1 ici .

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

La feuille de style par défaut pour HTML 4 mérite également d'être examinée . 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.

— Donut
source

La recommandation HTML 4 pour H6 a été ignorée et 0.67em gagnée; de nos jours, WebKit et FF utilisent les mêmes emtailles que IE8. w3.org/TR/html-markup/h6.html indique également que l'affichage «typique» est 0,67em.

— Beni Cherniavsky-Paskin

Un raisonnement derrière cela ou un gars au hasard a dit une fois "il y aura des titres à ces tailles"?

— rzb

Ce serait une bonne idée de mettre à jour la réponse pour inclure les valeurs par défaut HTML5.

— Moha le chameau tout-puissant

Ici sur les HTML5 w3.org/TR/html5/rendering.html#sections-and-headings

— Sirens

Le lien @ BeniCherniavsky-Paskinthe est rompu, pouvez-vous en publier un nouveau?

— kuldeep

Les titres sont normalement en 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 le titre 6 comme 11 pixels au lieu de 10 pixels / taille de police 1, et le titre 3 comme 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 à utiliser). Il semble que Gecko limite également le texte à 10 pixels maximum.

— Sujit Agarwal
source