Webfonts #1 — endlich schicke Schrift

Arial, Tahoma und Verdana. Das waren die drei Schriftarten, mit denen bis vor wenigen Jahren 90% aller Webseiten vorlieb nehmen mussten. Mit den nur selten einsetzbaren Courier, Comic und Times gehörten sie zu den wenigen "Systemschriften", die plattform-übergreifend — also u.a. unter Windows, Linux und am Mac — zur Verfügung standen. Bei allen anderen Schriften war es pures Glück, ob Besucher diese auch auf ihren Rechnern installiert hatten. 

Anfangs wurde das Problem umgangen, indem Webseiten schlicht aus ganzseitigen Bildern gestaltet wurden. Per image-map konnte man auch darauf seine Link-flächen definieren und alles sah prima aus. Damals war "responsive" noch kein Thema, es gab eine deutlich geringere Varianz bei den Bildschirmauflösungen. Doch dann kam Google und wollte Text, keine Bilder, denn Texterkennung auf diesem Niveau war damals noch nicht leistbar. Also blieben "Designelemente" weiterhin Bilder, der Rest wurde mal Arial, mal Tahoma und mal Verdana...

Immerhin gibt es schon seit Anbeginn des Internets die Möglichkeit, nicht nur eine, sondern gleich eine Reihe von Schriftarten anzugeben:

Hier wird für "normale" Textabsätze (paragraph) zunächst Arial als Schrift bestimmt. Sollte diese — wie etwa ganz zu Beginn am Mac — nicht am Besucher-Rechner verfügbar sein, wird stattdessen Helvetica — die es an jedem Mac aber fast keinem PC gab — gesucht. Sind beide oder natürlich auch noch weitere alle nicht verfügbar, greift ganz am Schluß das generische sans-serif und bittet quasi um die serifenlose Browser- bzw. System-Standardschrift. 

So sieht die Liste der generischen Schriften bei Ihnen aus — falls Sie unterschiedliche Browser auf dem System haben, kann es dabei Unterschiede geben:

Ein wenig mehr Kontrolle wünscht man sich als Webdesigner ja schon über das Aussehen seiner Werke beim Besucher... Aber erst recht — und nicht nur ein wenig — mehr Auswahl!

Glücklicherweise erzählen wir hier Geschichten, die schon länger Geschichte sind. Denn schon seit Jahren können so gut wie alle Browser — selbst der alte IE 6, nur Opera Mini (mal wieder) nicht — auf diese Weise Schriftarten aus dem Internet laden:

In den vergangenen Jahren stieg der Einsatz von Webfonts auf Webseiten rasant an und gehört inzwischen zum guten Ton. Ein Segen für alle Webdesigner, zumal "die Drei" alle gemeinsam hatten, dass sie ab einer gewissen Größe noch hässlicher wirken. Ohne Webfonts wäre der aktuelle Trend kurzer Texte in gigantischer Schriftgröße auf Webseiten wohl nie passiert.

Wie so häufig gibt es sehr viele Anbieter, aber Google sticht mal wieder mit seinem Angebot hervor: Fast 1.000 Schriften stehen hier schon zur Auswahl und alle können für Webseiten kostenlos eingesetzt und sogar auf Macs und PCs heruntergeladen werden — auch zur kommerziellen Nutzung, es gibt nur wenige Ausnahmen im Detail.

Unter fonts.google.com erwartet den Schriftsuchenden eine inzwischen sehr ausgereifte Oberfläche zur Auswahl von Webfonts nach unterschiedlichsten Kriterien. Eine individuelle Vorschau auch mit eigenem Text ist selbstverständlich, unter "Pairings" sogar mit Empfehlungen zur Kombination mit anderen Webfonts. 

Wichtig ist — gerade für Ihre "Standardschrift" — eine möglichst hohe Zahl verschiedener "Stile" in der gewählten Schriftfamilie, also etwa verschieden dicke Schnitte oder auch eine kursive Variante.

Recht neu sind in diesem Zusammenhang "variable" Schriften, deren stufenlose Gewichtung aus einer Datei heraus möglich ist. Daneben können noch weitere Eigenschaften wie etwa die Breite oder die Neigung variabel sein. 

Heebo – variable Schriftart

Im Bereich zwischen 375px und 1175px Fensterbreite wechselt dieses Beispiel sein "Gewicht" (weight) von 100 bis 900 — am Smartphone oder Tablet z.B. einfach mal "quer drehen" und beobachten... ;)
 

Sehr praktisch sind auch sog. Icon Fonts, über die man anstelle unzähliger kleiner Bilddateien die ganzen kleinen Symbole in eine Schriftart packt. Auf die Spitze getrieben hat das die Schriftart Zycon mit sich verändernden (variablen) Icons wie einem krabbelnden Salamander oder einem stampelnden Radfahrer. 

Zycon unter axis-praxis.org ausprobieren

Wir haben für Ihr einfaches CMS metatag^® schon vorgesorgt: Wir geben bei der Webeinrichtung direkt die Google Webfonts ein, die Sie sich ausgesucht haben. Das geht aber so einfach, dass Sie jederzeit am Schriftbild Ihrer Webseite Anpassungen vornehmen können. Beim Erstellen und Formatieren von Texten wählen Sie im Regelfall nur aus den zuvor definierten Schriftstilen aus. 

Dabei umgehen Sie automatisch auch eine Gefahr, die bei unbedarftem Nutzen droht: Im bei Google angepriesenem Standardverfahren werden die Schrift-Dateien beim Einbinden auf einer Webseite von Google Servern geladen. Und hier droht, mal wieder, genau: Die DSGVO. 

Die einfache Lösung ist eine Synchronisation aller Google Webfonts auf unseren eigenen metatag^® Server, von dem dann die Schriften an die Besucher ausgeliefert werden — frei von irgendwelchen Datenschnüffeleien.

In der nächsten Folge unserer kleinen Serie zu Webfonts zeigen wir Ihnen unsere Lieblingsschriftarten unter der riesigen Auswahl an Google Fonts.