Blog

Website Schriftarten: wählen, prüfen, sauber einbinden

Website Schriftarten wählst du in vier Schritten: eine Schrift für lange Texte, eine für Überschriften, dazu die Lizenz und das Verhalten beim Laden. Wo die Schriftwahl im ganzen Ablauf steht, zeigt die [Anleitung vom ersten Inhalt bis zum Livegang](/blog/website-erstellen-anleitung).

· Von Melta

Website Schriftarten: der Haken kommt nach der Auswahl

Die Auswahl dauert einen Nachmittag. Teuer wird, was danach kommt.

Im Schriftverzeichnis sieht jede Familie gut aus, weil dort ein kurzes Wort in grossen Buchstaben steht. Auf deiner Seite steht dieselbe Schrift in zwölf Zeilen Fliesstext, auf einem Handy, im Zug, bei Sonne. Dort entscheidet sich, ob sie taugt.

Dann kommen die Fälle daneben. Der Familie fehlt ein echter Kursivschnitt, also rechnet der Browser eine schiefe Fassung aus. Die Umlaute sitzen so hoch, dass "Öffnungszeiten" in der Navigation an die Zeile darüber stösst. Die Ziffern in der Preisliste haben unterschiedliche Breiten, und die Spalte franst aus. Die Lizenz deckt den Druck ab, aber nicht die Einbindung auf einer Website.

Website Schriftarten sind deshalb weniger eine Geschmacksfrage als eine Frage nach Einsatz und Umfang. Welche Texte trägt die Schrift, welche Schnitte brauchst du wirklich, wem gehört die Datei, und was sieht ein Besucher in der Sekunde, in der sie noch nicht geladen ist. Wer diese vier Antworten hat, wählt danach schnell.

Welche Schriftarten passen zu deiner Website?

Fang beim längsten Text an, nicht beim Logo. Die Schrift für den Fliesstext bestimmt, ob deine Seite gelesen wird. Die Schrift für Überschriften fällt zuerst auf, macht aber den kleineren Teil der Zeichen aus.

Zwei Familien reichen für fast jede Seite: eine für den Fliesstext, eine für Überschriften. Oft genügt eine einzige mit mehreren Schnitten. Wenn es zwei sind, muss der Unterschied deutlich sein. Zwei Schriften, die sich ähneln, wirken wie ein Versehen.

Art der Schrift Wofür sie auf einer Website taugt Wo sie umkippt
Serifenschrift lange Texte, Blogbeiträge, Porträtseiten in sehr kleinen Graden und in schmalen Spalten
Serifenlose Schrift Navigation, Formulare, Tabellen, Fliesstext wenn alle Schnitte gleich wirken und die Hierarchie fehlt
Schreibschrift Wortmarke, eine einzelne Zeile als Akzent in Absätzen, in Versalien, in Formularen
Schmuck- und Schauschrift Titelbild, Aushang, Karte als Bild in allem, was jemand wirklich lesen soll
Schreibmaschinenschrift Preise, Codes, Zahlenspalten im Fliesstext, weil die Abstände stören
Schrift des Geräts schnelle Seiten ohne eigene Schriftdatei wenn das Erscheinungsbild überall gleich sein soll

Die Aufgabe der Seite entscheidet den Rest. Eine Zahnarztpraxis, die Vertrauen und Sprechzeiten zeigt, braucht eine ruhige Schrift mit klaren Ziffern. Ein Dachdecker, der Anfragen sammelt, braucht eine Schrift, die im Formular auf dem Handy lesbar bleibt. Schrift und Farbe entscheidest du am besten in einem Zug, und wie du dazu eine Palette findest, die auf jedem Bildschirm hält, steht in der Anleitung für Website-Farben.

Moderne Schriftarten für Websites: was sie gemeinsam haben

Die Schriften, die auf neuen Seiten immer wieder auftauchen, teilen ein paar Eigenschaften. Mit Mode hat das wenig zu tun.

Sie haben hohe Kleinbuchstaben, damit Text auch klein gesetzt lesbar bleibt. Sie haben offene Formen, sodass sich a, e und s nicht zuschnüren. Sie bringen mehrere Gewichte mit und dazu echte Kursive statt einer errechneten Schräge. Und sie decken den Zeichenvorrat ab, den deutscher Text braucht: Umlaute, Eszett für Leserinnen und Leser in Deutschland, Anführungszeichen unten und oben, Gedankenstrich, Euro und Franken.

Der zweite Teil ist technisch. Viele neuere Familien kommen als variable Schrift. Eine einzige Datei enthält dann mehrere Gewichte und Breiten, statt dass für jeden Schnitt eine eigene Datei geladen wird. Für eine Seite mit Normal, Kursiv, Fett und Fett-Kursiv spart das Anfragen und Verwaltung, und du kommst an Zwischenwerte, ohne eine weitere Datei zu bestellen.

Schön ist am Ende die Schrift, die zum Ton deiner Texte passt und in deinem längsten Absatz nicht anstrengt. Das entscheidest du in zehn Minuten, wenn die Bedingungen davor geklärt sind.

Wie findest du heraus, welche Schriftart eine Website nutzt?

Mit dem Browser, ohne Zusatzwerkzeug. Rechtsklick auf den Text, dann Untersuchen. In den Entwicklerwerkzeugen wählst du das Element aus und öffnest den Bereich Computed. Ganz unten steht, welche Schrift tatsächlich gerendert wurde.

Der Unterschied zum Stylesheet ist der Punkt. Im Stylesheet steht eine Liste von Wünschen, und der Browser nimmt den ersten Eintrag, den er findet. Fehlt die Datei, oder blockiert ein Filter den fremden Server, rendert er den Ersatz. Auf dem Bildschirm steht dann etwas anderes als im Code.

Zwei weitere Wege helfen. Im Netzwerkbereich filterst du nach Font und liest die Dateinamen der geladenen Schriften ab; dort steht der Familienname meist im Klartext. Im Quelltext siehst du, ob die Seite ihre Schriften selbst ausliefert oder von einem fremden Server holt.

Ein gefundener Name ist keine Erlaubnis. Dass eine andere Seite eine Schrift einsetzt, sagt nichts darüber, ob du dieselbe Datei einbinden darfst.

Website für Schriftarten: woher die Dateien kommen

Es gibt drei Arten von Quellen, und sie unterscheiden sich vor allem in den Bedingungen.

Verzeichnisse mit offener Lizenz geben dir die Dateien zum Herunterladen und Mitliefern; was erlaubt ist, steht in der Lizenzdatei, die du mit ausliefern musst. Schriftenhäuser verkaufen Lizenzen getrennt nach Nutzung, eine für den Rechner und eine für die Einbindung im Web, teils gestaffelt nach Seitenaufrufen. Die Schriften, die auf den Geräten ohnehin liegen, brauchen keinen Ladevorgang und sehen dafür je nach System anders aus.

Dann die Frage, wer die Datei ausliefert. Bindest du eine Schrift von einem fremden Server ein, holt sie der Browser jedes Besuchers dort, und die IP-Adresse dieses Besuchers geht an diesen Server mit. Wer das nicht will, legt die Dateien auf den eigenen Server und bindet sie von dort ein. Als Format hat sich WOFF2 durchgesetzt, weil es die Dateien stärker packt als ältere Formate und auch variable Schriften transportiert.

Leg die Lizenz dorthin, wo du sie in zwei Jahren wiederfindest, am besten neben die Schriftdateien im Projekt. Die Frage, ob eine Schrift bezahlt ist, kommt selten sofort und fast immer zum falschen Zeitpunkt.

Wie viele verschiedene Schriftarten verträgt eine Seite?

Weniger, als die Sammlung im Verzeichnis nahelegt. Hierarchie entsteht durch Grösse, Gewicht, Abstand und Farbe, nicht durch eine weitere Familie.

Praktisch heisst das: zwei Familien, und je Familie nur die Schnitte, die du wirklich einsetzt. Jeder zusätzliche Schnitt ist eine Datei mehr, die geladen werden will, und jede Datei mehr verschiebt den Moment, in dem die Seite fertig aussieht. Wer vier Gewichte einbindet und am Ende zwei benutzt, zahlt das bei jedem Aufruf.

Definiere die Schriften an einer Stelle, nicht in jedem Block. Dann ist ein Wechsel später eine Änderung an zwei Zeilen und kein Umbau. Bei Melta lassen sich Farben und Schriften ohne Neubau ändern; was sonst zum Erscheinungsbild eines Produkts gehört, steht auf der Seite zu Marke, Farben und Schriften.

Wo die Schriftwahl zwischen Planung, Bau und Livegang steht, zeigt die Anleitung vom ersten Inhalt bis zum Livegang.

Tattoo-Schriftarten und andere Schauschriften im Web

Viele suchen nach Tattoo-Schriftarten, weil sie ein Wort in geschwungenen Buchstaben sehen wollen, bevor es endgültig ist. Dafür gibt es Vorschauwerkzeuge im Browser, und dafür taugen solche Schriften auch. Für eine Website gilt etwas anderes.

Eine Schauschrift trägt ein Wort, keinen Satz. In einer Wortmarke, auf einem Titelbild oder auf einer fotografierten Karte funktioniert sie. In Navigation, Formular und Fliesstext fällt sie auseinander: feine Linien verschwinden auf kleinen Bildschirmen, Versalien in Schreibschrift werden unlesbar, und Umlaute fehlen in solchen Dateien öfter, als man denkt.

Kommt die Schauschrift nur im Logo vor, gehört sie auch nur dorthin. Setz den Schriftzug einmal, exportiere ihn als Bild mit einer Alternativbeschreibung, die den Text des Schriftzugs nennt, und halte die Schriftdatei aus dem Stylesheet heraus. Dann lädt keine Seite eine Datei, die für ein einziges Wort gebraucht wird. Was beim Schriftzug sonst zu bedenken ist, steht in der Anleitung zum Logo erstellen.

Damit die Schrift beim Laden nicht springt

Zwischen dem ersten Bild der Seite und der fertig geladenen Schrift liegt ein Moment, in dem der Browser entscheiden muss, was er zeigt. Mit der Angabe font-display: swap zeigt er zuerst die Ersatzschrift und tauscht sie aus, sobald die eigene Datei da ist. Der Text ist sofort lesbar und springt einmal.

Damit dieser Sprung klein bleibt, wählst du als Ersatz eine Schrift mit ähnlichen Massen: vergleichbare Höhe der Kleinbuchstaben, vergleichbare Breite. Je näher sich die beiden sind, desto weniger verschiebt der Tausch das Layout.

Die Grössen selbst hängen nicht am Gerät, sondern am Platz. Layout, Schrift und Bilder richten sich nach der Fensterbreite, und das gilt für die Schriftgrösse genauso wie für die Spalten. Eine Zeile, die auf dem Desktop angenehm zu lesen ist, wird auf dem Handy zur Kette aus Einzelwörtern, wenn die Grösse mitwächst, die Zeilenlänge aber nicht begrenzt ist.

Website Schriftarten prüfen, bevor die Seite live geht

Sieh dir die Schrift dort an, wo sie bricht. Öffne die längste Seite auf einem Handy und lies einen ganzen Absatz, statt nur zu scrollen. Ruf eine Preisliste auf und schau, ob die Ziffern eine gerade Spalte bilden. Setz das längste Wort deiner Branche in eine Überschrift, samt Umlaut. Drossle die Verbindung in den Entwicklerwerkzeugen und sieh zu, was in der ersten Sekunde auf dem Bildschirm steht. Und prüfe Anführungszeichen, Gedankenstrich und Währungszeichen, weil genau die in unvollständigen Dateien fehlen.

Website Schriftarten, die diese Runde bestehen, musst du danach lange nicht mehr anfassen. Das ist der Gewinn an der Sache: eine Entscheidung, die ein Jahr später noch trägt, statt einer Auswahl, die bei jedem neuen Inhalt wieder aufgemacht wird.

FAQ

Wie finde ich heraus, welche Schriftart eine Website nutzt?

Rechtsklick auf den Text, Untersuchen wählen, dann im Bereich Computed ganz nach unten scrollen. Dort steht die Schrift, die der Browser wirklich gerendert hat, nicht nur die, die im Stylesheet gewünscht ist.

Wie viele Schriftarten sollte eine Website verwenden?

Zwei Familien reichen für fast jede Seite, eine für den Fliesstext und eine für Überschriften. Unterschiede machst du besser über Grösse, Gewicht und Abstand als über eine dritte Familie.

Darf man jede Schriftart auf einer Website einbinden?

Nein. Eine Lizenz für den Rechner deckt die Einbindung im Web nicht automatisch ab, und was erlaubt ist, steht in der Lizenzdatei der jeweiligen Schrift.

Was sind moderne Schriftarten für eine Website?

Familien mit hohen Kleinbuchstaben, offenen Formen, mehreren Gewichten und echten Kursiven, dazu ein vollständiger Zeichenvorrat für deutschen Text. Viele davon gibt es als variable Schrift in einer Datei.

Gehören Tattoo-Schriftarten auf eine Website?

Höchstens in eine Wortmarke oder in ein Bild. Für Navigation, Formulare und Fliesstext sind sie zu schwer lesbar, und oft fehlen ihnen Umlaute.

Themen: Website Schriftarten, Typografie, Webfonts, Website erstellen

Quellen

  1. Chrome DevTools: die tatsächlich gerenderte Schrift eines Elements ablesen developer.chrome.com
  2. MDN Web Docs: was font-display mit dem Wert swap beim Laden macht developer.mozilla.org
  3. MDN Web Docs: Leitfaden zu variablen Schriften und ihren Dateien developer.mozilla.org
  4. MDN Web Docs: Web Open Font Format und was WOFF2 transportiert developer.mozilla.org
  5. Anleitung: responsive Website erstellen, und was responsive für Schrift und Layout heisst

Weiterlesen

Zur Themenseite

Weiterlesen

Beschreib dein Produkt - den Rest übernimmt Melta.

Ein Konzept kostet nur wenige Credits. Gebaut, online gestellt und betrieben wird es, sobald du es freigibst.

Frühzugang sichern