Typografie anwenden

Hierarchie wird durch Unterschiede in Schriftstärke, Größe, Zeilenhöhe und Buchstabenabstand vermittelt. Die aktualisierte Typografie-Skala unterteilt Stile in sechs Rollen, deren Namen ihren Zweck beschreiben: „display“ (Überschrift), „title“ (Titel), „label“ (Label), „body“ (Textkörper), „numeral“ (Ziffer) und „arc“ (Bogen). Die neuen Rollen sind unabhängig von der Bildschirmgröße und lassen sich daher einfacher für verschiedene Anwendungsfälle einsetzen.

Anzeigestile

Display wird für große, kurze Textstrings verwendet, um wichtige Informationen, wichtige Messwerte, Vertrauen oder ausdrucksstarke Markenmomente anzuzeigen.

• DisplayLarge ist die größte Überschrift. Displays sind der größte Text auf dem Bildschirm und für kurze, gut lesbare Hero-Informationen, wichtige Messwerte, Vertrauens- oder ausdrucksstarke Markenmomente reserviert, die von einer prominenten Skalierung und einem prominenten Stil profitieren.
• DisplayMedium ist die zweitgrößte Überschrift. Displays sind der größte Text auf dem Bildschirm und sind für kurze, gut lesbare Hero-Informationen, wichtige Messwerte, Vertrauens- oder ausdrucksstarke Markenmomente reserviert, die von einer prominenten Skalierung und einem auffälligen Stil profitieren.
• DisplaySmall ist die kleinste Überschrift. Displays sind der größte Text auf dem Bildschirm und für kurze, gut lesbare Hero-Informationen, wichtige Messwerte, Vertrauens- oder ausdrucksstarke Markenmomente reserviert, die von einer prominenten Skalierung und einem prominenten Stil profitieren.

Überschrift

Der Titel ist hierarchischer Text, der als Orientierungshilfe dient, z. B. als Seiten-, Abschnitts- oder Unterabschnittstitel (im Fall von „TitleSmall“).

• TitleLarge ist der größte Titel. Titel sind kleiner als Displays. Sie sind in der Regel für Text mit mittlerer Betonung reserviert, der kürzer ist, und werden nicht für interaktive Komponenten, sondern für Seitenüberschriften oder Unterüberschriften empfohlen.
• TitleMedium ist der Titel des Mediums. Titel sind kleiner als Displays. Sie sind in der Regel für Text mit mittlerer Betonung reserviert, der kürzer ist, und werden nicht für interaktive Komponenten, sondern für Seitenüberschriften oder Unterüberschriften empfohlen.
• TitleSmall ist der kleinste Titel. Titel sind kleiner als Displays. Sie sind in der Regel für Text mit mittlerer Betonung reserviert, der kürzer ist, und werden nicht für interaktive Komponenten, sondern für Seitenüberschriften oder Unterüberschriften empfohlen.

Label

Das Label wird für Text auf Komponentenebene verwendet, der eine Aktion beschreibt, die bei Interaktion ausgeführt wird. Die häufigste und am weitesten verbreitete Anwendung für das Label ist Text, der in eine Schaltfläche eingebettet ist.

• LabelLarge ist das größte Label. Labels werden verwendet, um wichtigen Text wie das Label auf Titelschaltflächen anzuzeigen. Sie werden auf interaktive Komponenten angewendet.
• LabelMedium ist das mittlere Label und das am häufigsten verwendete. Labels werden zum Anzeigen von Texten wie dem primären Label auf Schaltflächen verwendet und auf interaktive Komponenten angewendet.
• LabelSmall ist das kleine Label. Labels werden verwendet, um Texte wie sekundäre Labels auf Schaltflächen, Labels auf kompakten Schaltflächen und interaktive Komponenten anzuzeigen.

Text

Der Textkörper ist für Inhaltstext wie Absätze, Text in komplexen Datenvisualisierungen, Zeitstempel und Metadaten reserviert.

• BodyLarge ist der größte Textkörper. Body-Texte werden in der Regel für lange Texte verwendet, da sie sich gut für kleine Textgrößen eignen. Für längere Textabschnitte wird eine Serif- oder Sans-Serif-Schriftart empfohlen.
• BodyMedium ist der zweitgrößte Textkörper. Body-Texte werden in der Regel für lange Texte verwendet, da sie sich gut für kleine Textgrößen eignen. Für längere Textabschnitte wird eine Serif- oder Sans-Serif-Schriftart empfohlen.
• BodySmall ist der drittgrößte Textkörper. Body-Texte werden in der Regel für lange Texte verwendet, da sie sich gut für kleine Textgrößen eignen. Für längere Textabschnitte wird eine Serif- oder Sans-Serif-Schriftart empfohlen.
• BodyExtraSmall ist der kleinste Textkörper. Body-Texte werden in der Regel für lange Texte verwendet, da sie sich gut für kleine Textgrößen eignen. Für längere Textabschnitte wird eine Serif- oder Sans-Serif-Schriftart empfohlen.

Ziffern

Ziffern-Textstile werden für numerische Ziffern verwendet, die in der Regel auf einige wenige Zeichen begrenzt sind. Kann bei größeren Displays ausdrucksstärkere Eigenschaften annehmen. Bietet Flexibilität, die Breitenachse mit minimalen Lokalisierungs- und Schriftartskalierungsproblemen zu erweitern.

• NumeralsExtraLarge ist die größte Rolle für Ziffern. Ziffern verwenden standardmäßig tabellarische Abstände. Sie heben auf einen Blick erfassbare Zahlen hervor, die auf zwei oder drei Zeichen begrenzt sind und für die keine Lokalisierung erforderlich ist, z. B. auf dem Ladebildschirm oder in der Zeitauswahl.
• NumeralsLarge ist die zweitgrößte Rolle für Ziffern. Ziffern verwenden standardmäßig Tabellenabstände. Es handelt sich um lange Zahlenfolgen, die auf großen Displays für die Anzeige von Zeitangaben verwendet werden, bei denen keine Lokalisierung erforderlich ist, z. B. bei einem Timer-Countdown oder einer Zeitauswahl.
• NumeralsMedium ist die drittgrößte Rolle für Ziffern. Ziffern verwenden standardmäßig Tabellenabstände. Es handelt sich um mittelgroße Zahlen, die auf kurze Ziffernfolgen beschränkt sind und für die keine Lokalisierung erforderlich ist, z. B. eine Schrittzahl oder eine Zeitauswahl.
• NumeralsSmall ist die viertgrößte Rolle für Ziffern. Ziffern verwenden standardmäßig Tabellenabstände. Sie sind für Zahlen vorgesehen, die auf kleinerer Ebene hervorgehoben werden müssen, wo keine Lokalisierung erforderlich ist, z. B. bei Datums- und Zeitselektoren.
• NumeralsExtraSmall ist die kleinste Rolle für Ziffern. Ziffern verwenden standardmäßig tabellarische Abstände. Sie sind für Zahlen vorgesehen, die längere Ziffernfolgen enthalten müssen, für die keine Lokalisierung erforderlich ist, z. B. Messwerte während des Trainings.

Bogen

Der Header-Text für den Bogen wird für gekrümmten Text verwendet, der die Wegweiser auf der Benutzeroberfläche bildet, z. B. Zeitangaben und gekrümmte Labels. Angepasste Schriftachsen, die speziell für die Optimierung von Text auf einer Kurve entwickelt wurden und die unterschiedlichen Abstände zwischen Zeichen berücksichtigen, wenn sie oben im Vergleich zum unteren Rand eines gekrümmten Bildschirms positioniert werden.

Oben

• ArcLarge wird für Überschriften und Titel von Bögen verwendet. „Arc“ ist für Text entlang eines gekrümmten Pfads auf dem Bildschirm vorgesehen und für kurze Überschriften ganz oben oder unten auf dem Bildschirm reserviert, z. B. für Bestätigungs-Overlays.
• ArcMedium wird für Überschriften und Titel von Bögen verwendet. „Arc“ ist für Text entlang eines gekrümmten Pfads auf dem Bildschirm vorgesehen und für kurze Überschriften ganz oben oder unten auf dem Bildschirm reserviert, z. B. für Seitentitel.
• ArcSmall ist für kurze Textbögen gedacht. „Arc“ ist für Text entlang eines gekrümmten Pfads auf dem Bildschirm vorgesehen und für kurze gekrümmte Textstrings oben auf dem Bildschirm reserviert, z. B. für die Uhrzeit.

Unten

• ArcLarge wird für Überschriften und Titel von Bögen verwendet. „Arc“ ist für Text entlang eines gekrümmten Pfads auf dem Bildschirm vorgesehen und für kurze Überschriften ganz oben oder unten auf dem Bildschirm reserviert, z. B. für Bestätigungs-Overlays.
• ArcMedium wird für Überschriften und Titel von Bögen verwendet. „Arc“ ist für Text entlang eines gekrümmten Pfads auf dem Bildschirm vorgesehen und für kurze Überschriften ganz oben oder unten auf dem Bildschirm reserviert, z. B. für Seitentitel.
• ArcSmall ist für kurze Textbögen gedacht. „Arc“ ist für Text vorgesehen, der entlang eines gekrümmten Pfads auf dem Display angezeigt wird. Diese Option ist für kurze gekrümmte Textstrings am unteren Bildschirmrand reserviert, z. B. für einen Call-to-Action.

Satz

Beim vertikalen Schriftsatz werden Abstände, Begrenzungsrahmen und Grundlinien verwendet, um die Lesbarkeit von Text in jeder Größe zu gewährleisten. Berücksichtigen Sie bei Entscheidungen zu Schriftsatz, Textanpassung, Dichte und Verwendung von Text in adaptiven Layouts die technischen Aspekte und die Konventionen Ihrer Plattform.

Baseline verwenden

Die Grundlinie ist die unsichtbare Linie, auf der eine Textzeile ruht. Im Material Design ist die Baseline eine wichtige Spezifikation zum Messen des vertikalen Abstands zwischen Text und einem Element.

Eine Textzeile liegt auf der unsichtbaren Grundlinie.

Lesbarkeit prüfen

Führen Sie diese Prüfungen durch, um die Lesbarkeit der in Ihrer App angezeigten Schriftarten zu verbessern.

Tabellarische und monospaced-Zahlen

Verwenden Sie tabellarische Zahlen (auch als nichtproportionale Zahlen bezeichnet) anstelle von proportionalen Ziffern an Stellen, an denen sich Werte häufig ändern oder animiert werden oder sich schnell ändern, z. B. bei Countdown-Timern, Auswahlfeldern oder laufenden Fitnessmesswerten.

Verwenden Sie Tabellenzahlen mit fester Breite, damit die Werte optisch ausgerichtet sind und sich leichter erfassen lassen. So wird auch verhindert, dass die Zahlen oder der angrenzende Text hin- und herspringen.

Zeilenhöhe

Die Zeilenhöhe ist der Abstand zwischen den einzelnen Textzeilen und hängt direkt mit der Schriftgröße zusammen. Auf Smartwatches ist der vertikale Platz begrenzt. Daher wird die Zeilenhöhe optimiert, um die Lesbarkeit zu gewährleisten und gleichzeitig die Anzahl der Textzeilen im Darstellungsbereich zu maximieren.

Normalerweise ist es am besten, wenn das Zeilenhöhenverhältnis 1,2-mal (120%) der Schriftgröße entspricht. Aufgrund des begrenzten Platzes auf Wear OS-Geräten reicht jedoch ein Zeilenhöhenverhältnis von etwa 1,1-mal (110%) der Schriftgröße aus.

Zusätzliche Zeilenhöhe

In Jetpack Compose und auf Android wird der Typografie automatisch eine zusätzliche Zeilenhöhe in der letzten Zeile zugewiesen, um zu verhindern, dass längere Zeichen sich überlappen. Deshalb stimmen einige Screenshot-Tests nicht perfekt überein.

Dadurch hat die untere Zeile ein Zeilenhöhenverhältnis von 1,25 Mal (125%) der Schriftgröße. Weitere Informationen

Zusätzliche Informationen zur Zeilenhöhe

Standardstil (Textgröße / Zeilenhöhe)	Standardzeilenhöhe für jede Zeile	Zusätzliche Zeilenhöhe nur in der unteren Zeile	Berechnung
60 / 60	0 (100%)	+ 15 (125%)	60 / 75 (15/125%) (60 + 15)
50 / 50	0 (100%)	+ 13 (126%)	50 / 63 (13/126%) (50+13)
40 / 44	4 (110%)	+ 7 (127,5%)	40 / 51 (11/127,5%) (44+7)
30 / 34	4 (113%)	+ 3 (123,3%)	30 / 37 (7/123,3%) (34 + 3)
24 / 26	2 (108%)	+ 4 (125%)	24 / 30 (6/125%) (26+4)
20 / 22	2 (110%)	+ 3 (125%)	20 / 25 (5/125%) (22 + 3)
18 / 20	2 (111%)	+ 3 (125%)	18 / 23 (5/125%) (20 + 3)
16 / 18	2 (112,5%)	+ 2 (125%)	16 / 20 (4/125%) (18+2)
15 / 18	3 (120%)	+ 1 (126,6%)	15 / 19 (4/126,6%) (18+1)
14 / 16	2 (114%)	+ 2 (128,5%)	14 / 18 (4/128,5%) (16+2)
13 / 16	3 (123%)	+ 0 (123%)	13 / 16 (3/123%) (16+0)
12 / 14	2 (116,6%)	+ 1 (125%)	12 / 15 (3/125%) (14+1)
10 / 12	2 (120%)	+ 0 (120%)	10 / 12 (2/120%) (12+0)