Gute Web-Typografie mit CSS
Schrift auf Websites sollte ansprechend und gut lesbar sein. Wir zeigen wichtige Stellschrauben, decken Mythen auf und geben rechtliche Tipps.
(Bild: Thorsten Hübner)
- Merlin Schumacher
- Joerg Heidrich
Gut lesbare Typografie macht es dem Leser möglichst leicht, Inhalte zu erfassen. Die Zeiten, in denen man bei der Gestaltung seiner Website auf eine Handvoll Fonts festgenagelt war, sind glücklicherweise seit knapp zehn Jahren vorbei. Dem "CSS Font Module 3" und dessen CSS-Regel @font-face sei Dank. Durch diese weist man Browser an, Schriften nachzuladen. Selbst Microsofts Internet Explorer kann damit halbwegs umgehen. Es besteht also kein Grund mehr, Menschen auf die biedere Times New Roman gucken zu lassen oder sich auf den mutlosen Helvetica-Klon Arial zu beschränken. Mehr noch: Inzwischen kann man zahlreiche Attribute einstellen, die eine Vielzahl von typografischen Variationen ermöglichen. Zwar ist das oft noch von dem entfernt, was mit moderner DTP-Software möglich ist, aber der Webentwickler kann großen Einfluss auf die Schriftgestaltung nehmen.
Die Integration von Schriften in die eigene Seite ist simpel. Erstellen Sie im CSS folgende Regel:
@font-face {
font-family: MeineSchrift;
src: url(meineschrift.otf);
}Damit haben Sie die Schrift "MeineSchrift" eingebunden. Das Attribut font-family legt die Bezeichnung der Schrift fest. Diese kommt dann später bei der Festlegung der CSS-Attribute für die DOM-Elemente mit font-family zum Einsatz. Mit src: url() legen Sie die Quelle der Datei fest. Deren Ort ist relativ zur URL der CSS-Datei. Sie können aber auch absolute URLs übergeben.
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Smart Generator von Ecoflow im Test
Copilot-Alternativen: Welche KI bei Office-Aufgaben besser helfen kann
Fremdsprachen lernen: Wie man ChatGPT zum Sprechtrainer aufrüstet
UpdateTesla Model 3 Highland im Test: Das bringt das Facelift
Drei KI-Sprechtrainer im Test: Fremdsprache mit KI lernen
Eigene Domain für zu Hause: Reverse-Proxy auf dem Raspberry Pi einrichten
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Smart Generator von Ecoflow im Test
Copilot-Alternativen: Welche KI bei Office-Aufgaben besser helfen kann
Fremdsprachen lernen: Wie man ChatGPT zum Sprechtrainer aufrüstet
UpdateTesla Model 3 Highland im Test: Das bringt das Facelift
Drei KI-Sprechtrainer im Test: Fremdsprache mit KI lernen