Michael Wallner
Design-Stratege | netzstrategen
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.
Webfonts einbinden
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 */
}
Übersicht verschiedener Webfonts-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.
Eine Antwort