Ausführbare CSS-Docs: CSS fett

Q: Wie mache ich Text in CSS fett?

Nimm font-weight: bold; oder die gleichwertige Zahl font-weight: 700; am Element. Um einer Überschrift oder einem das Fett zu nehmen, setz font-weight: normal; (400).

Q: Ist font-weight bold dasselbe wie 700?

Ja. bold wird zu 700 berechnet und normal zu 400, also werden beide Schreibweisen identisch dargestellt.

Q: Soll ich CSS font-weight oder den Tag verwenden?

Nimm , wenn die Wörter wichtig sind, für Text, der nur anders gestaltet ist, und font-weight für visuelles Design wie Buttons, Labels und Überschriften. Die Tags tragen Bedeutung; die Eigenschaft ist reines Aussehen.

So machst du Text in CSS fett

font-weight legt fest, wie dick die Buchstaben sind. bold (dasselbe wie 700) macht Text fett, und normal (dasselbe wie 400) ist normaler Text.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font weight</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 6px 0; }
    .normal { font-weight: normal; }
    .bold { font-weight: bold; }
    .heavy { font-weight: 900; }
    h2.plain { font-weight: normal; }
  </style>
</head>
<body>
  <p class="normal">font-weight: normal (400)</p>
  <p class="bold">font-weight: bold (700)</p>
  <p class="heavy">font-weight: 900</p>
  <h2 class="plain">A heading with font-weight: normal</h2>
</body>
</html>

Überschriften, <th>,  und  sind durch das Stylesheet des Browsers standardmäßig fett, also nimmst du ihnen das Fett mit font-weight: normal. Wann du im HTML selbst  oder  verwendest, steht unter HTML fett.

Die Zahlenskala: 100 bis 900

Die Zahlen haben Standardnamen, an die sich Schriftfamilien halten:

Wert	Üblicher Name
`100`	Thin
`200`	Extra Light
`300`	Light
`400`	Normal (Regular)
`500`	Medium
`600`	Semi Bold
`700`	Bold
`800`	Extra Bold
`900`	Black (Heavy)

Jede Zahl von 1 bis 1000 ist gültig, also sind auch 450 und 650 erlaubt. Ob du einen Unterschied siehst, hängt von der Schrift ab: Der Browser kann nur Stärken zeichnen, die die Schrift tatsächlich hat.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Weight scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-weight: 100;">100 Thin</p>
  <p style="font-weight: 200;">200 Extra Light</p>
  <p style="font-weight: 300;">300 Light</p>
  <p style="font-weight: 400;">400 Normal</p>
  <p style="font-weight: 500;">500 Medium</p>
  <p style="font-weight: 600;">600 Semi Bold</p>
  <p style="font-weight: 700;">700 Bold</p>
  <p style="font-weight: 800;">800 Extra Bold</p>
  <p style="font-weight: 900;">900 Black</p>
</body>
</html>

system-ui ist die Oberflächenschrift des Betriebssystems, die meist viele Stärken mitbringt. Sieht jede Zeile oben wie eine von zwei Stärken aus, hat deine Systemschrift nur Regular und Bold.

Warum eine Schriftstärke keinen Unterschied zeigt

Eine Schrift ist eine Sammlung von Dateien, oft eine pro Stärke. Fehlt die genaue Stärke, nimmt der Browser die nächstgelegene, die er hat:

Bei 500 probiert er 500, dann leichtere Stärken, dann schwerere.
Bei 600 und höher probiert er zuerst schwerere Stärken, dann leichtere.
Gibt es gar keine Datei für Fett, täuschen die meisten Browser eine vor, indem sie die normalen Buchstaben verdicken (synthetisches Fett).

Vergleich eine Schrift mit vielen Stärken mit serif, das auf den meisten Systemen nur Regular und Bold hat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Missing weights</title>
  <style>
    body { font-size: 22px; color: #111827; }
    .col { display: inline-block; vertical-align: top; margin-inline-end: 32px; }
    .sans { font-family: system-ui, sans-serif; }
    .serif { font-family: Georgia, serif; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <div class="col sans">
    <p style="font-weight: 300;">300 sans</p>
    <p style="font-weight: 500;">500 sans</p>
    <p style="font-weight: 600;">600 sans</p>
  </div>
  <div class="col serif">
    <p style="font-weight: 300;">300 serif</p>
    <p style="font-weight: 500;">500 serif</p>
    <p style="font-weight: 600;">600 serif</p>
  </div>
</body>
</html>

In der serif-Spalte fallen 300 und 500 meist auf den normalen Schnitt zurück und 600 auf den fetten. Das ist die Antwort auf die meisten Fragen vom Typ „font-weight funktioniert nicht“: Das CSS stimmt, der Schrift fehlt die Stärke. Ein variabler Font (eine Datei mit einer Achse für die Stärke) zeichnet jeden Wert innerhalb seines Bereichs stufenlos.

bolder und lighter

bolder und lighter beziehen sich auf die Stärke, die das Element erbt. Sie springen zur nächsten Stärkengruppe, statt einen festen Betrag zu addieren:

Stärke des Elternelements	`bolder` ergibt	`lighter` ergibt
100 bis 349	400	100
350 bis 549	700	100
550 bis 749	900	400
750 bis 900	900	700

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bolder and lighter</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    .bolder { font-weight: bolder; }
    .lighter { font-weight: lighter; }
  </style>
</head>
<body>
  <p style="font-weight: 400;">400 with <span class="bolder" id="a">bolder</span> and <span class="lighter" id="b">lighter</span></p>
  <p style="font-weight: 700;">700 with <span class="bolder" id="c">bolder</span> and <span class="lighter" id="d">lighter</span></p>
  <p id="out"></p>
  <script>
    const w = (id) => getComputedStyle(document.getElementById(id)).fontWeight;
    document.getElementById('out').textContent =
      'computed: ' + w('a') + ', ' + w('b') + ', ' + w('c') + ', ' + w('d');
  </script>
</body>
</html>

Muster aus der Praxis: eine Stärkenskala in Variablen

Wähl drei oder vier Stärken für die ganze Website und gib ihnen Namen, statt Zahlen zu verstreuen:

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}
body   { font-weight: var(--weight-regular); }
button { font-weight: var(--weight-medium); }
h1, h2 { font-weight: var(--weight-bold); }

Häufige Fehler

Erwarten, dass jede Zahl anders aussieht. Nur Stärken, die die Schrift enthält, werden unterschiedlich dargestellt.
 für eine Button-Beschriftung verwenden. Style den Button mit font-weight;  und  sind für Text da.
Die Zahl in Anführungszeichen setzen. font-weight: "700" ist ungültig und wird ignoriert. Schreib font-weight: 700.
Überall Fett zur Betonung. Wenn alles fett ist, sticht nichts hervor. Lass Fließtext bei 400.
Dünne Stärken für kleinen Text. 100 bis 300 in kleinen Größen sind schwer zu lesen, besonders auf Hintergründen mit wenig Kontrast.

Häufig gestellte Fragen

Wie mache ich Text in CSS fett?

Nimm font-weight: bold; oder die gleichwertige Zahl font-weight: 700; am Element. Um einer Überschrift oder einem  das Fett zu nehmen, setz font-weight: normal; (400).

Welche Werte hat font-weight?

Zahlen von 1 bis 1000, meist in Hunderterschritten: 100 Thin, 200 Extra Light, 300 Light, 400 Normal, 500 Medium, 600 Semi Bold, 700 Bold, 800 Extra Bold, 900 Black. Die Schlüsselwörter normal und bold sind 400 und 700, und bolder und lighter beziehen sich auf das Elternelement.

Ist font-weight bold dasselbe wie 700?

Ja. bold wird zu 700 berechnet und normal zu 400, also werden beide Schreibweisen identisch dargestellt.

Warum sieht font-weight 500 oder 600 genauso aus wie normal oder bold?

Die Schrift hat diese Stärke nicht. Liefert eine Schrift nur 400 und 700, nimmt der Browser die nächstgelegene vorhandene Datei, also wird 500 wie 400 und 600 wie 700 dargestellt. Lade eine Schrift mit mehr Stärken oder einen variablen Font.

Soll ich CSS font-weight oder den Tag verwenden?

Nimm , wenn die Wörter wichtig sind,  für Text, der nur anders gestaltet ist, und font-weight für visuelles Design wie Buttons, Labels und Überschriften. Die Tags tragen Bedeutung; die Eigenschaft ist reines Aussehen.

Verwandte Konzepte