CSS font-weight – Dicke oder Stärke der Schrift

Schrift von sehr dünn bis extra fett

So bietet die CSS-Eigenschaft font-weight zwar eine Auswahl von dünn oder mager über normal bis fett und sehr fett, aber die gewählte Schrift muss über verschiedene Schnitte in den jeweiligen Abstufungen verfügen. Bei den mitgelieferten Schriften der Betriebssysteme wie Arial, Helvetica und Times ist das nicht unbedingt der Fall.

font-weight

font-weight ist das Maß für die Strichbreite einer Schrift. Mit der Strichbreite gewinnt der Text eine zusätzliche Bedeutung: Innerhalb eines Textes betont eine dickere Schrift einzelne Wörter, im Design der Seite spiegelt die Strichbreite der Schrift die Hierarchie durch fett gesetzte Überschriften.

Selbst wenn auf dem System des Besuchers mehr Schriftschnitte installiert sind, hätten die alten Browser diese Schnitte nicht erkannt: Sicher erkannten sie nur normal und bold als Schriftgewicht.

Hier liegen also keine unterschiedlichen Fettschnitte vor (falls die Schriften beim Besucher installiert sind), sondern echt fette Schriften:

<p style="font-family:'Arial'; font-weight: bold;">Fette Schrift kann … </p>
<p style="font-family:'Arial Black';">Fette Schrift kann … </p>
<p style="font-family:'Arial Narrow Black';">Fette Schrift kann … </p>

font weight mit ladbaren Schriften

Mit der @font-face-Regel und ladbaren Schriften sind heute Abstufungen möglich, die schon in CSS1 verankert waren, aber nie eingesetzt werden konnten. Vorraussetzung ist aber immer noch, dass die entsprechenden Schnitte für die Schrift vorhanden bzw. geladen sind.

Roboto von Christian Robertson bringt ein breites Repertoire von Schriftschnitten mit:

@font-face {
  font-family: 'Roboto'; 
  font-style: normal; font-weight: 100;
  font-display: swap;
  src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/roboto-v18-latin-100.woff2') format('woff2')
}

@font-face {
  font-family: 'Roboto'; 
  font-style: normal; font-weight: 500;
  font-display: swap;
  src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/roboto-v18-latin-500.woff2') format('woff2')
}

@font-face { 
  font-family: 'Roboto'; 
  font-style: normal; font-weight: 700;
  font-display: swap;
  src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/roboto-v18-latin-700.woff2') format('woff2')
}

Man sieht schnell, dass fette Schrift erst für sehr große Schriftgrößen Sinn macht: font-weight: 700 und font-weight: 900 sind erst ab font-size: 2em und mehr gut lesbar.

Moderat große Überschriften mit HTML h1, h2 oder h3 sind mit font-weight 400 (normal) fast immer besser lesbar.

font-weight:bold per Farbe

Früher bliebt dem Webdesigner nur der Trick, auf Helligkeiten zur unterschiedlichen Betonung von fetten Hervorhebungen zurückzugreifen.

Mit einem Grauton anstelle von Schwarz wirken Überschriften zurückhaltender.

CSS font-weight Skala 100 bis 900

font-weight

stellt die Schrift fett oder in verschiedenen Abstufungen von fett dar.

Werte

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

normal

ist die Voreinstellung. Auf der numerischen Skala von 100 bis 900 wird normal üblicherweise bei 400 angesiedelt. Die Angabe normal stellt sicher, dass keine vorangegangene Deklaration die Darstellung des Textes beeinflusst.

bold

entspricht der Darstellung im <b>-Tag von HTML. Auf der numerischen Skala von 100 bis 900 ist bold üblicherweise bei 700 angesiedelt.

bolder

stellt die Buchstaben um eine Stufe fetter dar. Die Stärke der Stufen wird durch die Kombination aus Rechnerplattform und Browser bestimmt.

lighter

stellt die Buchstaben um eine Stufe feiner dar. Die Stärke der Stufe wird durch die Kombination aus Rechnerplattform/Browser bestimmt.

100 ... 900

stellt die Buchstaben in Strichbreiten von 9 Stufen dar. Je größer der Wert ist, umso fetter wird der Text dargestellt. Auf der numerischen Skala von 100 bis 900 entspricht 400 normal und 700 bold. Die Stärke der Stufen wird durch die Kombination aus Rechnerplattform und Browser bestimmt.

normal, bold, bolder und lighter

p { font-weight: normal; }
p { font-weight: bold; }
p { font-weight: bolder; }
oder
<span style="font-weight: lighter">lighter</span>
<span style="font-weight: bolder;">bolder</span>
<span style="font-weight: 100;">100 </span>

Die feinen Schritte zwischen verschiedenen Fettschnitten sind erst durch Webfonts möglich. Schriften, die eine so große Zahl von Schnitten bieten, sind selten. Hier steckt also Roboto aus den Google Webfonts hinter den Stufen.