Was sind die häufigsten Schriftgrößen für H1-H6-Tags [geschlossen]

107

Ich war mir immer nicht sicher, wo ich als allgemeine Best-Practice-Basis anfangen soll. Ja, ich weiß, dass es von Ihrem Design abhängt - aber was ist am häufigsten?

Folgendes habe ich derzeit als Starter:

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

Ja, wir verwenden bei meinem aktuellen Job keine EMs.

Vielen Dank

html css frontend rsturim
quelle
4
Denken Sie nicht, dass dies eine angemessene Frage ist, da es keine Antwort gibt.
Treemonkey
19
Treemonkey, wirklich? Ist es nicht in Ordnung, nach Meinungen zu fragen?
rsturim
27
Meine Lieblingssache ist, wenn ich etwas google, das beste Ergebnis ist ein StackOverflow-Beitrag, und die Frage ist geschlossen oder in der Warteschleife. Nichts ist vergleichbar mit der veralteten Verkapselung von Wissen, um den Test der Zeit zu bestehen.
Kyle Kelley
2
Nein, @rsturim, es ist nicht in
Liam
6
Ich habe nach einer solchen Frage gesucht und fand sie nützlich, obwohl ich nicht zum Thema für diesen bestimmten Stapel gehörte. Wenn diese Frage geschlossen ist, können keine weiteren Dialoge, Debatten oder Antworten hinzugefügt werden, was den Wert dieser Frage für die Community insgesamt verringert. Ich habe andere Fragen außerhalb des Themas gesehen, die auf geeignetere Stapel migriert wurden. Kann dies für diese Frage getan werden? Prost ~
Pete

Antworten:

213

Dies hängt vom Standard-Stylesheet des Browsers ab. Sie können eine (inoffizielle) Tabelle von CSS2.1 User Agent Sheet Standardwerte sehen hier .

Basierend auf der oben aufgeführten Seite sehen die Standardgrößen ungefähr so ​​aus:

    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

Ein Blick lohnt sich auch das Standard-Stylesheet für HTML 4 . Das W3C empfiehlt, diese Stile als Standard zu verwenden. Ein gekürzter Auszug:

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; }

Hoffe, diese Informationen sind hilfreich.

Krapfen
quelle
3
Die HTML 4-Empfehlung für H6 wurde ignoriert und 0.67em gewonnen; Heutzutage verwenden WebKit und FF die gleichen emGrößen wie IE8. w3.org/TR/html-markup/h6.html sagt auch, dass "typische" Anzeige 0,67em ist.
Beni Cherniavsky-Paskin
Gibt es eine Begründung dafür oder einen zufälligen Typen, der einmal sagte: "Es soll Überschriften in diesen Größen geben"?
RZB
1
Es wäre eine gute Idee, die Antwort so zu aktualisieren, dass sie HTML5-Standardeinstellungen enthält.
Moha das allmächtige Kamel
1
Hier auf den HTML5 diejenigen w3.org/TR/html5/rendering.html#sections-and-headings
Sirenen
@ BeniCherniavsky-Paskinthe Link ist kaputt, kannst du bitte einen neuen posten?
Kuldeep
3

Überschriften sind normalerweise fett gedruckt. das wurde für diese Demonstration der Größenkorrespondenz deaktiviert. MSIE und Opera interpretieren diese Größen gleich, beachten Sie jedoch, dass Gecko-Browser und Chrome die Überschrift 6 als 11 Pixel anstelle von 10 Pixel / Schriftgröße 1 und die Überschrift 3 als 19 Pixel anstelle von 18 Pixel / Schriftgröße 4 interpretieren (obwohl dies schwierig ist) den Unterschied auch in einem direkten Vergleich erkennen und unmöglich in der Verwendung). Es scheint, dass Gecko den Text auch auf nicht weniger als 10 Pixel beschränkt.

Sujit Agarwal
quelle