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

Schrift von sehr dünn bis extra fett

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.

h2 {
	font-weight: 300;
}

Variable Fonts

Während wir für jeden dieser Fettschnitte eine gesonderte Schriftdatei laden müssen (was bei drei, vier Schnitten mitsamt ein oder zwei Kursivschnitten schnell zu 1MB Schriftdateien führen kann), kombinieren variable Schriften Merkmale wie font-weight / font-stretch in einer Datei.

Statt in Stufen von 100 bis 900 lassen sich variable Fonts in feinsten Nuancen regeln – und das mit einer einzigen Schriftdatei anstelle von drei oder vier einzelnen Dateien, die sich schnell auf eine Gesamtlast von 1MB summieren.

@font-face {
	font-family: "OpenSans";
	src: url("…/OpenSans-VariableFont_wdth,wght.ttf") format("woff2-variations");
	font-weight: 125 950;
}

.variable {
	font-family: OpenSans;
	font-size: 2em;
}

Variable Fonts werden von allen Browsern unterstützt, nur IE11 war noch nicht dabei. Für die alten Browser setzt eine @supports-Abfrage Alternativen.

h1 {
	font-family: Traditionale;
}
	
@supports (font-variation-settings: 'wdth' 115) {
	h1 {
		font-family: OpenSans;
	}
}

CSS font-weight Skala 100 bis 900

font-weight bietet 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. Die meisten statischen Schriften unterstützen nur 400 (normal) und 700 (bold).

font-weight

stellt die Schrift von dünn über normal bis 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.

font-weight animieren

Da font-weight mit einem numerischen Wert notiert wird, läßt sich font-weight animieren.

Mit statischen Schriften sieht man deutlich die Sprünge. Erst variable Schriften bringen einen weichen Übergang zwischen den Werten.

Die modernen Browser unterstützen variable Fonts und Schriften wie Montserrat, Open Sans, Raleway, Noto Naskh Arabic bzw. Noto Sans Hebrew bieten variable Schriftgewichte. Teilweise gibt es neben font-weight auch font-stretch (Schrift verbreitern und stauchen) als Merkmal variabler Schriften.

Strichstärke unterschiedlicher Schriften

Hier liegen 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) oder 500 fast immer besser lesbar.

Das dicke Ende

Werfen wir einen Blick in Zeitschriften und Bücher aus dem Print: Fett gedruckte Begriffe und Passagen gibt es hier so gut wie gar nicht. Fette Überschriften ja, aber dann bitte in einer größeren Schrift.

Stell dir vor, alles was fett gesetzt ist, schreit dich an

Fette Schrift ist ein Relikt aus der Schreibmaschinenzeit, als es keine großen Schrifttypen gab und Passagen durch Zurücksetzen des Wagens überdruckt wurden. Fett gesetzte Passagen im Text sind so charmant wie der Aufruf der Hausverwaltung, das Treppenhaus sauber zu halten.