Schriften im Internet

24.10.2014 – Katja Karina Kapelle

Schriften haben ihren eigenen Charakter und lösen beim Leser bestimmte Assoziationen und Gefühle aus. Umso wichtiger ist die Auswahl der richtigen Schrift. Bei der Programmierung von Webseiten musste man in der Vergangenheit auf Standard-Fonts setzen, die auf den jeweiligen Betriebssystemen installiert waren.

Schriften im Internet (Foto Sergey Nivens, © iStock)

Die Schriften Arial und Helvetica gehörten z. b. zu den Standardschriften, die auf Windows- bzw. Apple-Rechnern vorhanden sind. Nun ist man bei der Verwendung von Standardschriften sehr eingeschränkt, was die gewünschte Wirkung einer Webseite betrifft. Lange Zeit mussten sich Designer und Programmierer damit aber zufrieden geben.

@font-face

Mit der Einführung des sogenannten @font-face-Attributs und der mittlerweile weit verbreiteten Implementierung durch die Browser, änderte sich die Situation grundlegend. Mit @font-face konnten nun per reinem CSS beliebige Schriftarten-Dateien in eine Webseite eingebettet werden. Diese Methode brachte aber auch Nachteile. Denn für die Schriftschnitte wie Fett, Kursiv, etc. sind eigene Dateien notwendig. Da jeder Schriftschnitt einzeln geladen werden muss, kann sich dabei ein nicht unerhebliches Datenvolumen ergeben, was die Ladezeit einer Webseite verlängern kann.

Das Einbinden von Schriften bot Microsoft im Übrigen bereits seit IE4 an. Das Embedded OpenType-Format wurde aber nur von IE unterstützt und hatte sich deshalb zum damaligen Zeitpunkt nicht durchsetzen können.

Google Web Fonts

Einen wichtigen Meilenstein für die weitverbreitete Einbettung von Schriften setzte Google mit seinen Google Web Fonts. Damit stellt Google eine umfangreiche Sammlung mit derzeit über 650 Schriftenfamilien zur Verfügung. Der Entwickler hat zahlreiche Filtermöglichkeiten, über einen Preview lassen sich Schriftänderungen live auszuprobieren. Google Web Fonts sind weboptimiert und kostenlos. Jeder kann sie nutzen: Sie sind systemunabhängig, funktionieren auf Mac- und Windows-Systemen. Die Integration funktioniert spielend leicht. Per Link lassen sich die Schriften in die Webseite einfügen, d.h. die Schrift wird direkt von den Google Servern in die eigene Webseite geladen. Im Quellcode wird nur ein Snippet eingefügt: <link href=’http://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>.

Mit Google Web Fonts ist man nicht nur auf Standardschriften beschränkt und auch auf Flash-Schriften kann nun verzichtet werden. Und, Google Web Fonts stehen außerdem auch kostenlos für Print zur Verfügung. Daumen hoch von unserer Seite!

Das Thema “Schriften” wird uns noch weiter beschäftigen. @font-face spielt dabei auch eine Rolle. Mehr dazu aber im nächsten Blogbeitrag.