CSS font-weight Eigenschaft – Werte, Tipps & Beispiele

Die CSS-Eigenschaft font-weight legt fest, wie fett oder stark die Zeichen einer Schriftart erscheinen. Sie können die Stärke mit einem Schlüsselwort (normal, bold), einem relativen Schlüsselwort (bolder, lighter) oder einem numerischen Wert von 100 bis 900 angeben.

Eine Schriftart wird üblicherweise mit mehreren verschiedenen Stärken als separate Schriftdateien ausgeliefert. Der Browser kann nur die Stärken rendern, die die Schriftart tatsächlich bereitstellt. Viele Schriftarten enthalten nur zwei — normal (400) und bold (700) — daher kann die Angabe von font-weight: 300 auf die nächste verfügbare Stärke zurückfallen, anstatt eine echte Light-Variante darzustellen. Variable Fonts sind die Ausnahme: Sie betten eine kontinuierliche Gewichtsachse ein und können jeden Wert ohne separate Dateien rendern.

Diese Seite behandelt Schlüsselwort- und numerische Werte, wie bolder / lighter aufgelöst werden, die Animation von Schriftgewichten und was zu erwarten ist, wenn ein angefordertes Gewicht nicht verfügbar ist.

Anfangswert	normal
Gilt für	Alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbbar	Ja.
Animierbar	Ja.
Version	CSS1
DOM-Syntax	`object.style.fontWeight = "bolder";`

Syntax

font-weight: normal | bold | bolder | lighter | <number> | initial | inherit;

Werte

Wert	Beschreibung
`normal`	Standardgewicht. Entspricht `400`.
`bold`	Fettes Gewicht. Entspricht `700`.
`bolder`	Eine Stufe schwerer als das berechnete Gewicht des Elternelements (siehe Tabelle unten).
`lighter`	Eine Stufe leichter als das berechnete Gewicht des Elternelements (siehe Tabelle unten).
`100`–`900`	Numerisches Gewicht in Schritten von 100 — von dünn (100) bis am schwersten (900).
`initial`	Setzt auf den Anfangswert der Eigenschaft zurück (`normal`).
`inherit`	Erbt das berechnete Gewicht vom Elternelement.

Einfaches Beispiel

Das folgende Beispiel wendet bolder auf einen Absatz an, sodass er schwerer als der umgebende Fließtext erscheint.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.bolder {
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <h2>Font-weight property example</h2>
    <p class="bolder">We used a bolder text here.</p>
  </body>
</html>

Probier es selbst »

Ergebnis

Alle Schlüsselwort- und numerischen Werte

Das folgende Beispiel stellt alle wichtigen Werte nebeneinander dar, damit Sie sie visuell vergleichen können.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.normal {
        font-weight: normal;
      }
      p.lighter {
        font-weight: lighter;
      }
      p.bold {
        font-weight: bold;
      }
      p.bolder {
        font-weight: bolder;
      }
      p.fweight {
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <h2>Font-weight property example</h2>
    <p class="normal">We used normal weight here.</p>
    <p class="lighter">This is a lighter weight.</p>
    <p class="bold">We used bold weight here.</p>
    <p class="bolder">We used a bolder text here.</p>
    <p class="fweight">We set font-weight 600 here.</p>
  </body>
</html>

Probier es selbst »

Die numerische Gewichtsskala

Numerische Werte reichen von 100 (am dünnsten) bis 900 (am dicksten) in Schritten von 100. Jede Stufe hat einen gebräuchlichen Namen, der von Schriftdesignern verwendet wird:

Wert	Gebräuchlicher Name
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal (Regular)
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)

normal entspricht 400 und bold entspricht 700, daher sind diese Schlüsselwort-/Zahlpaare immer austauschbar. Verwenden Sie einen numerischen Wert, wenn Sie eine feinere Kontrolle benötigen — zum Beispiel ergibt font-weight: 500 eine „mittlere" Überschrift, die schwerer als Fließtext, aber leichter als eine vollständig fette Überschrift ist.

Wenn die Schriftart das angeforderte Gewicht nicht hat

Wenn die Schriftart das genaue angeforderte Gewicht nicht bereitstellt, greift der Browser auf das nächstgelegene verfügbare Gewicht zurück. Deshalb können font-weight: 100 und font-weight: 300 identisch aussehen, wenn die Schriftart nur 400 (Regular) und 700 (Bold) enthält. Laden oder deklarieren Sie immer die spezifischen Gewichte, die Ihr Design verwendet — wie das effizient geht, erfahren Sie unter @font-face und font-display.

Wie bolder und lighter aufgelöst werden

bolder und lighter sind relativ zum geerbten Gewicht des Elternelements. Sie addieren oder subtrahieren nicht einfach 100. Stattdessen ordnet der Browser das berechnete Gewicht des Elternelements einer gröberen dreistufigen Skala zu, bevor er den Schritt anwendet:

Geerbtes Gewicht	`bolder` wird zu	`lighter` wird zu
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Das bedeutet, dass das Verschachteln von zwei bolder-Elementen nicht unbegrenzt schwerer wird — sobald 900 erreicht ist, bleibt es dabei.

<!DOCTYPE html>
<html>
  <head>
    <title>bolder resolution example</title>
    <style>
      .parent {
        font-weight: 400; /* normal */
      }
      .child {
        font-weight: bolder; /* resolves to 700 */
      }
      .grandchild {
        font-weight: bolder; /* resolves to 900, then stops */
      }
    </style>
  </head>
  <body>
    <p class="parent">
      Parent at normal (400).
      <span class="child">
        Child becomes bold (700).
        <span class="grandchild">Grandchild becomes black (900).</span>
      </span>
    </p>
  </body>
</html>

font-weight animieren

font-weight ist animierbar, sodass Sie mit CSS-Übergängen oder Animationen nahtlos zwischen Gewichten wechseln können. Eine flüssige Interpolation funktioniert nur mit variablen Fonts, da statische Schriftarten nur diskrete Gewichtsdateien haben. Bei einer statischen Schriftart springt der Browser am Mittelpunkt des Übergangs zum nächsten verfügbaren Gewicht.

.heading {
  font-weight: 400;
  transition: font-weight 0.3s ease;
}

.heading:hover {
  font-weight: 700;
}

Für kontinuierliche, flüssige Gewichtsänderungen — zum Beispiel ein Hover-Effekt, der von dünn zu fett gleitet — verwenden Sie einen variablen Font mit der Eigenschaft font-variation-settings:

.heading {
  /* "wght" is the weight axis on variable fonts */
  font-variation-settings: "wght" 400;
  transition: font-variation-settings 0.3s ease;
}

.heading:hover {
  font-variation-settings: "wght" 700;
}

Tipps und Barrierefreiheit

Laden Sie die Gewichte, die Sie verwenden. Wenn Sie Schriftarten von Google Fonts oder einem anderen Dienst laden, fordern Sie jedes Gewicht explizit in der URL oder dem @font-face-Deskriptor an. Wenn ein Gewicht nicht geladen ist, synthetisiert der Browser ein künstliches Fett, das häufig von geringerer Qualität als die echte Variante ist.
Verwenden Sie Gewicht nicht allein zur Bedeutungsvermittlung. Fetter Text ist nur ein visueller Hinweis. Für Text, der semantische Bedeutung tragen muss, verwenden Sie <strong> (das standardmäßig font-weight: bold trägt), damit unterstützende Technologien die Betonung kommunizieren können.
Achten Sie auf den Kontrast bei leichten Gewichten. Gewichte von 100–300 reduzieren die Strichstärke und können unterhalb der WCAG-Kontraststärke-Schwellenwerte fallen, insbesondere bei kleinen Größen und farbigen Hintergründen. Überprüfen Sie Kontrastverhältnisse mit dem Farbauswahl-Tool und halten Sie Fließtext bei 400 oder schwerer.
Bevorzugen Sie numerische Werte in Design-Systemen. Schlüsselwörter wie bold sind grob. Die Verwendung von 700 macht die Absicht explizit und ist leichter zu überprüfen.

Übungen

Übung

Was steuert die CSS-Eigenschaft 'font-weight'?

Sie gibt die Stärke oder Dicke der Schriftart an.Sie gibt den Stil der Schriftart an.Sie legt fest, wie die Enden von Linien gezeichnet werden, wenn Schriftarten umrissen werden.Sie bestimmt, ob Text in einem fetten oder normalen Gewicht dargestellt wird.Sie bestimmt die Breite von Tabulatoren im Text.

Geerbtes Gewicht	`bolder` wird zu	`lighter` wird zu
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Geerbtes Gewicht	`bolder` wird zu	`lighter` wird zu
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700