WebWissen: Webfonts

In diesem Artikel möchten wir euch ein wenig die heutigen Möglichkeiten zur Gestaltung von Typografie im Web aufzeigen. Dabei zeigen wir euch, wie man Fonts einbindet, welche Tools es gibt und geben ein paar Tipps.

In den Anfängen des Internets

Früher wurde immer auf sogenannte Systemschriften zurückgegriffen. Das waren Schriften, die schon mit dem Betriebssystem automatisch auf dem Computer installiert waren. Bei Windows war dies bevorzugt Arial und bei Mac OS Helvetica. Im CSS sieht eine Schriftangabe zum Beispiel folgender Maßen aus:

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

Hier wird zu erst versucht die Helvetica zu laden, falls diese nicht vorhanden ist, soll die Arial geladen werden. Falls alle Stricke reißen und keine der beiden Schriften vorhanden ist, wähle die im Browser eingestellte serifenlose Schrift aus.

Spezielle Schriftarten

Wenn man nun aber bestimmte Schriften, die man sich im Design mühevoll herausgesucht hat, auf der Website dargestellt haben möchte, konnte man diese zwar angeben, musste aber auf gut Glück hoffen, dass der Besucher diese Schrift auf seinem System installiert hat. Insbesondere bei gekauften Schriften war das natürlich nur in den seltensten Fällen der Fall. Somit war eventuell das komplette Erscheinungsbild ruiniert, da nicht die vom Designer gewählte Schrift angezeigt wird. Die Wirkung der Typografie kommt nicht oder falsch zur Geltung und kann das komplette Erscheinungsbild der Marke ruinieren.

Schriftarten einbetten

Seit CSS2 gibt es die Möglichkeit Schriftarten einzubetten. Dazu muss man die Schriften auf einem Server ablegen und diese dann einbinden. Das sieht wie folgt aus:

@font-face {
  font-family: 'FontName'; /* Name der Schrift */
  src: local('FontName'); /* Prüfung, ob die Schrift schon vorhanden ist */
     url('fontname.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
     url('fontname.woff2') format('woff2'), /* moderne Browswer */
     url('fontname.woff') format('woff'), /* moderne Browser */
     url('fontname.ttf') format('truetype'), /* Safari, Android, iOS */
     url('fontname.svg#svgFontName') format('svg'); /* ältere iOS Versionen */
  font-weight: normal;
}

h1 {
  font-family: 'FontName'; /* Festlegung der Schrift */
}

Hier eine Übersicht der verschiedenen Dateiformate:

String Schriftformat Dateiendungen
„woff“ WOFF (Web Open Font Format) .woff
„truetype“ TrueType .ttf
„opentype“ OpenType .ttf, .otf
„embedded-opentype“ Embedded OpenType .eot
„svg“ SVG Font .svg, .svgz

Quelle: http://www.w3.org/TR/css3-fonts/#fontformats

Die verschiedenen Dateiformate sind jeweils für ältere Systeme. Das neuste Dateiformat ist woff2, jedoch ist die Browserunterstützung sehr begrenzt.

Aktueller Standard ist das woff-Format. Das Web Open Font Format ist ein Containerformat für Webfonts, in dem die Schriftart und Metadaten gespeichert sind. Es ist speziell für den Einsatz im Web entwickelt worden und komprimiert die Daten, um die Ladezeiten zu verkürzen. Es soll unabhängig vom Betriebssystem des Besuchers eingesetzt werden können, um eine unterschiedliche Darstellung vorzubeugen. Dafür könnt ihr eure TrueType/OpenType Schriften mit Hilfe eines Webfontgenerators in das woff-Format konvertieren lassen. Aber Achtung: Lizenzen beachten!

Denn ein weiterer Zweck ist es, die Schrift nicht komplett offen als TrueType oder OpenType auf dem Server vorliegen zu haben und man sie sich so ganz einfach herunterladen und installieren kann. Viele Schriftenanbieter unterscheiden auch zwischen Desktop- und Weblizenzen. Je nachdem wo die Schrift eingesetzt wird, muss die entsprechende Lizenz gekauft werden.

Als Alternative dazu gibt es natürlich auch kostenfreie Webfonts. Der berühmteste Anbieter im kostenfreien Bereich ist Google Fonts. Ein weiterer Anbieter ist zum Beispiel Font Squirrel.

Die Einbindung kann auch zum Beispiel direkt über den Server von Google erfolgen:

<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

Hierbei empfehle ich das Protokoll http: wegzulassen, damit sich der Server das Protokoll selbst heraussucht, auf welchem die Font eingebunden wird. Falls nämlich ein Sicherheitszertifikat (SSL) vorhanden ist, müsste das Protokoll https: sein, jedoch kann die Font dann nicht geladen werden aufgrund des fehlenden Sicherheitszertifikats.

Dennoch gilt: nicht mehr als drei Schriftarten!

Auch im Web gelten ähnliche Regeln wie im Printbereich. Nur weil man jetzt so gut wie jede Schrift einbinden kann, heißt das nicht, dass man das auch tun sollte. Beschränkt euch auf maximal drei Schriftarten, denn wie ihr wisst verderben zu viele Köche den Brei. Legt mehr Wert auf die Gestaltung eurer Typografie: achtet darauf die Überschriften von h1-h6 unterschiedlich zu gestalten, wählt für den Fließtext eine gut lesbare Schrift und setzt gut lesbare Schriftgrößen und Zeilenhöhen ein und gebt der Schrift Platz! Meist kann nur so der eigentliche Charakter der Font zur Geltung kommen.

Fazit

Durch diese Möglichkeiten sind im Webdesign der Typografie fast keine Grenzen mehr gesetzt und es können komplexe Layouts wie im Printdesign realisiert werden. Ich hoffe, dass ich euch das Thema Webfonts ein wenig näher gebracht habe und wünsche viel Spaß beim selber probieren!

Falls Inspirationen zur Typografie im Webdesign gesucht werden, kann man diese zum Beispiel hier finden.

Alle Beiträge von Timo

Unsere meistgelesenen Beiträge

Zwei Jahre Chromebook: Ein Erfahrungsbericht

Google Chromebook
|
Gute 25 Jahre PC-Nutzung - von Anfang an mit Windows. Dann raucht im wahrsten Sinne des Wortes mein teures und gar nicht so altes Lenovo-Notebook ab. Und ich bestelle mir einfach ein Chromebook und bin schneller weg aus der Windows-Welt, als ich es für möglich gehalten hätte. Zwei Jahre ist das nun her - und ich habe zwischendurch immer wieder über meine Erfahrungen mit dem Chromebook berichtet.