Das Schriftgewicht ändern mit font-weight

Problem

Bestimmte Textteile sollen mehr oder weniger fett dargestellt werden, ohne dass hierfür spezielle HTML-Tags verwendet werden müssen.

Lösung

Passen Sie das Schriftgewicht mithilfe der Eigenschaft font-weight an die eigenen Wünsche an, z.B.:

strong {
font-weight: bold;
}

Der dazugehörige HTML-Code könnte so aussehen:

<p>Hier ist ein Absatz mit belanglosem Text. <strong>Aber dieser Abschnitt ist wirklich wichtig.</strong> Diesen
Teil können Sie vergessen.</p>

Diskussion

Eines der größten Probleme früherer Versionen von HTML bestand in der Vermischung von Inhalt und Darstellung. Viele Tags existierten allein zu dem Zweck, bestimmte Elemente auf bestimmte Weise darzustellen. Über das allzu beliebte <font>-Tag breiten wir hier lieber das Mäntelchen des Schweigens. Seine Zeit ist hoffentlich endgültig vorbei!

Trotzdem haben auch in HTML5 einige reine Layout-Tags überlebt, namentlich <b> und <i>. Mit diesen beiden Tags können Sie den Browser anweisen, Text fett bzw. kursiv darzustellen (was sich natürlich mit CSS auch leicht wieder ändern lässt).

Da diese Methode jedoch nicht besonders flexibel ist und zudem die gewünschte Trennung unterwandert, ist es besser, den Text neutral zu markieren (wie hier mit einem span-Tag) und dann im Stylesheet festzulegen, wie er angezeigt werden soll.

Als Wert für die Eigenschaft font-weight können Sie entweder ein Schlüsselwort oder einen numerischen Wert angeben. Die Schlüsselwörter sind: normal, bold, bolder und lighter. (Wenn Sie wollen, dass font-weight seinen Wert erbt, verwenden Sie das Schlüsselwort inherit.) Die beiden ersten Werte legen fest, dass der Text mit normalem Schriftgewicht oder fett dargestellt werden soll. Die Schlüsselwörter bolder (fetter) und lighter (weniger fett) verändern das Schriftgewicht basierend auf dem aktuellen Wert.

Neben den Schlüsselwörtern kann das Schriftgewicht auch in Hunderterschritten auf einer Skala zwischen 100 (sehr leicht) und 900 (sehr fett) angegeben werden. Hierbei entspricht die Zahl 400 meistens dem Schriftgewicht normal, während der Wert 700 für bold steht. Die tatsächliche Zuordnung hängt allerdings auch von der verwendeten Schriftfamilie (font-family) ab. Daher ist es meistens einfacher, die Schlüsselwörter zu benutzen, wie in der Lösung gezeigt.