Die Wahl der richtigen Schriftart hat einen großen Einfluss darauf, wie die Leser eine Website erleben. Sie kann deiner Marke eine starke Identität verleihen und wertet den Text auf. Es ist wichtig, eine leicht lesbare Schrift in der richtigen Farbe und Textgröße zu wählen. Die richtige Schriftart für deine Webseite zu finden ist also ein sehr wichtiger Faktor beim Erstellen einer Webseite!
Generische Schriftfamilien
In CSS gibt es fünf generische Schriftfamilien:
- Serifenschriften haben an den Rändern jedes Buchstabens einen kleinen Strich. Sie schaffen ein Gefühl von Formalität und Eleganz.
- Sans-Serif-Schriften haben klare Linien (keine kleinen Striche angehängt). Sie schaffen einen modernen und minimalistischen Look.
- Monospace-Schriften - hier haben alle Buchstaben die gleiche feste Breite. Sie erzeugen einen mechanischen Look.
- Kursive Schriftarten imitieren die menschliche Handschrift.
- Fantasy-Schriften sind dekorative/verspielte Schriftarten.
Unterschied Serifenschriften und Sans-Serif-Schriften:
Hinweis: Auf Computerbildschirmen gelten serifenlose Schriftarten als leichter lesbar als Serifenschriften.
Mehr über Typografie: Serif und Sans-Serif lesen →
Beispiele Schriftarten:
Serifenschriften:
-
- Times New Roman
- Georgia
- Garamond
Sans-Serif-Schriften:
-
- Arial
- Verdana
- Helvetica
Monospace:
-
- Courier New
- Lucida Console
- Monaco
Kursiv:
-
- Brush Script MT
- Lucida Handwriting
Fantasy:
-
- Copperplate
- Papyrus
Die CSS „font-family“ Eigenschaft
In CSS verwenden wir die Eigenschaft font-family, um die Schriftart eines Textes anzugeben. Die Eigenschaft sollte mehrere Schriftartnamen als "Fallback"-System enthalten, um maximale Kompatibilität zwischen Browsern/Betriebssystemen zu gewährleisten. Beginne mit der gewünschten Schriftart und ende mit einer generischen Familie (damit der Browser eine ähnliche Schriftart in der generischen Familie auswählen kann, wenn keine anderen Schriftarten verfügbar sind). Die Schriftnamen sollten durch Kommas getrennt werden.
Hinweis: Wenn der Schriftname aus mehreren Wörtern besteht, muss er in Anführungszeichen stehen, wie zum Beispiel: "Times New Roman".
Beispiele:
.p1 {font-family: "Times New Roman", Times, serif;}
.p2 {font-family: Arial, Helvetica, sans-serif;}
.p3 {font-family: "Lucida Console", "Courier New", monospace;}
Haben Sie noch Fragen zu diesem Thema? Oder brauchen Sie Hilfe bei der Gestaltung Ihrer Webseite von einer professionellen Internetagentur aus München? Dann kontaktieren Sie uns gerne!