CSS font-weight – Schriftstärken von normal bis bold richtig anwenden
Lesezeit: ca. 2 Minuten
Die CSS-Eigenschaft font-weight ermöglicht es, die Schriftstärke von Texten zu steuern und somit das Erscheinungsbild einer Website gezielt zu beeinflussen. In diesem Beitrag erfährst du, welche Werte für font-weight zur Verfügung stehen und wie du sie effektiv einsetzt.
Verfügbare Werte für CSS font-weight – Schriftstärken
Die font-weight-Eigenschaft kann sowohl Schlüsselwörter als auch numerische Werte annehmen:
| Bezeichnung / Schlüsselwort | Numerischer Wert | Beschreibung |
|---|---|---|
| Extra Bold / Ultra Bold | 800 | Sehr dicke Schrift |
| Bold | 700 | Fett |
| Semi Bold / Demi Bold | 600 | Etwas fetter als normal |
| Medium | 500 | Zwischen normal und fett |
| Normal / Regular | 400 | Standard-Schriftstärke |
| Light | 300 | Dünnere Schrift |
| Extra Light / Ultra Light | 200 | Sehr dünne Schrift |
| Thin | 100 | Extrem dünne Schrift |
Das Ergebnis könnte wie folgt aussehen:
extra bold
Bold
Semi Bold
Medium
Normal
Light
Extra Light
Thin
Diese Zuordnungen können je nach Schriftart variieren. Nicht alle Schriftarten unterstützen alle Gewichtungen.
Anwendung von font-weight in CSS
Um die Schriftstärke eines Textes festzulegen, kannst du die font-weight-Eigenschaft in deinem Stylesheet wie folgt verwenden:
p {
font-weight: 700; /* Setzt die Schriftstärke auf fett */
}
Alternativ kannst du Schlüsselwörter verwenden:
p {
font-weight: bold; /* Entspricht 700 */
}
Die Wahl zwischen numerischen Werten und Schlüsselwörtern bietet Flexibilität bei der Gestaltung. Beachte jedoch, dass die tatsächliche Darstellung von der verwendeten Schriftart abhängt. Einige Schriftarten unterstützen möglicherweise nicht alle Gewichtungen, was dazu führen kann, dass der Browser die nächstliegende verfügbare Schriftstärke verwendet.
Relative Schriftstärken mit bolder und lighter
Die Werte bolder und lighter ändern die Schriftstärke relativ zur des übergeordneten Elements:
div {
font-weight: 400; /* Normal */
}
p {
font-weight: bolder; /* Eine Stufe fetter als das übergeordnete div */
}
In diesem Beispiel wird der Text im <p>-Element fetter dargestellt als der im <div>, basierend auf der Hierarchie der Schriftstärken.
Fazit
Die korrekte Anwendung der CSS-Eigenschaft font-weight ermöglicht es, die Lesbarkeit und das Design deiner Website zu verbessern. Durch die Kombination von numerischen Werten und Schlüsselwörtern kannst du präzise steuern, wie fett oder dünn dein Text erscheint. Denke daran, die Unterstützung der gewünschten Schriftstärken in der verwendeten Schriftart zu überprüfen, um konsistente Ergebnisse zu gewährleisten.