font-weight

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.

Steckbrief font-weight

Syntax: font-weight: <number> | normal | bold | lighter | bolder
Initialwert: normal (400)
Vererbt: Ja
Animierbar: Ja

Kategorie: Typografie
Werte: 14
Beispiele: 4
Browser: 5 von 5
E-Mail: 4 von 5
Stand: 15.02.2026

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

14 Werte

Wert	Beschreibung	Beispiel
`normal`	Normales Gewicht, entspricht 400.	font-weight: normal
`bold`	Fettes Gewicht, entspricht 700.	font-weight: bold
`lighter`	Eine Stufe leichter als das Elternelement.	font-weight: lighter
`bolder`	Eine Stufe schwerer als das Elternelement.	font-weight: bolder
`100`	Thin / Hairline: dünnste Strichstärke.	font-weight: 100
`200`	Extra Light / Ultra Light.	font-weight: 200
`300`	Light: leicht dünner als normal.	font-weight: 300
`400`	Normal / Regular: Standardgewicht.	font-weight: 400
`500`	Medium: etwas schwerer als normal.	font-weight: 500
`600`	Semi Bold / Demi Bold.	font-weight: 600
`700`	Bold: fettes Gewicht.	font-weight: 700
`800`	Extra Bold / Ultra Bold.	font-weight: 800
`900`	Black / Heavy: schwerstes Gewicht.	font-weight: 900
`<number> (1-1000)`	Beliebiger Wert bei Variable Fonts.	font-weight: 450

Beispiele

4 Beispiele

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

Gewichtsskala 100 bis 900

.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>

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

Schlüsselwörter und ihre numerischen Entsprechungen

/* 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 springen zur nächsten verfügbaren Stufe laut Spezifikation. Sie rechnen nicht einfach -100 oder +100.

Relative Gewichte: lighter und bolder

.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>

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.

Echtes Bold vs. Faux Bold

/* 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

5 Fehler

01 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.

02 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.

03 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.

04 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.

05 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

4 von 5

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

Apple Mail

Komplett
Gmail

Komplett

normal und bold zuverlässig. Numerische Werte funktionieren ebenfalls
Outlook

Teilweise

normal und bold funktionieren. Feine Abstufungen (300, 500, 600) werden oft ignoriert
Thunderbird

Komplett
Yahoo Mail

Komplett

normal und bold zuverlässig

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da