Schriftarten für die Website: Auswahl, Lizenz, Google Fonts und Ladezeit

Für eine Firmenwebsite genügen eine oder zwei Schriftarten: eine gut lesbare Schrift für Fliesstext und eventuell eine zweite mit mehr Charakter für Überschriften. Ausgewählt wird nach Lesbarkeit auf dem Handy, Unterstützung aller benötigten Zeichen, Wirkung und Lizenz. Eingebunden werden die Schriften am besten vom eigenen ServerEin Server ist ein Computer oder ein Programm, das anderen Geräten Dienste bereitstellt: Er liefert Websites aus, speichert Daten, verschickt E-Mails oder…Mehr erfahren → im Format WOFF2, mit möglichst wenigen Schnitten. Das schützt Ladezeit und Layout und vermeidet, dass beim Laden der Seite Daten der Besucher an Dritte gehen, wie es bei Google FontsGoogle Fonts ist eine kostenlose Bibliothek von Open-Source-Schriften, die auf Websites eingesetzt werden können. Die Schriften lassen sich entweder direkt von…Mehr erfahren → direkt von Google-Servern der Fall ist.

Die Schrift ist eines der wenigen Gestaltungselemente, das auf jeder Seite und in jedem Satz vorkommt. Sie prägt, ob eine Website seriös, modern, handwerklich oder verspielt wirkt, oft stärker als Farben oder Bilder. Gleichzeitig ist sie eine technische Ressource, die geladen werden muss. Beides gehört zusammen gedacht.

Schritt 1: Auswahl nach Lesbarkeit, nicht nach Geschmack

Die meisten Texte auf einer Website werden auf dem Handy gelesen, unterwegs, oft im Licht. Eine Fliesstextschrift muss deshalb vor allem eines: in kleiner Grösse auf kleinen Bildschirmen lesbar sein. Prüfen Sie Kandidaten an echtem Text, nicht am Alphabet:

• Grosse Kleinbuchstaben: Schriften mit hoher x-Höhe, also grossen Kleinbuchstaben im Verhältnis zu den Grossbuchstaben, sind in kleiner Grösse besser lesbar.
• Unterscheidbare Zeichen: Lassen sich I, l und 1 sowie O und 0 auseinanderhalten? Wichtig bei Telefonnummern, Bestellnummern und Preisen.
• Ziffern: Für Preistabellen und Kennzahlen sind gleich breite Ziffern hilfreich, damit Zahlen untereinander sauber stehen. Viele Schriften bieten diese als Einstellung an, in CSS über font-variant-numeric: tabular-nums.
• Sprachen: Deckt die Schrift Umlaute, das französische ç und é, das italienische à und Sonderzeichen wie das Schweizer Apostroph in CHF 3'000 ab? Bei mehrsprachigen Websites ist das ein Ausschlusskriterium.
• Schnitte: Gibt es mindestens Normal, Fett und, wenn gebraucht, Kursiv?

Die Lehre von Schrift und Satz heisst Typografie. Für eine Website reicht es, wenige Regeln konsequent einzuhalten: genügend Schriftgrösse für Fliesstext, Zeilenlänge, die nicht über den ganzen Bildschirm läuft, und ausreichender Zeilenabstand.

Schritt 2: Wirkung und Erscheinungsbild

Erst wenn die Lesbarkeit stimmt, kommt der Charakter. Grob lassen sich Schriften in Familien einteilen:

Wenn es ein bestehendes Corporate Design gibt, ist die Schrift dort oft schon festgelegt. Dann stellt sich die Frage, ob es davon eine Webfont-Lizenz gibt. Die Schweiz hat dabei eine eigene Schriftgeschichte: Die Helvetica wurde 1957 von Max Miedinger und Eduard Hoffmann bei der Haas'schen Schriftgiesserei in Münchenstein entwickelt. Sie ist bis heute lizenzpflichtig, auch auf Websites. Viele frei lizenzierte Groteskschriften wirken ähnlich sachlich und sind eine pragmatische Alternative.

Schritt 3: Lizenz prüfen, auch bei kostenlosen Schriften

«Kostenlose Schriftarten» gehören zu den häufigsten Suchanfragen rund um Schrift. Entscheidend ist aber nicht der Preis, sondern was die Lizenz erlaubt.

• Open-Source-Schriften: Die meisten Schriften bei Google Fonts stehen unter der SIL Open Font License. Sie dürfen auf Websites, in Drucksachen und in Logos verwendet werden, auch kommerziell, und selbst gehostet werden. Verkauft werden darf die Schrift selbst nicht.
• Gratis-Download-Seiten: Viele Schriften dort sind nur für private Zwecke freigegeben. Für eine Firmenwebsite oder ein Logo braucht es dann eine kommerzielle Lizenz.
• Kommerzielle Schriften: Bei Schriftanbietern gekaufte Lizenzen unterscheiden oft zwischen Desktop-Nutzung, Web-Nutzung und App-Nutzung. Eine Desktop-Lizenz für das Grafikprogramm erlaubt nicht automatisch den Einsatz auf der Website. Web-Lizenzen sind teils nach Seitenaufrufen gestaffelt.

Halten Sie die Lizenz zusammen mit den Schriftdateien fest. Wer in drei Jahren die Website umbaut, sollte nicht rätseln müssen, ob die Schrift weiterverwendet werden darf.

Schritt 4: Google Fonts datenschutzfreundlich einbinden

Google Fonts lassen sich auf zwei Arten verwenden: direkt von Google-Servern geladen oder als Dateien auf dem eigenen Server. Optisch ist das Ergebnis identisch, rechtlich und technisch nicht.

Beim Laden von Google-Servern ruft der Browser jeder Besucherin die Schriftdateien bei Google ab und überträgt dabei ihre IP-Adresse. Das Landgericht München hat am 20. Januar 2022 (Az. 3 O 17493/20) für Deutschland entschieden, dass das ohne Einwilligung gegen die DSGVO verstösst, und dem Kläger Schadenersatz zugesprochen. Für Schweizer Websites ist das Urteil nicht direkt massgebend, das Schweizer Datenschutzgesetz verlangt aber ebenfalls, dass Besucher über Datenbearbeitungen informiert werden, und viele Schweizer Websites richten sich auch an Besucher aus der EU.

Die einfachste Lösung ist, die Schriften selbst zu hosten: Schriftdateien herunterladen, auf dem eigenen Server ablegen, im CSS einbinden. Dann findet keine Verbindung zu Google statt, und die Schrift lädt oft sogar schneller, weil keine zusätzliche Verbindung zu einem fremden Server aufgebaut werden muss. Moderne Frameworks wie Next.js erledigen das automatisch: Die Schrift wird beim Bauen der Website heruntergeladen und vom eigenen Server ausgeliefert. Mehr zum Begriff unter Google Fonts, zu den rechtlichen Pflichten einer Schweizer Website in Impressum, Datenschutz und Cookie-Banner.

Schritt 5: Ladezeit und Layout schützen

Schriften sind Dateien, und jede Datei kostet Ladezeit. Mit wenigen Einstellungen bleibt dieser Preis klein.

Format WOFF2. Das komprimierte Webfont-Format wird von allen aktuellen Browsern unterstützt. Ältere Formate wie TTF oder EOT braucht eine heutige Website nicht mehr.

Wenige Schnitte. Jeder Schnitt, also Normal, Fett, Kursiv, Halbfett, ist eine eigene Datei. Laden Sie nur, was tatsächlich verwendet wird. Eine variable Schrift enthält viele Stärken in einer Datei und ist oft die bessere Wahl, wenn mehr als zwei Stärken gebraucht werden.

Teilmengen. Viele Schriften enthalten Zeichen für Dutzende Sprachen. Eine Teilmenge mit lateinischen Zeichen inklusive aller benötigten Akzente reicht für eine Schweizer Website meist aus und macht die Datei deutlich kleiner.

Vorladen und Anzeigeverhalten. Die Hauptschrift für Fliesstext und Überschriften im sichtbaren Bereich wird vorgeladen. Mit font-display: swap zeigt der Browser den Text sofort in einer Ersatzschrift, statt ihn unsichtbar zu lassen.

Springendes Layout vermeiden. Beim Wechsel von Ersatzschrift zu Webfont verschiebt sich das Layout, wenn die Schriften unterschiedlich breit sind. Google misst solche Verschiebungen als Cumulative Layout Shift. Abhilfe schafft eine Ersatzschrift, deren Masse an die Webfont angepasst werden, in CSS über size-adjust und verwandte Angaben. Auch das übernehmen moderne Frameworks automatisch. Welche Messwerte Google insgesamt heranzieht, erklärt Core Web Vitals und INP.

Icons nicht als Schrift. Eine Icon-Schrift für ein paar Symbole lädt viel mehr als nötig. Einzelne SVG-Icons sind leichter, siehe SVG, WebP oder PNG.

Beispiel: Schriftwahl für eine Anwaltskanzlei

Konstruiertes Beispiel, kein Kundenfall. Eine Kanzlei in Zug mit Mandanten aus der Deutsch- und Westschweiz lässt ihre Website neu gestalten. Im bisherigen Briefpapier steht eine kommerzielle Antiqua, für die nur eine Desktop-Lizenz vorliegt.

• Lizenz geklärt: Eine Web-Lizenz der bisherigen Schrift wäre möglich, aber nach Seitenaufrufen gestaffelt. Die Kanzlei entscheidet sich, die Antiqua nur für Überschriften zu verwenden und dafür eine Web-Lizenz zu erwerben.
• Fliesstext: eine frei lizenzierte Groteskschrift mit hoher x-Höhe und vollständigen französischen Akzenten, als variable Schrift in einer Datei.
• Einbindung: beide Schriften selbst gehostet, WOFF2, lateinische Teilmenge, Hauptschrift vorgeladen, angepasste Ersatzschrift.
• Ziffern: gleich breite Ziffern für die Tabelle mit Honoraransätzen.

Das Ergebnis wirkt wie das bisherige Briefpapier, lädt zwei Schriftdateien statt sechs und überträgt keine Besucherdaten an Dritte.

Checkliste

• Eine, höchstens zwei Schriftfamilien mit klarer Rolle
• Fliesstext auf dem Handy ohne Zoomen gut lesbar
• Alle benötigten Zeichen vorhanden, inklusive Akzente und Schweizer Apostroph
• Lizenz für Web-Nutzung geprüft und dokumentiert
• Schriften selbst gehostet, keine Verbindung zu Google-Servern beim Seitenaufruf
• Format WOFF2, nur verwendete Schnitte, wenn möglich variable Schrift
• Hauptschrift vorgeladen, font-display: swap, angepasste Ersatzschrift
• Keine Icon-Schrift für einzelne Symbole

Wie wir arbeiten

Bei neuen Websites legen wir Schrift, Lizenz und technische Einbindung zusammen fest, siehe Webdesign und Website erstellen lassen. Wenn das Erscheinungsbild insgesamt überarbeitet wird, gehört die Schriftwahl zum Corporate Design. Bei bestehenden Websites prüfen wir Schriften, Ladezeit und Datenschutz im Rahmen eines Website-Redesigns oder Website-Audits.

Fazit

Die richtige Schrift ist lesbar, passt zur Firma, ist korrekt lizenziert und lädt schnell. Wer eine oder zwei Schriftfamilien wählt, die Lizenz prüft, die Dateien selbst hostet und auf wenige Schnitte im Format WOFF2 setzt, hat alle vier Punkte abgedeckt. Das ist wenig Aufwand für ein Element, das auf jeder Seite in jedem Satz sichtbar ist.