Schriftstärken in CSS

3.5.2020

Definition von font-weight

In CSS kann die Schriftstärke mit der Eigenschaft font-weight angegeben werden. So kann mit folgender Auszeichnung bestimmt werden, dass alle Überschriften der ersten Ebene fett dargestellt werden

h1 {
  font-weight: bold;
}

Benannte Werte

Wie im Beispiel oben können folgende Werte vergeben werden:

• normal
• bold

Numerische Werte

Um mehr Vielfalt in die Texte zu bringen, können jedoch weitere Schriftstärken als Zahlenwerte definiert werden. Dabei dürfen Zahlen von 100 - 900 in 100er Schritten verwendet werden (100, 200, 300, … 900).

Dabei entspricht der numerische Wert 400 dem benanntem Wert normal und 700 entspricht bold.

Stufenwerte

Neben den festen Werten kann auch eine Abstufung zur dünneren Schriftstärke - lighter oder zur dickeren - bolder vorgenommen werden.

Dabei wird die nächste unterstützte Stärke und nicht der Numerische Wert verwendet.

Beispiel

Eine Schriftart hat die Stärken 200, 400 und 600 definiert.

h1 {
  font-weight: 400;
}

h1 small {
  font-size: 80%;
  font-weight: bolder;
}

In diesem Fall wird für h1 small die Schriftstärke 600 und nicht 500 verwendet, da 500 bei dieser Schriftart nicht definiert ist.

Nicht unterstützte Werte

Ist die gewünschte Schriftstärke nicht vorhanden, so wird bis zur Schriftstärke 500 die nächst dünnere Schriftstärke verwendet. Ab 600 wird dem entgegengesetzt die nächst dickere Schriftstärke angewandt.

Übersetzung

Da lediglich zwei benannte Werte von CSS unterstützt werden, kann es bei der Verwendung von manchen Schriften zu Verwirrung kommen. Im Folgenden liste ich die gängigen Zugehörigkeiten auf:

Tags

• css
• typografie