Schriftgrößenskalen für Mobil und Desktop

Eine 51px große h1 verdient sich ihre Größe auf einer Desktop-Seite: Sie verankert das Layout, macht die Hierarchie auf einen Blick klar und lässt trotzdem noch den ersten Absatz im Blickfeld. Schick dieselbe Überschrift auf ein 375px breites Smartphone, und sie hört auf zu verankern und fängt an zu verschlingen — vier Wörter brechen auf drei Zeilen um, der einleitende Absatz rutscht aus dem sichtbaren Bereich, und der Leser trifft auf eine Wand aus Display-Schrift, bevor überhaupt echter Inhalt kommt.

Eine responsive Schriftgrößenskala löst das, indem sie die Spitze abflacht, nicht indem sie alles verkleinert: Der Fließtext bleibt auf jedem Bildschirm bei 16px, und das Verhältnis sinkt auf kleinen Bildschirmen — zum Beispiel von 1,333 auf dem Desktop auf 1,2 auf dem Mobilgerät, was jene 51px große h1 auf etwa 33px bringt, während sich der Fließtext um keinen Pixel bewegt. Die beiden Skalen teilen sich eine Basis, einen Satz Stufen und einen Satz Rollennamen; nur das Verhältnis unterscheidet sich.

Dieser Artikel behandelt speziell die Entscheidung zwischen Mobil und Desktop; wie Skalen und Verhältnisse überhaupt funktionieren, erfährst du zuerst in unserem Leitfaden zur Schriftgrößenskala.

Warum kann die Desktop-Skala nicht einfach schrumpfen?

Weil das untere Ende der Skala festgenagelt ist. Um eine 51px große h1 durch gleichmäßiges Skalieren auf 33px zu bringen, müsstest du alles mit etwa 0,65 multiplizieren — womit aus 16px Fließtext ungefähr 10px werden. Und der Fließtext ist die eine Größe, die auf dem Mobilgerät keinen Spielraum hat, aus zwei Gründen:

• Lesbarkeit. Text auf dem Smartphone wird auf Armlänge gelesen, oft in Bewegung und bei Tageslicht. 16px ist eine weit verbreitete Untergrenze für längeres Lesen auf dem Mobilgerät; mobile Schriftgrößen darunter zwingen viele Leser zum Pinch-Zoom.
• Ein praktischer Stolperstein, den man beim Namen kennen sollte. Safari auf iOS zoomt die ganze Seite, wenn der Nutzer ein Formularfeld fokussiert, dessen Schriftgröße unter 16px liegt. Ein langer Schwanz von „Warum springt meine Seite, wenn ich das E-Mail-Feld antippe“-Fehlermeldungen ist genau dieses Verhalten; hältst du Eingabefelder bei 16px, vermeidest du es vollständig.

Die Einschränkung ist also asymmetrisch: Die Spitze der Skala hat Spielraum, das untere Ende nicht. Deshalb ist die Anpassung fürs Mobilgerät ein Abflachen.

Es gibt auch einen perzeptiven Grund, warum Abflachen funktioniert und nicht bloß Hineinpassen: Hierarchie wird relativ zu ihrem Rahmen beurteilt, nicht in absoluten Pixeln. Auf einer 1440px breiten Fläche muss eine h1 ihre Umgebung überragen, um sie zu ordnen; auf einer 375px breiten Fläche konkurriert sie mit weit weniger, und ungefähr die doppelte Fließtextgröße wirkt mit vergleichbarer Autorität wie die dreifache Fließtextgröße auf dem Desktop. Eine mobile Typografie-Skala ist flacher, nicht kleiner — dieselbe wahrgenommene Hierarchie, neu abgeleitet für einen kleineren Rahmen.

Was ändert sich auf dem Mobilgerät — die Basis oder das Verhältnis?

Behalte die Basis, senke das Verhältnis. Die Basis bleibt bei 16px, weil sie der festgenagelte Punkt ist; das Verhältnis sinkt von 1,333 auf etwa 1,2. Jede Rolle behält ihre Stufennummer, und jede Stufe wird neu berechnet.

Ein gleichwertiger Schritt ist, ein Verhältnis beizubehalten und die Überschriftsebenen auf niedrigere Stufen zu begrenzen: Die mobile h1 nutzt Stufe 3 (38px) statt Stufe 4 (51px), und jede Ebene darunter zieht nach. Das verwendet Desktop-Größen wieder, statt neue zu berechnen, was manche Teams für ein kleineres Größeninventar bevorzugen — beachte aber die Untergrenze: Verschiebst du sechs Rollen auf einer fünfstufigen Leiter um eine Stufe nach unten, landet die niedrigste Überschrift auf Fließtextgröße, weshalb Begrenzen meist mit dem Zusammenlegen der niedrigsten Überschriftsrollen einhergeht. Beide Ansätze flachen die Spitze ab; das durchgerechnete Beispiel unten nutzt die Verhältnis-Senkung, die alle sechs Rollen unterscheidbar hält.

Wie sehen dieselben sechs Rollen bei beiden Verhältnissen aus?

Basis 16px in beiden Spalten, Größen auf ganze Pixel gerundet:

Zwei Details lohnen einen zweiten Blick. Die Spannweite schrumpft von 3,2× Fließtextgröße (51/16) auf etwa 2,1× (33/16) — die Hierarchie behält ihre Ordnung, senkt aber die Stimme. Und die caption-Zeile wandert nach oben: 16 ÷ 1,2 ergibt 13,3, also wird der kleinste Text auf dem kleinen Bildschirm etwas größer. Das Abflachen zieht beide Enden zur Basis hin, und genau das will ein Smartphone — eine 12px-caption lässt sich auf Armlänge schwerer verteidigen als eine mit 13px.

Öffne die mobile Skala im Scale Composer — Basis 16, Verhältnis 1,2 — und zieh das Verhältnis hoch Richtung 1,333, um zu beobachten, wie die Desktop-Hierarchie Stufe für Stufe wieder auftaucht.

Wie wechselst du die Skalen an einem Breakpoint?

Zwei Skalendefinitionen, ein Satz Namen. Der Rollenname ist die stabile API; der Wert dahinter wird am Breakpoint ausgetauscht. In CSS Custom Properties:

:root {
  --text-h1: 2.07rem;   /* ≈ 33px — mobile Skala, Verhältnis 1.2 */
  --text-h2: 1.73rem;   /* ≈ 28px */
}

@media (min-width: 768px) {
  :root {
    --text-h1: 3.16rem; /* ≈ 51px — desktop Skala, Verhältnis 1.333 */
    --text-h2: 2.37rem; /* ≈ 38px */
  }
}

Elemente referenzieren var(--text-h1) und wissen nie, welche Skala gerade aktiv ist — die Komponenten ändern sich nicht, die Media Query übernimmt das Umschalten. Die @media-Mechanik ist auf MDN dokumentiert; die verbleibende Design-Entscheidung ist, wo der Breakpoint sitzt, und ein einzelner Wechsel irgendwo im Bereich 600–900px ist ein üblicher Ausgangspunkt.

Tokens sind das, was das Zwei-Skalen-Setup sauber statt clever macht. Der Scale Composer exportiert jede Skala als DTCG-Tokens, CSS Custom Properties, einen Tailwind-v4-@theme-Block oder Figma Variables — die Rollennamen bleiben über beide Exporte hinweg identisch, sodass sich die mobile und die Desktop-Definition nur in ihren Werten unterscheiden.

Ist ein harter Wechsel die einzige Option?

Nein — fluide Schrift ist die sanfte Alternative: Statt zweier statischer Skalen und eines Breakpoints interpolieren die Größen kontinuierlich mit der Viewport-Breite, sodass die h1 allmählich von 33px auf 51px wandert, statt zu springen. Die Kompromisse sind wirklich andere — sanftere Übergänge, aber es gibt keine einzelne Antwort mehr auf „Welche Größe hat die h1?“ — und diese Seite behandelt fluide versus Breakpoint-Typografie gesondert. Für ein erstes System sind zwei statische Skalen der einfachere Ausgangspunkt: leichter zu durchdenken, zu testen und an ein Team zu übergeben.

Finde dein eigenes mobiles Verhältnis

Die Zahlen oben sind ein Ausgangspunkt, kein Gesetz — ein textdichtes Produkt flacht vielleicht weniger ab (sagen wir 1,25), eine redaktionelle Website mehr. Der Weg, deinen Wert zu finden, ist, dem Kollaps zuzusehen: Zieh das Verhältnis von 1,333 Richtung 1,2 herunter und merke dir, wo jede Überschrift aufhört, gegen den Bildschirm anzukämpfen, ihn aber noch immer ordnet, während der Fließtext den ganzen Weg über bei 16px verankert bleibt. Starte von der Desktop-Version derselben sechs Rollen im Scale Composer.