font-weight

Zuletzt aktualisiert am 15. Februar 2026

font-weight steuert die Strichstärke einer Schrift, von haarfein bis extrafett. Der Standardwert normal entspricht 400, bold entspricht 700. Die Eigenschaft wird vererbt und lässt sich mit numerischen Werten von 100 bis 900 präzise steuern. Ob ein Gewicht tatsächlich sichtbar ist, hängt davon ab, ob die verwendete Schrift diesen Schnitt enthält. Fehlt der passende Schnitt, simuliert der Browser ein künstliches Bold (das sogenannte Faux Bold), das oft deutlich schlechter aussieht als ein echter Fettschnitt.

Grundlagen

Die Gewichtsskala reicht von 100 (Thin/Hairline) bis 900 (Black/Heavy), jeweils in 100er-Schritten. Die beiden wichtigsten Werte sind 400 (normal) und 700 (bold). Die Schlüsselwörter normal und bold sind Aliase für diese Zahlen und funktionieren identisch.

Ob ein numerischer Wert tatsächlich einen sichtbaren Unterschied macht, hängt von der geladenen Schrift ab. Viele System-Schriften wie Arial oder Helvetica haben nur zwei Schnitte: Regular (400) und Bold (700). Wenn du font-weight: 300 verwendest und die Schrift keinen Light-Schnitt hat, fällt der Browser auf den nächsten verfügbaren Schnitt zurück, in diesem Fall 400. Bei Variable Fonts dagegen kannst du jeden beliebigen Wert zwischen 1 und 1000 verwenden, und die Schrift interpoliert stufenlos.

Die relativen Schlüsselwörter lighter und bolder beziehen sich auf das Gewicht des Elternelements. Sie springen zur nächsten verfügbaren Stufe laut einer festen Zuordnungstabelle: lighter von 400 ergibt 100, bolder von 400 ergibt 700. Das Verhalten ist also nicht einfach “minus 100” oder “plus 100”.

Syntax & Werte

Beispiele

Gewichtsskala 100-900

Alle Standard-Gewichtsstufen nebeneinander. Ob sich benachbarte Stufen visuell unterscheiden, hängt von der Schrift ab.

.thin       { font-weight: 100; } /* Thin / Hairline */
.extra-light { font-weight: 200; }
.light      { font-weight: 300; }
.normal     { font-weight: 400; } /* = normal */
.medium     { font-weight: 500; }
.semi-bold  { font-weight: 600; }
.bold       { font-weight: 700; } /* = bold */
.extra-bold { font-weight: 800; }
.black      { font-weight: 900; } /* Black / Heavy */

<div class="weight-scale">
<div class="w-100">Thin (Hairline) <span class="num">100</span></div>
<div class="w-200">Extra Light <span class="num">200</span></div>
<div class="w-300">Light <span class="num">300</span></div>
<div class="w-400">Normal (Regular) <span class="num">400</span></div>
<div class="w-500">Medium <span class="num">500</span></div>
<div class="w-600">Semi Bold <span class="num">600</span></div>
<div class="w-700">Bold <span class="num">700</span></div>
<div class="w-800">Extra Bold <span class="num">800</span></div>
<div class="w-900">Black (Heavy) <span class="num">900</span></div>
</div>

normal und bold im Vergleich

Die Schlüsselwörter normal und bold sind Aliase für die numerischen Werte 400 und 700. Sie sind komplett austauschbar.

/* Diese Paare sind identisch */
.a { font-weight: normal; }  /* = 400 */
.b { font-weight: 400; }

.c { font-weight: bold; }    /* = 700 */
.d { font-weight: 700; }

<div class="keyword-demo">
<div class="kw-normal">font-weight: normal <span class="tag">= 400</span></div>
<div class="kw-400">font-weight: 400 <span class="tag">= normal</span></div>
<div class="kw-bold">font-weight: bold <span class="tag">= 700</span></div>
<div class="kw-700">font-weight: 700 <span class="tag">= bold</span></div>
</div>

lighter und bolder: Relative Gewichte

lighter und bolder springen zur nächsten verfügbaren Stufe laut Spezifikation. Sie rechnen nicht einfach -100 oder +100.

.parent { font-weight: 400; }

.parent .bolder {
  font-weight: bolder;
  /* 400 → 700 (nächste schwerere Stufe) */
}

.parent .lighter {
  font-weight: lighter;
  /* 400 → 100 (nächste leichtere Stufe) */
}

<div class="relative-demo">
<div class="parent">
  <div class="parent-label">Elternelement: font-weight: 400</div>
  <div class="child child-bolder">
    bolder → 700
    <div class="child-info">Springt von 400 zur nächsten Stufe: 700</div>
  </div>
  <div class="child child-lighter">
    lighter → 100
    <div class="child-info">Springt von 400 zur nächsten leichteren Stufe: 100</div>
  </div>
</div>
</div>

Faux Bold erkennen

Wenn eine Schrift keinen Bold-Schnitt hat, simuliert der Browser ein künstliches Bold (Faux Bold). Das Ergebnis sieht oft unscharf und klobig aus, weil der Browser die Buchstaben einfach etwas breiter rendert, statt ein durchdachtes Design zu verwenden.

/* Problem: Web-Font nur als Regular geladen */
@font-face {
  font-family: "MeineSchrift";
  src: url("schrift-regular.woff2") format("woff2");
  font-weight: 400; /* Nur Regular */
}

.text { font-family: "MeineSchrift"; }
.text b { font-weight: 700; } /* → Faux Bold! */

/* Lösung: Bold-Schnitt separat laden */
@font-face {
  font-family: "MeineSchrift";
  src: url("schrift-bold.woff2") format("woff2");
  font-weight: 700; /* Bold-Schnitt */
}

<div class="faux-demo">
<div class="faux-real">
  <div class="label">Echter Bold-Schnitt (system-ui hat Bold)</div>
  Dieser Text hat einen echten Bold-Schnitt mit sauberem Schriftbild.
</div>
<div class="faux-fake">
  <div class="label">Tipp: Lade alle benötigten Gewichte</div>
  Wenn du eine Web-Font nur in Regular (400) lädst und dann <b>bold verwendest</b>, erzeugt der Browser Faux Bold. Lade den Bold-Schnitt (700) separat.
</div>
</div>

Barrierefreiheit

Verwende ausreichenden Kontrast zwischen verschiedenen Gewichten, um Textbetonungen visuell unterscheidbar zu machen. Für semantische Betonung nutze <strong> statt nur visuelles font-weight: bold. Screenreader erkennen <strong> als betonten Text, ein reines CSS-Bold wird ignoriert.

Sehr dünne Gewichte (100-200) können bei kleinen Schriftgrößen schwer lesbar sein, besonders auf Bildschirmen mit niedriger Auflösung oder für Nutzer mit Sehbeeinträchtigungen. Verwende dünne Gewichte nur für große Überschriften oder dekorative Elemente, nicht für Fließtext.

Achte darauf, dass fettgedruckter Text nicht die einzige Methode ist, um wichtige Informationen hervorzuheben. Kombiniere Schriftstärke mit anderen visuellen Hinweisen wie Farbe, Icons oder räumlicher Positionierung, damit die Betonung auch für Nutzer erkennbar ist, die Schriftunterschiede schlecht wahrnehmen.

Häufige Fehler

• Gewicht verwenden, das die Schrift nicht hat: Wenn du font-weight: 300 auf Arial setzt, passiert nichts, denn Arial hat keinen Light-Schnitt. Der Browser fällt auf 400 zurück. Bei Web-Fonts musst du jeden benötigten Schnitt explizit laden.
• Faux Bold nicht erkennen: Du lädst eine Web-Font nur in Regular (400) und verwendest font-weight: bold. Der Browser simuliert Bold, was unsauber aussieht. Lösung: Bold-Schnitt separat mit @font-face laden.
• font-weight: bold statt numerisch bei Variable Fonts: Variable Fonts unterstützen stufenlose Gewichte. bold springt direkt auf 700, statt den feinen Spielraum zwischen 400 und 700 zu nutzen.
• lighter/bolder falsch verstehen: lighter von 400 ergibt nicht 300, sondern 100. bolder von 400 ergibt nicht 500, sondern 700. Die Zuordnung folgt festen Regeln in der CSS-Spezifikation.
• Zu viele Gewichte laden und Performance verschlechtern: Jeder Schriftschnitt ist eine separate Datei. Lade nur die Gewichte, die du tatsächlich verwendest. Für die meisten Websites reichen 400 und 700.

Browser-Kompatibilität

font-weight wird von allen Browsern vollständig unterstützt. Numerische Werte (100-900) und Schlüsselwörter funktionieren überall. Variable Fonts mit stufenlosen Werten werden seit 2018 von allen modernen Browsern unterstützt.

Email-Kompatibilität

font-weight funktioniert in HTML-Emails zuverlässig mit den Standardwerten normal und bold. Numerische Werte werden teilweise unterstützt.

Verwandte Eigenschaften