Web-Entwickler

Schluss mit dem Schriften-Einheitsbrei – Google Fonts

Google Fonts Logo

Was waren das für Zeiten, als Web-Entwickler noch verwendbare Font-Stacks an einer Hand abzählen konnten. Verdana, Arial, Helvetica, Georgia, Times… Ende. Somit sahen alle Website-Texte mehr oder minder gleich aus. Wer ein wenig Eigenständigkeit beweisen wollte was die Typographie anging, der erstellte GIF oder PNG-Dateien in denen die Schriften als Textgrafik vorlagen.

 

Aber das ist mittlerweile graue Vorzeit. Denn es gibt @font-face, Webschriften, die in allen wichtigen Browsern unterstützt werden. Die Einbindung ist denkbar einfach. Ein paar Zeilen CSS und schon lässt sich die Lieblings- oder Firmen-Schriftart – entsprechende Lizenz vorausgesetzt – spielend einfach in die Website integrieren. Tools wie Font-Squirrel nehmen einem dabei viel Arbeit ab und konvertieren Desktop-Schriften in alle für das Web benötigte Formate (SVG, TTF, OTF, WOFF oder EOT). Viele Typen-Hersteller verkaufen mittlerweile Lizenzen für ihre Fonts und machen damit auch Corporate Fonts, teilweise für horrende Summen, im Web verfügbar.

 

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
Futura mit Nunito http://www.google.com/fonts/specimen/Nunito
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.

Kommentare
1

Marc Andreesen

erstaunlich

am 10.07.2014

2

Isabel

Danke danke, das haben wir alle nie gewusst. Endlich weist uns eine Internetagentur den Weg in die Zukunft

am 11.07.2014

3

netzkern AG

Danke für die Kommentare. Gerne nehmen wir auch Themenvorschläge für zukünftige Blogposts entgegen.

am 11.07.2014

4

Vor und Zuname

Du bist ein Trottel. Bindet externe Schriftarten von Google ein... Aber gut, was kann man von einem Web-Frickler schon erwarten.

am 09.11.2015

Kommentar hinzufügen
Vor und Zuname
E-Mail
E-Mail bei weiteren Kommentaren
Mein Kommentar