Schriftarten für die Website: wie du auswählst, was funktioniert

Die kurze Antwort: Für eine Website brauchst du selten mehr als zwei Schriften, und die Auswahl entscheidet sich weniger am Geschmack als an vier praktischen Fragen: Passt der Charakter, gibt es genug Schnitte, ist die Lizenz für Webnutzung gedeckt, und lädt sie schnell? Alles andere ist Kür.

Grundlagen

Was Typografie auf einer Website leistet

Typografie ist die Gestaltung von Schrift im Satz: Schriftwahl, Größen, Hierarchie, Abstände, Zeilenlängen. Sie entscheidet darüber, ob Inhalte gelesen werden oder nur da sind.

Der erste Eindruck fällt dabei schneller, als man Text lesen kann. Gitte Lindgaard und Kolleginnen zeigten 2006 in „Attention web designers: You have 50 milliseconds to make a good first impression!“ (Behaviour & Information Technology 25/2), dass Menschen die visuelle Attraktivität einer Seite schon nach 50 Millisekunden bewerten, und dass dieses Urteil stabil bleibt. Wichtig ist die Einschränkung: Gemessen wurde die Wirkung des Gesamteindrucks, nicht die Schrift allein. Typografie ist ein großer Teil davon, aber kein Beweis für sich.

Die vier Schriftklassen

Serif wie Georgia, Garamond oder Playfair Display haben kleine Abschlussstriche. Sie wirken klassisch und ruhig und tragen lange Texte gut. Auf Bildschirmen sind sie längst kein Problem mehr, das war ein Argument aus der Zeit niedriger Auflösungen.

Sans-Serif wie Inter, Helvetica oder Montserrat verzichten darauf. Sie wirken sachlich und neutral und sind bei kleinen Größen und auf Displays besonders robust.

Display-Schriften sind ausdrucksstark und für Überschriften gemacht. Im Fließtext werden sie anstrengend, oft schon nach zwei Sätzen.

Monospace wie Roboto Mono gibt jedem Zeichen dieselbe Breite. Für Code unverzichtbar, sonst ein bewusst technisches Stilmittel.

Die Klasse sagt dir die Richtung, nicht die Entscheidung. Zwei Sans-Serifs können weiter auseinanderliegen als eine Serif und eine Sans.

Auswählen

Schriftarten für die Website auswählen: vier Fragen

Die meisten Fehlgriffe passieren, weil jemand eine Schrift schön findet und erst später merkt, dass sie nicht kann, was die Seite braucht. Diese Reihenfolge verhindert das.

1. Passt der Charakter zur Sache? Nicht „modern“ oder „hochwertig“, sondern konkret: Soll die Seite ruhig wirken oder wach, handwerklich oder technisch? Eine Schrift kann nur unterstützen, was inhaltlich schon da ist.
2. Gibt es genug Schnitte? Du brauchst mindestens Regular, Kursiv und einen kräftigen Schnitt, meist auch Semibold. Familien mit nur zwei Schnitten zwingen dich später zu Notlösungen, und vom Browser künstlich fett gerechnete Schrift sieht man.
3. Deckt die Lizenz Webnutzung ab? Dazu unten mehr. Das ist der Punkt, an dem Projekte am spätesten stolpern.
4. Wie schnell lädt sie? Jeder zusätzliche Schnitt ist eine Datei. Zwei Familien mit je drei Schnitten sind sechs Dateien, die vor dem ersten Wort geladen sein wollen.

Zwei Schriften reichen

Eine für Überschriften, eine für den Fließtext. Mehr braucht fast keine Website, und die dritte Schrift ist meistens der Moment, in dem ein Auftritt beliebig wird.

Der Klassiker ist eine ausdrucksstarke Serif für Headlines mit einer klaren Sans-Serif im Text. Umgekehrt funktioniert genauso. Wichtiger als die Kombination ist der Kontrast: Wenn zwei Schriften einander ähnlich sehen, wirkt das nicht harmonisch, sondern wie ein Versehen. Und wer eine Familie mit vielen Schnitten hat, kommt auch mit einer einzigen Schrift sehr weit, allein über Größe und Gewicht. Wie sich daraus eine Hierarchie bauen lässt, steht bei den Gestaltungsregeln fürs Layout.

Was am Ende festgelegt wird, gehört schriftlich in den Styleguide: welche Schrift, welche Schnitte, welche Größen. Sonst wird bei jeder neuen Seite neu entschieden.

Praxis

Die Werte, die im Web funktionieren

Keine Naturgesetze, aber belastbare Ausgangspunkte:

• Fließtext ab 16 Pixel. Das ist die Standard-Schriftgröße jedes Browsers, und sie ist kein Zufall. 17 bis 18 Pixel lesen sich auf großen Bildschirmen angenehmer.
• Zeilenhöhe zwischen 1,4 und 1,6. Je länger die Zeile, desto mehr Zeilenabstand braucht das Auge, um die nächste Zeile wiederzufinden.
• Zeilenlänge 45 bis 75 Zeichen. Robert Bringhurst nennt in „The Elements of Typographic Style“ 66 Zeichen als Idealwert und 45 bis 75 als brauchbaren Bereich. Auf einer Website heißt das: Textspalten begrenzen, auch wenn der Bildschirm breiter ist.
• Drei Ebenen genügen. Überschrift, Zwischenüberschrift, Fließtext. Eine vierte Ebene braucht so viel Abstand, dass man sie noch erkennt.

Eine Klarstellung, weil sie oft durcheinandergeht: Eine saubere Überschriften-Struktur hilft Suchmaschinen, aber das ist Markup, nicht Typografie. Ob deine h2 groß und fett aussieht, interessiert Google nicht. Dass sie im Quelltext eine h2 ist, schon. Beides gehört zusammen, ist aber nicht dasselbe. Wie Menschen im Web tatsächlich lesen, habe ich hier aufgeschrieben.

Laden, ohne dass es ruckelt

Schriften sind Dateien, die geladen werden müssen, bevor Text erscheint. Drei Dinge machen den Unterschied.

Selbst hosten. Schriften vom eigenen Server statt von einem fremden Netzwerk laden. Das ist schneller und erspart dir eine Datenschutzfrage gleich mit, wie das geht, steht hier.

Variable Fonts nutzen, wo sie passen. Eine Datei enthält dabei alle Schnitte einer Familie und lässt sich stufenlos einstellen. Sie werden gern als Zukunft verkauft, sind aber längst Gegenwart: Safari unterstützt sie seit 2017, Chrome, Firefox und Edge seit 2018, laut caniuse.com liegt die globale Unterstützung bei rund 96 Prozent (Stand 08.08.2026). Der Tempovorteil gilt allerdings nur, wenn du wirklich mehrere Schnitte brauchst. Für zwei Schnitte sind zwei kleine Dateien schneller als eine große.

Anzeigeverhalten festlegen. Ohne Vorgabe bleibt Text in manchen Browsern unsichtbar, bis die Schrift geladen ist. Mit font-display: swap erscheint sofort eine Systemschrift, die dann getauscht wird. Kurzes Umspringen ist unschöner als perfekt, aber besser als eine leere Seite.

@font-face {
  font-family: "Meine Schrift";
  src: url("/fonts/meine-schrift.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

Lizenzen

Die Lizenz, die viele übersehen

Eine gekaufte Schrift ist nicht automatisch eine Schrift, die du auf deine Website legen darfst. Schriftlizenzen sind nach Nutzungsart aufgeteilt: Die Desktop-Lizenz erlaubt das Setzen in Programmen auf deinem Rechner. Für die Einbindung als Webfont braucht es eine eigene Lizenz, die häufig nach Seitenaufrufen gestaffelt ist. Wer die Datei aus dem Schriftordner auf den Server kopiert, hat unter Umständen genau das nicht.

Der unkomplizierte Weg sind freie Lizenzen. Die meisten Schriften bei Google Fonts stehen unter der SIL Open Font License, die Web-Einbindung ausdrücklich erlaubt. Bei kommerziellen Foundries lohnt der Blick in den Lizenztext, bevor die Schrift ins Design wandert und nicht danach.

Mein praktischer Rat: Kläre die Lizenzfrage, solange die Auswahl noch offen ist. Eine Schrift zu tauschen, wenn Layout und Abstände darauf aufgebaut sind, ist deutlich mehr Arbeit, als man vermutet.

Marke

Schrift als Markenwerkzeug

Die Wahl einer Schrift ist eine Markenentscheidung, keine Geschmacksfrage des Tages. Jede Schrift transportiert Persönlichkeit und Tonalität, oft unbewusst. Eine Kanzlei, die mit Comic Sans kommuniziert, verliert sofort an Glaubwürdigkeit, und zwar nicht wegen der Schrift, sondern wegen der Diskrepanz zum Anlass.

Corporate Fonts, also eigens lizenzierte oder entwickelte Schriftfamilien, gehen einen Schritt weiter: Sie machen Typografie zu einem Erkennungsmerkmal, das auf keiner anderen Website steht. Für die meisten kleinen Unternehmen ist das überdimensioniert. Eine gut gewählte freie Schrift, konsequent durchgehalten, wirkt eigenständiger als eine teure Schrift, die auf jeder Unterseite anders eingesetzt wird.

Und weil es regelmäßig gefragt wird: Barrierefreiheit ist kein Sonderfall der Schriftwahl, sondern der Normalfall. Ausreichender Kontrast, keine zu dünnen Schnitte im Fließtext, keine reine Großschreibung über mehrere Zeilen. Das nützt allen, nicht nur denen, die schlechter sehen.

Fazit

Typografie ist keine Verzierung am Ende des Designprozesses, sondern eine der ersten Entscheidungen. Zwei Schriften, genug Schnitte, geklärte Lizenz, sauber geladen: Damit steht das Fundament, und der Rest ist Feinarbeit an Größen und Abständen.

Wenn du dir diese Auswahl nicht selbst zusammensuchen willst: So baue ich Websites, Schriftwahl inklusive.