Sie sind hier: Startseite -> CSS-Grundlagen -> Fettschrift (font-weight)

Fettschrift mit CSS und font-weight einstellen

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 einstellen

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;

Wann kann man font-weight einsetzen?

Die Fettschrift ist eine beliebte und bekannte Form der Texthervorhebung. Aber es hängt von der verwendeten Schriftart und von der Schriftgröße ab, welcher Grad von Fettschrift wie wirkt. Was man auf keinen Fall tun sollte ist die Verwendung unterschiedlichster Grade im gleichen Text. Man sollte sich überlegen, was gut aussieht und gut lesbar ist und diese Einstellung dann auch einsetzen.

Aufpassen muss man überhaupt beim Thema Fettschrift, denn wenn der halbe Text fett geschrieben ist, weiß man als Leser nicht mehr, was wichtig sein soll und was nicht. Weniger ist gerade in diesem Punkt immer mehr.

Buchtipp: Einstieg in HTML und CSS (Thalia)*
* = Affiliate-Link; bei Kauf unterstützen Sie diese Plattform

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.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

Fettschrift mit font-weightArtikel-Thema: Fettschrift mit CSS und font-weight einstellen
Beschreibung: Mit dem CSS-Befehl 👍 font-weight kann man präzise einstellen, wie ✅ fett die Fettschrift wirklich sein kann und hat weit mehr Möglichkeiten als in HTML.

Kategorien

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

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