Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

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

FormatIE8IE9IE10IE11ChromeFirefoxSafariSafari (iOS)OperaAndroid
WOFF2JaJa
WOFFJaJaJaJaJaJaJaJaJa
TTF/OTFJaJaJaJaJaJaJaJaJa
EOTJaJaJaJa

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.

Geschrieben von kulturbanause Team

thumb

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um Web Designern bei ihren alltäglichen Problemen zu helfen. Neben diesem Blog bieten wir noch weitere Trainings-Möglichkeiten wie Schulungen, Bücher oder Video-Trainings an. Detaillierte Informationen findet ihr hier.

Feedback & Ergänzungen – 3 Kommentare

  1. Curd
    schrieb am 05.04.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.

    Antworten
    • Jonas Hellwig
      schrieb am 06.04.2017 um 10:59 Uhr:

      Du kannst auf caniuse.com alles im Detail in Erfahrung bringen.

      Antworten
  2. Matze
    schrieb am 01.02.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!

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: