Was sind die Standardschriftgrößen (in Pixel) für die HTML-Überschriften-Tags (, , etc.)?

Lesezeit: 4 Minuten

Benutzer-Avatar
Dr. StrangeLove

Was sind die standardmäßigen Schriftpixelgrößen für die Überschriften (h1-h6)-Tags?

  • Sinnlose Frage – es ist nicht erforderlich, Text unterschiedlicher Größe für Überschriften zu haben (oder sogar das Konzept “Schriftart” zu haben – denken Sie zum Beispiel an die Audioausgabe). Vielleicht meinten Sie “Was ist eine gute Auswahl an Schriftgrößen für ein Stylesheet, das auf Bildschirme/Druck/was auch immer abzielt?”.

    – Toby Speight

    7. Dezember 2017 um 17:24 Uhr

  • Das ist nicht bedeutungslos. Es gibt Standardgrößen, die von einem Überschriften-Tag zum nächsten variieren, und es ist legitim zu fragen, was diese Größen sind,

    – Wesmat

    14. Juli 2019 um 22:14 Uhr

  • Welche der 321.219.449 verschiedenen Browser/Version/Betriebssystem-Permutationen fragen Sie genau nach?

    – Verbindung

    15. Januar um 9:36 Uhr

Ich denke, es ist wie folgt:

h1 is 2 em
h2 is 1.5 em
h3 is 1.3 em
h4 is 1 em
h5 is 0.8 em
h6 is 0.7 em

Ein Em ist nicht dasselbe wie ein Pixel. Es ist eine relative Art, Größen zu betrachten. Vor diesem Hintergrund denke ich, dass die meisten Browser standardmäßig 16px (oder 1em) verwenden.

  • Die Antwort von Sam Benson beantwortet die ursprüngliche Frage zur Größenanpassung in Pixel.

    – benihana21

    18. Januar 2021 um 2:33 Uhr


  • Die Werte für h3, h5 und h6 veraltet sind, siehe Antwort unten.

    – mb21

    15. Januar um 9:00 Uhr

Benutzer-Avatar
Sam Benson

Eine andere Art, es auszudrücken, ist:

h1 is   32px   (2em)
h2 is   24px (1.5em)
h3 is 20.8px (1.3em)
h4 is   16px   (1em)
h5 is 12.8px (0.8em)
h6 is 11.2px (0.7em)

Benutzer-Avatar
Roman Holzner

Für einen tatsächlichen Beweis werfen Sie einen Blick auf die html.css (171 – 237) mit dem Standardstil von Mozilla Firefox:

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.17em;
}

h4 {
  font-size: 1.00em;
}

h5 {
  font-size: 0.83em;
}

h6 {
  font-size: 0.67em;
}

Das ganze CSS ist:

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin-block-start: .67em;
  margin-block-end: .67em;
}

h2,
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin-block-start: .83em;
  margin-block-end: .83em;
}

h3,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

h4,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.00em;
  font-weight: bold;
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
}

h5,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

h6,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin-block-start: 2.33em;
  margin-block-end: 2.33em;
}

  • Das ist richtig. Überprüfen Sie dies. html.spec.whatwg.org/multipage/rendering.html

    – Schneetraum

    20. Oktober 2020 um 2:13 Uhr

  • Auf einer 16-Pixel-Skala sind das: h1: 32 Pixel, h2: 24 Pixel, h3: 18⅔px, h4: 16 Pixel, h5: 13⅓px, h6: 10⅔px. Auf einer 12-Pixel-Skala sind das: h1: 24 Pixel, h2: 18 Pixel, h3: 14 Pixel, h4: 12 Pixel, h5: 10 Pixel, h6: 8 Pixel

    – pythoncoder42

    9. März 2021 um 16:15 Uhr


Die Größe für h1-h6-Tags ist von Browser zu Browser unterschiedlich. Es gibt keine W3-Spezifikation, die eine Standardgröße für Überschriften-Tags erzwingt. Jeder Browser hat seine eigene implementiert.

Es wird empfohlen, einen CSS-Normalisierer zu verwenden, um die Größen in allen Browsern einheitlich zu machen. Sie können dies tun, indem Sie Ihre benutzerdefinierten Größen für die Tags definieren, um die Standardwerte des Browsers zu überschreiben.

Dies wird im Standard-Stylesheet des Browsers festgelegt. Moderne Browser setzen diese alle auf die gleichen em-Werte. Und standardmäßig ist 1em in modernen Browsern 16px, also:

h1 | 2em    | 32px
h2 | 1.5em  | 24px
h3 | 1.17em | 18.72px
h4 | 1em    | 16px
h5 | 0.83em | 13.28px
h6 | 0.67em | 10.72px

Diese Werte sind das, was die WhatWG’s Lebensstandard empfiehlt und ich habe überprüft, ob Chrome, Firefox und Safari diese Werte tatsächlich implementieren.

(Beachten Sie, dass die Werte für h5 und h6 etwas anders sind als im Legacy Standard-Stylesheet für HTML 4).

Schließlich können Sie das folgende Snippet ausführen und in Ihrem bevorzugten Browser überprüfen:

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

1186680cookie-checkWas sind die Standardschriftgrößen (in Pixel) für die HTML-Überschriften-Tags (, , etc.)?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy