Ausführbare CSS-Docs: Schriftgröße

Q: Wie ändere ich die Schriftgröße in CSS?

Setz die Eigenschaft font-size am Element: p { font-size: 18px; }. Sie nimmt Längen (px, rem, em), Prozentwerte und Schlüsselwörter wie large an.

Q: Wie ändere ich die Schriftgröße in HTML?

Mit CSS, entweder in einem Stylesheet oder in einem style-Attribut: . Der alte Tag ist in HTML5 veraltet und sollte nicht verwendet werden.

Q: Soll ich für die Schriftgröße px, em oder rem nehmen?

Nimm für den meisten Text rem: Es skaliert mit der Schrifteinstellung im Browser des Nutzers und multipliziert sich nicht. Nimm em, wenn eine Größe ihrem Elternelement folgen soll, etwa ein Icon in einem Button. px folgt nicht der Standardschriftgröße, die jemand im Browser einstellt, also vermeide es für Fließtext.

Q: Warum wird meine Schriftgröße in em immer größer?

Weil em sich auf die Schriftgröße des Elternelements bezieht, sodass verschachtelte Elemente sich multiplizieren: 1.2em in 1.2em ergibt das 1,44-Fache der Basis. Wechsle zu rem, das sich immer auf das Wurzelelement bezieht.

So legst du die Schriftgröße in CSS fest

Die Eigenschaft font-size legt die Größe von Text fest. Setz sie an ein beliebiges Element, und jeder Text darin erbt die Größe, außer ein Kind setzt seine eigene.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

Um die Schriftgröße in HTML zu ändern, nimmst du trotzdem CSS. Füge ein style-Attribut hinzu () oder eine Regel in einem Stylesheet. Der Tag  aus den 1990ern ist veraltet und hat in einer modernen Seite nichts verloren.

Welche Einheiten font-size annimmt

Wert	Beispiel	Worauf er sich bezieht
`px`	`16px`	Auf nichts: eine feste Größe
`rem`	`1.25rem`	Die Schriftgröße des Wurzelelements `<html>` (standardmäßig 16px)
`em`	`1.2em`	Die Schriftgröße des Elternelements
`%`	`120%`	Die Schriftgröße des Elternelements, wie `em` (`120%` ist `1.2em`)
Schlüsselwort	`large`	Eine vordefinierte Skala um den Standard `medium`
Relatives Schlüsselwort	`smaller`, `larger`	Eine Stufe weg von der Größe des Elternelements
Viewport	`4vw`	Die Viewport-Breite (4% davon)
Funktion	`clamp(1rem, 4vw, 2rem)`	Fließend zwischen einem Minimum und einem Maximum

Tipp einen Wert ein und sieh, welche Größe der Browser berechnet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Probier 20px, 2em, 150%, x-large, smaller und 5vw. Ein ungültiger Wert wie big wird ignoriert, und der Text behält seine letzte gültige Größe.

rem vs. em: der Unterschied, der Ärger macht

rem schaut immer auf das Wurzelelement, also ist 1.2rem überall gleich groß. em schaut auf das Elternelement, also multiplizieren sich Größen, wenn Elemente verschachtelt sind:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

Die innerste em-Box ist 16 × 1,2 × 1,2 × 1,2 = 27,648px groß. Die innerste rem-Box ist immer noch 19,2px. Dieses Multiplizieren ist nützlich für eine Komponente, deren Teile gemeinsam skalieren sollen, und überall sonst eine Überraschung. Die Seite zu Einheiten vergleicht alle Längeneinheiten.

Schlüsselwörter: xx-small bis xx-large

Die absoluten Schlüsselwörter bilden eine feste Skala um medium, das der Standardgröße des Nutzers entspricht (16px, sofern nicht geändert):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

Bei den standardmäßigen 16px ist small 13px, large 18px, x-large 24px und xx-large 32px. Für schnelle Arbeit reichen Schlüsselwörter, aber ein Designsystem will meist eine eigene Skala in rem.

Fließende Schriftgröße mit clamp()

Eine Überschrift, die mit dem Bildschirm wachsen, aber nie zu klein oder zu groß werden soll, ist ein einziger Aufruf von clamp(): das Minimum, eine bevorzugte Größe, die skaliert, und das Maximum.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

In einer 800px breiten Vorschau sind 5vw 40px, was zwischen 24px und 48px liegt, also gewinnt dieser Wert. Die Seite zu clamp behandelt fließende Typografie ausführlich.

Eine Basisgröße für die ganze Seite festlegen

Setz die Größe einmal an body (oder html) und alles andere relativ dazu:

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

Verzichte auf Tricks wie html { font-size: 62.5%; }, außer jede Größe auf der Seite wird danach in rem gesetzt, und setz nie eine feste px-Größe an html: Sie überschreibt die Schriftgröße, die der Leser in seinem Browser gewählt hat, und manche Menschen sind darauf angewiesen, um überhaupt lesen zu können.

Hinweise zur Barrierefreiheit

Fließtext mit 16px oder mehr ist eine gute Untergrenze zum Lesen am Bildschirm.
Größen in rem und em folgen der Standard-Schrifteinstellung des Nutzers. Größen in px folgen dem Seitenzoom, aber nicht dieser Einstellung.
Auf dem iPhone zoomt Safari in die Seite, wenn du ein Eingabefeld mit einer Schriftgröße unter 16px fokussierst. Gib Formularfeldern font-size: 1rem oder mehr, um das zu vermeiden.

Häufige Fehler

Den -Tag verwenden. Er ist veraltet. Nimm die Eigenschaft font-size.
Verschachtelte em-Größen, die außer Kontrolle wachsen oder schrumpfen. Nimm rem, außer du willst das Multiplizieren.
Eine feste px-Größe an html. Sie überschreibt die eigene Schrifteinstellung des Lesers.
Vergessen, dass Überschriften schon eine Größe haben. <h1> ist standardmäßig 2em, du brauchst also h1 { font-size: 1em; }, wenn es so groß wie Fließtext sein soll.
Nur Viewport-Einheiten. font-size: 3vw wird auf dem Handy unlesbar und auf einem breiten Monitor riesig. Pack es in clamp().

Häufig gestellte Fragen

Wie ändere ich die Schriftgröße in CSS?

Setz die Eigenschaft font-size am Element: p { font-size: 18px; }. Sie nimmt Längen (px, rem, em), Prozentwerte und Schlüsselwörter wie large an.

Wie ändere ich die Schriftgröße in HTML?

Mit CSS, entweder in einem Stylesheet oder in einem style-Attribut: . Der alte Tag  ist in HTML5 veraltet und sollte nicht verwendet werden.

Wie groß ist die Standardschriftgröße in Browsern?

16px für Fließtext, sofern der Nutzer sie nicht in den Browsereinstellungen geändert hat. Diesem Wert entsprechen standardmäßig 1rem und das Schlüsselwort medium.

Soll ich für die Schriftgröße px, em oder rem nehmen?

Nimm für den meisten Text rem: Es skaliert mit der Schrifteinstellung im Browser des Nutzers und multipliziert sich nicht. Nimm em, wenn eine Größe ihrem Elternelement folgen soll, etwa ein Icon in einem Button. px folgt nicht der Standardschriftgröße, die jemand im Browser einstellt, also vermeide es für Fließtext.

Warum wird meine Schriftgröße in em immer größer?

Weil em sich auf die Schriftgröße des Elternelements bezieht, sodass verschachtelte Elemente sich multiplizieren: 1.2em in 1.2em ergibt das 1,44-Fache der Basis. Wechsle zu rem, das sich immer auf das Wurzelelement bezieht.

Verwandte Konzepte