Aus dem Kurs: Grundlagen der Typografie: Basiswissen

Schriften im Internet

Schriften lassen sich in Internetseiten einbinden. Dies geschieht auf unterschiedliche technische Art und Weise. Ich zeige Ihnen, worauf Sie achten müssen und welche Technologien möglich sind. Für Kreative gibt es vorwiegend zwei Anbieter, Google und Adobe. Google bietet über seine Schriftenplattform hunderte an Fonts an, die sowohl für die klassische wie auch die analoge Gestaltung gedacht sind. Dabei handelt es sich um Schriften, die von Google kostenfrei zur Verfügung gestellt werden. Aber sind sie auch umsonst? Nicht ganz. In der Regel werden diese Fonts für Websites mittels Streaming bereitgestellt. Ruft also eine Besucherin oder Besucher Ihre Website auf, dann fragt die Webseite Google nach den Schriften. Google liefert diese aus und weiß damit auch, wo und wann welche Fonts in welchen Sprachen zum Einsatz kommen. Die Einbindung der Fonts geschieht über ein Skript auf Ihrer Website. Somit ist klar, welcher Font genutzt und welcher Schnitt eingebunden wird. Und wie macht das Adobe? Genauso. Hier rufen Sie Schriften aus dem Portal fonts.adobe.com auf. Über eine Creative Cloud-Lizenz können diese Schriften aktiviert werden. Ihre Webseite binden diese Fonts per Skript ein. Die so gestaltete Webseite stellt die Inhalte mit dem gewünschten Font so lange dar, wie Ihre Adobe-Lizenz gültig ist. Sollten Sie ein Adobe-Abonnement kündigen, verfällt damit auch die Bereitstellung von Fonts auf der Website. Stattdessen werden Standard-Fonts angezeigt und wie machen das andere Anbieter? Ebenfalls auf identischem Wege. Fonts werden eingebunden und vom Anbieter an die Besucher der Webseite gestreamt. Das Streaming hat sich also durchgesetzt. Dennoch gibt es auch die Option, Fonts auf dem Webserver abzulegen und von dort an die Besucher der Website auszuliefern. Dies ist abhängig von der Lizenz und funktioniert in der Regel mit Free Fonts. Auf der Website lässt sich per CSS-Code nicht nur der Schriftschnitt einbinden, sondern über eine Vielzahl an Befehlen gestalten. Dabei spielt die Größe eine Rolle wie auch die Laufweite, der Zeilenabstand oder die Wahl der Fette anhand der Unterteilung zwischen 100 und 900. Magere Schriften besitzen das Gewicht von 100, sehr fette Schnitte hingegen werden mit 900 dargestellt. Wenn Sie im Design nur eine Font-Familie allgemein als font-face eingebunden haben, können Sie allein mit den Angaben des font-weight die Parameter wie 100 für thin, 200 für light, 300 für regular, 500 für bold, 700 für heavy oder 900 für extra bold verwenden, vorausgesetzt der Font verfügt auch über diese Anzahl von Schnitten. Als Einheit für Schriftgröße oder Zeilenabstand kann entweder Pixel oder em verwendet werden. Pixel bedeutet die Schriftgröße in Pixeln am Monitor. Die Einheit em hingegen steht in Abhängigkeit von der Standardgröße von Schriften am Monitor. Werden also Fonts in der Größe 1,0 em verwendet, so entsprechen sie der Standardbrowsergröße, z.B. 12 Pt. Wenn größere Überschriften oder kleine Bildunterschriften verwendet werden sollen, so können Überschrift mit 1,1 oder 1,25 em formatiert werden. Diese sind dann 10 bzw. 25 % größer als die Grundschrift. Für die Darstellung des Fonts am Monitor ist nicht der Font verantwortlich, sondern der Browser. Somit sieht eine Schrift über mehrere Browser und Geräte hinweg unterschiedlich aus. Das kann auch durch die Typografie nicht verhindert werden. Hinzu kommen niedrig- und hochaufgelöste Displays, also mit wenigen großen oder besonders kleinen Bildpunkten. Google Chrome berechnet die Zeichenformen einer Schrift geringfügig anders als Firefox oder Safari. Nur durch die Wahl einer robusten Type lässt sich dieses Phänomen auf ein Minimum reduzieren.

Inhalt