DE

Schriftarten kombinieren – Schriftpaare für Überschrift und Text

Schriftarten kombinieren: Wählen Sie ein Schriftpaar und sehen Sie sofort, wie Überschrift und Fließtext zusammen wirken – auf Wunsch mit eigenem Text. Alle Paare nutzen nur vorinstallierte Systemschriften: kein Nachladen, keine Anfrage an Google oder andere Server. Zu jedem Paar gibt es die Begründung, die gemessene x-Höhe und die Verfügbarkeit je Betriebssystem.

Quelle: Microsoft Learn – Font List Windows 11 (Stand 21.04.2022, abgerufen 27.09.2026). Stand: .

px
Die Überschrift wird 1,8-mal so groß dargestellt.
Meine ToolboxIhre Eingaben werden nur in diesem Browser gespeichert.

Vorschau

Die Kunst der guten Überschrift

Gute Typografie fällt nicht auf. Sie führt das Auge ruhig durch den Text, setzt klare Hierarchien und lässt den Inhalt wirken – auf dem Smartphone genauso wie auf dem großen Monitor.

Ihr Text bleibt in diesem Browserfenster – er wird nicht gespeichert, nicht gesendet und nicht in die Adresszeile geschrieben.

CSS zum Kopieren

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.2;
}
body {
  font-family: Verdana, Tahoma, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

Alle Schriftpaare

Ergebnis

Schriftpaar
Georgia + Verdana
Warum es passt
Klassischer Kontrast aus Serifen- und serifenloser Schrift: Georgia für die Überschrift, Verdana für den Text. Beide hat Matthew Carter für den Bildschirm entworfen, daher passen Proportionen und Rhythmus. Verdana hat eine sehr große x-Höhe und läuft breit – Fließtext lieber 1 px kleiner wählen.
x-Höhe (gemessen)
Georgia: 0,481 em · Verdana: 0,545 em – der Fließtext wirkt bei gleicher Schriftgröße rund 13 % größer
Verfügbarkeit je Betriebssystem
SystemÜberschriftFließtext
Windows 10/11GeorgiaVerdana
macOSGeorgiaVerdana
iPhone/iPadGeorgiaVerdana
AndroidNoto Serif (Ersatz)Roboto (Ersatz)

So wird gerechnet

So kombinieren Sie Schriftarten

Zwei Schriften passen zusammen, wenn sie sich deutlich unterscheiden, aber ähnlich gebaut sind. Der sicherste Weg ist der Kontrast aus Serifenschrift und serifenloser Schrift: Eine Schrift trägt die Überschriften, die andere den Fließtext. Zwei ähnliche Serifen- oder zwei ähnliche serifenlose Schriften wirken dagegen schnell wie ein Versehen.

Schriftarten kombinieren – so geht's

  1. Ein Schriftpaar aus der Liste wählen, etwa Georgia + Verdana.
  2. Die Schriftgröße für den Fließtext einstellen (12–28 px) und auf Wunsch eigenen Text in der Vorschau testen.
  3. Begründung, x-Höhe und Verfügbarkeit je Betriebssystem prüfen und das CSS kopieren.

Beispiel: Georgia + Verdana bei 18 px Fließtext: Die Überschrift erscheint 1,8-mal so groß, also 1,8 × 18 = 32,4 px. Die x-Höhe liegt bei 0,481 em (Georgia) und 0,545 em (Verdana) – der Fließtext wirkt bei gleicher Schriftgröße rund 13 % größer.

Ebenso wichtig ist die x-Höhe – die Höhe der Kleinbuchstaben im Verhältnis zur Schriftgröße. Schriften mit großer x-Höhe (Verdana: 0,545 em) wirken bei gleicher Größe deutlich größer als Schriften mit kleiner x-Höhe (Calibri: 0,464 em). Liegen die x-Höhen eines Paars weit auseinander, gleichen Sie das über die Schriftgröße aus. Die Werte im Rechner stammen aus der OS/2-Tabelle der Windows-11-Schriftdateien.

Warum nur Systemschriften?

Systemschriften sind bereits auf dem Gerät installiert: Die Seite lädt schneller, der Text springt beim Laden nicht um, und es wird keine Anfrage an fremde Server gestellt. Werden Webfonts direkt von Google-Servern geladen, überträgt der Browser die IP-Adresse der Besucher – das Landgericht München I hat das 2022 als Datenschutzverstoß gewertet (Urteil vom 20.01.2022, Az. 3 O 17493/20). Wer eigene Webfonts nutzen will, sollte sie deshalb selbst hosten.

Font-Stack: warum mehrere Namen?

Keine Schrift ist auf allen Systemen vorhanden. Im CSS stehen deshalb mehrere Schriften hintereinander (Font-Stack); der Browser nimmt die erste, die installiert ist, und am Ende greift eine generische Familie wie serif oder sans-serif. Die Tabelle zeigt, welche Schrift auf Windows, macOS, iPhone/iPad und Android tatsächlich erscheint – laut den Schriftlisten von Microsoft und Apple sowie der Android-Schriftkonfiguration (abgerufen am 27.09.2026). Android kennt Georgia oder Verdana nicht und zeigt stattdessen Noto Serif bzw. Roboto; Linux-Distributionen bringen je nach Installation unterschiedliche Schriften mit.

Tipps für gut lesbaren Fließtext

Rund ums Webdesign: Farben für Ihr Layout liefert der Farbpalette-Generator, Farbwerte wandelt der Farbumrechner um, und Hintergründe gestalten Sie mit dem CSS-Verlauf-Generator.

Häufige Fragen

Welche Schriftarten passen gut zusammen?

Bewährt sind Paare aus einer Serifenschrift und einer serifenlosen Schrift, etwa Georgia mit Verdana, Palatino mit der Systemschrift oder Cambria mit Calibri. Wichtig sind ein klarer Kontrast und ähnliche x-Höhen.

Wie viele Schriftarten sollte eine Website haben?

Höchstens zwei: eine für Überschriften, eine für den Text. Eine dritte, etwa eine Monospace-Schrift für Code, nur wenn sie eine eigene Aufgabe hat.

Sind Georgia und Verdana auf allen Geräten verfügbar?

Auf Windows, macOS und iOS ja. Android bringt sie nicht mit und zeigt Noto Serif bzw. Roboto – deshalb gehört an das Ende jedes Font-Stacks eine generische Familie wie serif oder sans-serif.

Was ist die x-Höhe?

Die Höhe eines kleinen x im Verhältnis zur Schriftgröße. Eine große x-Höhe macht Text bei gleicher Größe besser lesbar, braucht aber mehr Zeilenabstand.

Darf ich Google Fonts einfach einbinden?

Direkt von Google-Servern geladen, wird die IP-Adresse übertragen; das LG München I hat das 2022 als Verstoß gegen die DSGVO gewertet. Sicherer: Systemschriften nutzen oder freie Schriften selbst hosten.

Wird mein Vorschautext gespeichert?

Nein. Eigene Überschriften und Texte bleiben nur in diesem Browserfenster. Gemerkt werden lediglich das gewählte Schriftpaar und die Schriftgröße.

Quellen und Rechtsgrundlagen

Stand: · So prüfen wir

Passende Werkzeuge