Schriftart mit CSS und font-family festlegen

Welche Schriftart ist gefragt?

Die erste Einstellung, die per CSS vorgenommen werden sollte, wenn man den Text gestaltet, ist die Auswahl der Schriftfamilie. Dabei gilt es zu berücksichtigen, dass man a) verschiedene Nutzer mit verschiedenen Betriebssystemen auf seiner Seite begrüßt und b) dass man sich im Internet aufhält.

Auswahl der Schriftart mit CSS und font-familiy

Ersteres hat zur Konsequenz, dass nicht jedes Betriebssystem jede Schriftart besitzt, zweiteres bedeutet, dass man nicht eine von den 300 Schriftarten, die man auf einer CD mit gesammelten Schriftarten verwenden kann, weil die meisten diese zum Teil exotischen Schriftarten gar nicht besitzen. Das bedeutet: man wünscht sich diese coole Schriftart als Darstellungsmittel und stattdessen wird die 08/15-Schriftart Times als Notlösung dargestellt, weil die genannte Schriftart gar nicht existiert.

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

Allerdings muss das nicht sein, denn man hat die Möglichkeit, für alle Besucherinnen und Besucher eine Schriftart am eigenen Server mit den einschlägigen Dateien aufzubereiten und mit CSS einzubinden. Das ist eine gängige Technik, weil sonst alle Webseiten gleich aussehen würden. Aber auch dann ist einzustellen, welche Schriftart es denn sein soll.

Die Einstellung der Schriftfamilie verhindert auch einen beliebten Fehler, der unter HTML immer wieder passiert. Wenn man sich manche Webseiten anschaut, die vor allem auf privater Ebene erstellt wurden, so sieht man oft einen unguten Wechsel der Schriftarten. Mal ist die Schriftart Verdana, dann wieder Arial, dann wieder Verdana.

Stellt man die Schriftart aber zentral ein, dann kann das nicht passieren, weil alle Textstellen sich an diese Einstellung halten - es sei denn, man hat für jede Ebene eigene Einstellungen vorgesehen.

Wie wird die Schriftart festgelegt?

In CSS erfolgt die Vorgabe der Schriftfamilie folgendermaßen:

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

font-family: Verdana, Arial, Helvetica, sans-serif;

Das bedeutet übersetzt: stelle die Verdana dar, wenn du sie nicht findest, dann die Arial, gibt es die auch nicht, dann die Helvetica (oftmals für Mac-User) und als letztes eine Schriftart ohne Serifen. Serifen sind Schriftarten, die an den Buchstabenenden oft zusätzliche grafische Details wie verlängerte Striche aufweisen. Die Garamond ist ein solches Beispiel.

Will man nun die Schrift für eine gesamte Webseite vorgeben, dann würde man in der CSS-Datei so arbeiten:

body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
}

Body ist der Bereich der Webseite, der für die Darstellung des eigentlichen Inhaltes verantwortlich ist. Ist auf nachfolgenden Ebenen oder Absatzdefinitionen nichts anderes angegeben, dann gilt für die gesamte Seite die angeführte Schriftart mit der Größe 12 Pixel.

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

Startseite CSS-Grundlagen

Schriftart mit CSS und font-family festlegen

Welche Schriftart ist gefragt?

Auswahl der Schriftart mit CSS und font-familiy

Wie wird die Schriftart festgelegt?

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich