CSS font-weight für die Fettschrift

Schriftgewicht und Einstellung bei Fettschrift

Eine beliebte Form der Hervorhebung bei Textinformationen ist die Fettschrift. In HTML kann man diese mit dem Strong-Tag bewerkstelligen, man kann per CSS aber auch die Fettschrift ohne den Tag veranlassen, wobei es weit mehr Möglichkeiten gibt, als unter HTML.

Eigentlich hatte die Geschichte mit dem Bold-Befehl in HTML begonnen. Es wurde dann ein wenig Bold und wenig Strong verwendet und man hat dies vereinheitlicht und so wird Strong für die Fettschrift genutzt. Es sei denn, man nutzt CSS und den Befehl font-weight, weil da gibt es viel mehr Optionen.

Fettschrift mit CSS und font-weight

Der Strong-Tag macht die Schrift fett. In CSS kann man über den Befehl font-weight präzisere Einstellungen vornehmen, wobei diese nicht so häufig zur Anwendung kommen, obwohl sich schöne Effekte erzielen lassen. Der Befehl wird so eingesetzt:

font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: 800;

Normal entspricht einem Wert von 400 Fettgehalt. Bold, das als Einstellung besonders häufig verwendet wird, entspricht dem Fettgehalt von 700. Lighter reduziert den Fettgehalt um eine Stufe, wobei sich CSS hier auf die bisherige Einstellung bezieht. Die letzte Option ist eine numerische Eingabe, die von 100 bis 900 reichen kann.

Bei 100 erkennt man kaum die fetter geschriebene Schrift, bei 900 ist das Maximum an fetter Darstellung gegeben.

ergibt:

font-weight:normal;

font-weight:bold;

font-weight:900;

font-weight:200;

font-weight:normal;

Lesen Sie auch

Die Textformatierung ist bei CSS neben der Positionierung eine Hauptaufgabe, weil gefälliger Text einfach eher angenommen wird und einen Mehrwert darstellt. Man darf es nicht übertreiben, aber man kann sich damit sich auch einmal spielen und ein wenig die Reaktionen überprüfen. Wichtig ist einmal die grundsätzliche Einstellung der Schriftart und Schriftgröße.

Dann kommen Befehle, die sehr häufig benötigt werden. Dazu gehört font-weight für die Fettschrift, alternativ und nicht so häufig wird man font-style für kursiv nutzen. Sehr oft braucht man color für die Textfarbe und text-decoration speziell bei der Gestaltung und Auszeichnung der Links.

Und dann gibt es noch weitere Einstellungen wie den Abstand von Buchstaben und Wörter, den Schatten oder auch die Textumwandlung und die Schriftvariante.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel