kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Webfonts – eine Einführung in moderne Web Typografie

Wem Webdesign im Sinne von guter Gestaltung am Herzen liegt, der verzweifelte lange Zeit am eingeschränkten Schriftangebot. Eine ausgefallene Schriftart musste bisher meist in eine Grafik eingebettet werden. Das hat den Nachteil, dass Suchmaschinen den Text nicht lesen können. Mit der Entwicklung von Webfonts besteht die Möglichkeit, Schriften mittels CSS einzubinden, die nicht auf dem Computer des Anwenders installiert sein müssen. Die Auswahl an Schriften in der Webtypografie ist dadurch ähnlich umfangreich wie im Printdesign.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Schriften per CSS-Code zuweisen

Wenn auf einer Website eine bestimmte Schrift verwendet werden soll, werden mit Hilfe der CSS-Eigenschaft font-family mehrere Schriftarten und die Schriftfamilie nacheinander aufgelistet. Der Browser geht diese Liste durch und wählt die erste Schrift aus, die auf dem Betriebssystem des Anwenders installiert ist.

So eine Auflistung – der sog. Font Stack – sieht im CSS-Stylesheet beispielsweise so aus:

p  {
  font-family: Georgia, "Times New Roman", serif;
}

Die Angabe der Schriftfamilie (z. B. serif) wird als letztes geschrieben und gibt dem Browser die Möglichkeit, einen ähnlichen Schrifttyp zu finden, sofern keine der zuvor notierten Fonts gefunden wurde.

Websichere Schriften – immer nur Arial und Verdana?

Lange Zeit blieb die Schriftauswahl bei der Gestaltung von Websites auf die Systemschriften beschränkt. Da jedoch nicht alle Systemschriften bei Windows und Mac absolut identisch sind, wurde auf eine noch kleinere Schnittmenge zurückgegriffen. Hierbei handelt es sich um die sog. websicherer Schriften, also Schriften die auf allen gängigen Betriebssystemen vorinstalliert sind. Zu diesen websicheren Schriften zählen Arial, Georgia, Times New Roman, Courier New, Lucida Sans und Verdana.

Die Folge der geringen Auswahl an Schriften ist eine gewisse Vorhersehbarkeit und Eintönigkeit des Schriftbildes am Bildschirm. Aber Dank der Webfonts gibt es einen Lichtblick im Bereich Webtypografie.

Websichere Schriften auf Windows und Mac
Websichere Schriften, die bei Windows und Mac auf dem System vorinstalliert sind

Webfonts verändern das Webdesign

Die Entwicklung von Webfonts macht es möglich, Schriften unabhängig vom verwendeten Betriebssystem auf einer Webseite einzusetzen. Wird eine Website aufgerufen, greift der Browser nicht mehr nur auf die lokal installierte Schriftensammlung zurück, sondern er lädt die Schriftdateien von einem Webserver. Voraussetzung hierfür ist die Einbettung des Webfonts mithilfe von der CSS-Regel @font-face, sowie die Angabe der Schriftart im Font Stack.

p  {
  font-family: "MEIN WEBFONT", Georgia, "Times New Roman", serif;
}

Seither ist eine individuelle Typografie im Web möglich, wie sie Jahre lang nur im Printdesign umgesetzt werden konnte.

Ursprünglich wurden für die noch gering auflösenden Bildschirme Bitmap-Schriften verwendet, die aus einzelnen Pixeln aufgebaut sind und schlecht skalierbar waren. Im Gegensatz dazu basieren Systemschriften, auch Outline-Schriften genannt, auf Vektoren (TrueType-Format), die ein verlustfreies Skalieren ermöglichen. Alle Webfonts sind Vektorschriften, die zusätzliche Hinweise (Hints) zur Art des Rasterns für die optimale Darstellung am Bildschirm mitliefern (Hinting). Das Ergebnis ist ein gestochen scharfes Schriftbild bei jeder Bildschirmauflösung sowie bei allen Betriebssystemen und Browsern.

Unterschied Bitmap- und Vektorschrift
Links die Darstellung eines Pixelfonts, rechts die vektorbasierte (Outline) Variante

EOT, TTF, WOFF und SVG

Für das Einbinden von Webfonts sind unterschiedliche Dateiformate für die verschiedenen Browser nötig. Diese müssen im CSS-Code mit @font-face angegeben werden. Das EOT-Format wurde bereits von Microsoft für den Internet Explorer 4 entwickelt und wird auch ausschließlich vom IE unterstützt. Schriften im TTF-Format (True Type Format) werden von Firefox, Safari, Chrome und Opera angezeigt. Das WOFF-Format (Web Open Font Format) ist 2012 vom W3C zum Standard erklärt worden und wird von modernen Browsern unterstützt. Es bietet mit seiner Containerstruktur den Vorteil, dass True Type Schriftarten verlustfrei komprimiert werden und zusätzliche Informationen zur Lizenz mitgeliefert werden können. Das SVG-Format (Scalable Vector Graphics) wird u.a. für die Darstellung auf dem iPhone und iPad benötigt.

Browsersupport für Webfont-Formate

Format IE8 IE9 IE10 IE11 Chrome Firefox Safari Safari (iOS) Opera Android
WOFF2 Ja Ja
WOFF Ja Ja Ja Ja Ja Ja Ja Ja Ja
TTF/OTF Ja Ja Ja Ja Ja Ja Ja Ja Ja
EOT Ja Ja Ja Ja

Internet Explorer war Vorreiter

Bereits in den neunziger Jahren war es mit dem Internet Explorer 4 möglich, extern gehostete Schriftdateien einzubinden. Aus Mangel an geeigneten Schriften im passenden Format konnte sich diese Technologie allerdings noch nicht durchsetzen.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

3 Kommentare

  1. Matze

    Verfasst am 1. Februar 2016 um 14:50 Uhr.

    Schöne Einführung fuer nicht so kundige Schriftuser. Ein Artikel über den sinnvollen Einsatz von Webfonts wäre schön. Ich lese hier sehr gerne, dickes Lob an dich Jonas für deinen unermütlichen Einsatz die Dinge so zu erklären das sie Verständich bleiben.

    Thx!

  2. Curd

    Verfasst am 5. April 2017 um 20:22 Uhr.

    Erstaunlich wie zurückgeblieben man bezüglich Webfonts sein kann, wenn man wie ich aus dem Druckdesignbereich stammt. Deshalb ist für mich der Artikel in Bezug auf die Auslieferungsvarianten, die derzeit üblich sind, sehr interessant gewesen.

    Als Zusatz zur Tabelle oben sollte auch die derzeitige Browser-Struktur bezüglich der Nutzerhäufigkeit angeführt werden, sodass man sich ein Bild davon machen kann, welche Variationen man beim Lizenzkauf berücksichtigen soll, weil beim Kauf schließlich oft Eigeninitiative bezogen darauf gefordert ist, was die Auswahl bei maschineller Erstellung anbelangt.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.