Schluss mit dem Schriften-Einheitsbrei – Google Fonts
Gelungene Beispiele
Man muss aber nicht unbedingt tief in die Tasche greifen um seine Website mit einer passenden Schrift aufzuwerten. Google bietet mit seiner Fonts-Library 638 Schriftfamilien (Stand Juli 2014) aller Couleur an. Wer sie verwenden möchte, muss nur noch einen Code kopieren, in den Header seiner Website einfügen und die Schrift via CSS einbinden.
Besonders schöne Schriften für Fließtexte und Überschriften auf Websites sind beispielsweise:
Open Sans, 10 Schnitte.
Lato, 10 Schnitte.
Droid Sans, 2 Schnitte.
PT Sans, 4 Schnitte.
Source Sans Pro, 12 Schnitte.
Was man im Allgemeinen beachten sollte…
Erstens: Nicht zu viele Schriftarten einbetten
Eine der Grundregeln des Gestaltens: Nicht zu viele Schriften auf einer Seite verwenden. Was der Gestalter aus Gründen der Ästhetik und Usability allein schon ablehnt, gebietet sich bei der Verwendung von Webfonts auch aufgrund der Ladezeiten.
Wer zu viele Schriften einbettet, ob genutzt oder ungenutzt, erhöht die Ladezeit seiner Website. Jeder einzelne Schnitt (Bold, Light, Italic usw.) erzeugt Kilobytes- das ist gerade für mobile User mit begrenztem Datenvolumen ein Ärgernis. Designer sollten hierfür sensibilisiert werden.
Glücklicherweise zeigt Google bei der Auswahl von Schriften und Schnitten mit einem Barometer an, wie hoch das Datenaufkommen durch die Webfonts wird. Verwendet man alle Schnitte einer Schrift wie Open Sans, so kann man schon leicht in den roten Bereich rutschen. Daher: Wirklich nur die Schriften und Schnitte wählen, die man auch wirklich benötigt.
Zweitens: Screendesign != Browser-Ansicht
Gerade sehr dünne, Light oder Thin-Schnitte zerbröseln geradezu, wenn sie zu klein eingesetzt werden. Unter 18px werden diese Schnitte im Firefox oder Webkit unlesbar.
Ein Erfahrungswert aus der Designabteilung: Was im Screendesign gut aussieht, kann sich im Browser oft in Wohlgefallen auflösen. Daher die Schrift, gerade bei unbekannten Typen vor Verwendung im Screendesign, in allen wichtigen Browsern auf der Google Fonts-Seite testen.
Drittens: Was nichts kostet ist (manchmal) auch nichts
Ein paar Schriftarten, gerade die ausgefalleneren, haben Probleme mit fehlenden Glyphen. Selbst Umlaute fehlen bei ihnen, sodass sie im Grunde für Websites im Raum D-A-CH unbenutzbar sind. Bei anderen Schriften stimmt das Kerning nicht, sodass je nach Schriftgröße Wörter auseinander gerissen aussehen. In diesem Fall kann aber beim Zeichenabstand via CSS nachgeholfen werden:
h1 {
letter-spacing: -0.02em;
}
Viertens: SSL
Verwendet man auf der Website ein SSL-Zertifikat, so empfiehlt es sich, die Google Font auch via SSL einzubinden oder gleich herunterzuladen und selbst zu hosten. Läuft eine Seite auf https, verwendet aber Schriften aus einer http-Quelle, so werden Besucher dies als Sicherheits-Fehler angezeigt bekommen.
Fünftens: Mein Unternehmen verwendet Schrift X, gibt es eine Google Font, die dieser ähnelt?
Eine Schriftenlizenz kann gerade für kleine Unternehmen teuer sein. Verwenden Sie in Ihrer Geschäftsausstattung beispielsweise Futura und möchten diese auch im Web verwenden, kann dies ganz schön ins Geld gehen. Glücklicherweise gibt es auch hier sehr ähnliche Schriften. Diese hat beispielsweise Joel Crawford Smith (http://joelcrawfordsmith.com/new/) zusammengefasst. So substituiert er viele Schriften wie
Century Gothic mit Muli https://www.google.com/fonts/specimen/Muli
Eurostile mit Jura http://www.google.com/webfonts/specimen/Jura
Frutiger mit Istok Web http://www.google.com/webfonts/specimen/Istok+Web
oder Gill Sans mit Lato http://www.google.com/webfonts/specimen/Lato
Sie sehen, es gibt viel zu beachten bei der Verwendung von Google Fonts oder Webfonts im Allgemeinen. Wir hoffen, dass Sie diesen Blogeintrag mit Freude gelesen haben und er Ihnen weiterhilft.
Was sind Ihre Erfahrungen mit Google Fonts? Welche Fonts verwenden Sie am liebsten? Haben Sie Anregungen oder Fragen?
Das netzkern-Team ist gerne für Sie da.