Schriftgröße auf dem Handy: Warum Fließtext nicht 12px ist und welche Größen du nimmst
Fließtext auf dem Handy ist 17 pt unter iOS und 16 sp unter Android. Zwölf ist eine Bildunterschrift und 11 ist die Untergrenze. Setze Eingabefelder auf 16 px, damit Safari nicht zoomt, und lass Text wachsen. Alle 11 iOS-Größen inklusive.
Fließtext auf dem Handy ist nicht 12 px. Apples Standardgröße für Body ist 17 Punkt und die von Material 16. Zwölf ist eine Bildunterschrift, und ein Screen voller Bildunterschriften ist ein Screen, bei dem Leute die Augen zusammenkneifen. Unten findest du die vier Regeln und alle iOS-Größen zum Abschreiben.
Warum 12 px immer wieder auftaucht
Mockups werden auf einem großen Monitor gezeichnet, das Design auf Fenstergröße gezoomt. Aus dieser Distanz wirkt 12 aufgeräumt und 17 laut. Also werden Größen danach gewählt, wie ordentlich sie im Frame aussehen, und der Frame ist nicht das Handy.
Dann wird das Handy auf Armlänge gehalten, im Sonnenlicht, von jemandem, der läuft. Dieselben 12 px sind jetzt klein, blendend und wackelig. Ordentlich in der Datei, anstrengend in der Hand.
Die Lösung: Hör auf, Größen nach Augenmaß zu wählen. Beide Plattformen veröffentlichen eine Typografie-Skala, und deren Größen wurden auf echten Geräten bei echten Leseabständen getestet. Nimm deine Zahlen von dort.
Fix 1: Fließtext mit 17
Fließtext mit 12 pt
17 pt, iOS Body
Auf dem iPhone ist der Standardstil Body 17 pt mit 22 pt Zeilenhöhe. Auf Android ist Materials Body Large 16 sp mit 24 sp Zeilenhöhe. Im Web ist der Browser-Standard 16 px. Drei Plattformen, drei verschiedene Einheiten und eine Antwort: Fließtext lebt bei 16 bis 17.
Längere Texte verlangen von dieser Regel am meisten. Ein einzeiliges Label darf klein sein und überlebt das. Ein Absatz, den jemand bis zum Ende lesen muss, nicht. Steht ein Absatz auf dem Screen, gehört er in Body-Größe, und die zusätzliche Zeile ist der Preis dafür, gelesen zu werden.
Fix 2: nichts unter 11
Zwölf ist nicht verboten. Es hat einen Namen: Caption 1. Gedacht ist es für das Kleingedruckte unter einem Foto oder einen Zeitstempel, also Text, den man übersehen darf. Fließtext ist das nicht.
Elf ist die Untergrenze. Caption 2 unter iOS ist 11 pt und der kleinste Textstil, den Apple ausliefert. Materials kleinster Stil, Label Small, ist ebenfalls 11 sp. Wenn beide Plattformen bei derselben Zahl aufhören, setzt ein Design darunter Text, den kein System setzen würde.
Nutze die kleinen Stile nur für Nebeninformationen: Zeitstempel, Einheiten, Rechtstexte, das winzige Label unter einem Tab-Icon. Ist es eine Information, auf die jemand reagieren muss, ist es keine Caption.
Fix 3: Eingabefelder mit 16
Eingabefeld mit 15 px
Eingabefeld mit 16 px
Das ist eine Web-Regel, und sie überrascht Leute, weil am Feld nichts falsch aussieht. iOS Safari zoomt in ein Texteingabefeld, wenn dessen Schriftgröße kleiner als 16 px ist. Bei 16 px oder mehr nicht. Der Zoom macht sich nicht von selbst rückgängig, also muss die Person erst wieder herauspinchen, bevor sie den Rest des Formulars sieht.
Die Lösung ist eine Zeile CSS, und sie sollte nicht „Zoomen im Viewport-Tag abschalten“ lauten. Zoom zu blockieren nimmt Menschen, die ihn brauchen, ein Werkzeug weg. Setze stattdessen die Schriftgröße der Eingabefelder.
Fix 4: lass es wachsen
Feste Höhe
Zeilen umbrechen
Deine 17 ist ein Startpunkt, kein Versprechen. Leute erhöhen ihre Textgröße in den Einstellungen, und iOS lässt sie weit über den Standard hinaus in die Bedienungshilfen-Größen gehen, in denen Body bei der ersten Stufe 28 pt und bei der größten 53 pt erreicht. Android-Nutzer tun dasselbe mit der Schriftskalierung.
Teste deine Screens in den größten Stufen, bevor sie live gehen. Achte auf drei Dinge: Text, der mit Auslassungspunkten abgeschnitten wird, Text, der seinen Nachbarn überlappt, und ein Button-Label, das nicht mehr passt. Das Heilmittel ist jedes Mal dasselbe. Lass die Zeile umbrechen, lass die Zeile wachsen und hör auf, Höhen festzunageln.
Im Web heißt dieselbe Idee, Text in rem statt in px zu setzen, damit er der Texteinstellung des Browsers folgt. WCAG verlangt, dass Text bis auf 200 Prozent vergrößert werden kann, ohne dass Inhalt oder Funktion verloren gehen.
Alle 11 iOS-Textgrößen
| Stil | Größe / Zeilenhöhe (pt) | Verwende ihn für |
|---|---|---|
| Large Title | 34 / 41 | Den Kopf eines Hauptscreens |
| Title 1 | 28 / 34 | Bereichs-Screens |
| Title 2 | 22 / 28 | Unterbereiche |
| Title 3 | 20 / 25 | Karten- und Gruppentitel |
| Headline | 17 / 22 | Zeilentitel, semibold |
| Body | 17 / 22 | Absätze und Lesetext |
| Callout | 16 / 21 | Ergänzenden Text |
| Subhead | 15 / 20 | Nebenzeilen unter einem Titel |
| Footnote | 13 / 18 | Notizen und Metadaten |
| Caption 1 | 12 / 16 | Kleingedrucktes |
| Caption 2 | 11 / 13 | Die Untergrenze |
Das sind die Größen bei der iOS-Standardeinstellung Large. Es gibt aus gutem Grund nur elf: Eine kurze Skala behält man leicht im Kopf und hält sie leicht über alle Screens hinweg konsistent.
Androids Entsprechungen sind Body Large mit 16 / 24 und Label Small mit 11 / 16 in Material 3.
Gib das deinem Entwickler
:root {
--text-body: 1.0625rem; /* 17 px, iOS Body */
--text-callout: 1rem;
--text-footnote: 0.8125rem;
--text-floor: 0.6875rem; /* 11 px, never lower */
}
body { font-size: var(--text-body); line-height: 1.3; }
/* 16 px or more stops iPhone Safari zooming into the field */
input, select, textarea { font-size: 1rem; }
Verwende unter iOS die System-Textstile (.body, .footnote), damit Dynamic Type gratis funktioniert. Setze unter Android Text in sp, nicht in dp, damit er der Schriftskalierung folgt.
FAQ
Was ist die minimale Schriftgröße für eine mobile App?
11, auf beiden Plattformen. Caption 2 unter iOS ist 11 pt und Label Small in Material 3 ist 11 sp. Alles, was Leute lesen müssen, um zu handeln, sollte deutlich größer sein.
Welche Schriftgröße sollte Fließtext auf dem iPhone haben?
17 pt. Das ist der Standard des iOS-Stils Body, mit einer Zeilenhöhe von 22 pt, und er skaliert mit, wenn die Person ihre Textgröße erhöht.
Welche Schriftgröße sollte Fließtext auf Android haben?
16 sp. Das ist Body Large in Material 3, mit einer Zeilenhöhe von 24 sp.
Ist 12px zu klein für Fließtext?
Für Fließtext ja. Es gehört zum iOS-Stil Caption 1, der für Kleingedrucktes gedacht ist. Lesetext sollte 16 bis 17 haben.
Warum zoomt meine Seite heran, wenn ich auf dem iPhone in ein Eingabefeld tippe?
iOS Safari zoomt in Texteingaben, deren Schriftgröße kleiner als 16 px ist. Setze das Eingabefeld auf 16 px oder größer, dann hört es auf.
Soll ich Text mit der Systemeinstellung skalieren lassen?
Ja. Leute erhöhen ihre Textgröße in den Einstellungen aus guten Gründen, also gestalte Zeilen und Buttons so, dass sie umbrechen und wachsen, statt Text abzuschneiden.
Quellen
- Apple Human Interface Guidelines, Typography: die iOS-Textstile in der Standardgröße Large, in Punkt. Body 17/22, Callout 16/21, Subhead 15/20, Footnote 13/18, Caption 1 12/16, Caption 2 11/13, Large Title 34/41, Title 1 28/34, Title 2 22/28, Title 3 20/25, Headline 17/22. Body ist in der ersten Bedienungshilfen-Größe 28/34 und in der größten 53/62.
- Material Design 3, Typography: Body Large 16/24 sp und Label Small 11/16 sp als kleinster Stil.
- CSS-Tricks, 16px or Larger Text Prevents iOS Form Zoom (Chris Coyier, 2021): iOS Safari zoomt in Eingabefelder mit 15 px oder weniger, nicht bei 16 px oder mehr.
- WCAG 2, 1.4.4 Resize Text: Text lässt sich bis auf 200 Prozent vergrößern, ohne dass Inhalt oder Funktion verloren gehen.
- Die Muster auf dieser Seite sind in Inter mit Apples Größen gesetzt, nicht in Apples eigener SF Pro. Der Text der Beispielkarte und der Beispielzeile ist für diese Seite erfunden.
- Zuerst veröffentlicht als Karussell auf UX Brainy.
Want type that stays readable on every phone and every text size setting? Our team designs and builds mobile UI with the type scale decided once.
Get Started
