Typografie Designsystem

Erstellen Sie klare Inhaltshierarchien in jeder Größe.

8 Prüfpunkte · 3 Inhaltsgruppen

Inhalt der Checkliste

Prüffortschritt

Struktur und Bedeutung

Vergleichen Sie Informationen und Präsentation im Nutzungskontext.

Verwenden Sie eine einheitliche SchriftgrößenskalaDefinieren Sie Ebenen von der Bildunterschrift bis zum Titel und vermeiden Sie das Hinzufügen neuer Größen für jeden Bildschirm.Ersetzen Sie Titel durch längere Inhalte und erhöhen Sie die Schriftgröße auf Geräten. Sorgen Sie dafür, dass Hierarchie, vietnamesische Akzente, Zeilenabstände und damit verbundene Aktionen leicht lesbar sind, ohne den Inhalt abzuschneiden.Beispiel Die Karte verfügt über einen zweizeiligen Titel, eine Beschreibung und eine Schaltfläche zum Öffnen. Wenn die Buchstaben größer sind, wird das Schild höher, anstatt den Knopf zu verdecken oder das vietnamesische Zeichen abzuschneiden.Legen Sie den Stil nach Rolle festUnterscheiden Sie Titel, Inhalte, Beschriftungen und Bildunterschriften, um Stile entsprechend ihrer Bedeutung auszuwählen.Eine Schriftart sollte einen Namen haben, der dieselbe Rolle spielt wie der Textkörper oder die Beschriftung; Rollenänderungen müssen synchron aktualisiert werden, anstatt jeden Bildschirm zu bearbeiten.Überprüfen Sie vietnamesische Schriftarten und AkzenteWählen Sie die zu verwendende Stärke, sichern Sie die Schriftart und suchen Sie nach akzentuiertem Text, wenn das Herunterladen der Schriftart fehlschlägt.Überprüfen Sie die Länge der Buchstaben, die vietnamesischen Akzente und das tatsächlich geladene Gewicht. Backup-Schriftarten müssen eine ähnliche Größe haben, um Layoutsprünge zu vermeiden.

Interaktion und Benutzerfreundlichkeit

Probieren Sie den Vorgang aus, ändern Sie den Status und arbeiten Sie weiter.

Buchstabenabstand anpassenStellen Sie für Titel und lange Lektüren die entsprechende Zeilenhöhe und den entsprechenden Zeichenabstand ein.Versuchen Sie es mit einem mehrzeiligen Absatz, nicht nur mit einem Beispielsatz. Zu enge Zeilen erschweren die Lesbarkeit und große Buchstabenabstände können bei kleinen Schriftgrößen Wörter und Satzzeichen zerstören.Halten Sie den Text beim Skalieren lesbarAchten Sie auf einen schmalen Bildschirm und eine Zoomstufe von 200 %, um Textausschneidungen oder überlappende Inhalte zu vermeiden.Beim Erhöhen der Schriftgröße oder beim Zoomen müssen sich Schaltflächen und Tags entsprechend dem Inhalt dehnen; Vermeiden Sie feste Höhen, die die zweite Linie abschneiden.Halten Sie den Inhalt ausreichend kontrastreichStellen Sie sicher, dass kleiner Text immer noch gut lesbar ist, und verwenden Sie nicht die Farbe als alleinigen Hinweis auf die Bedeutung.Überprüfen Sie auch den Subtext-, Platzhalter- und Hell/Dunkel-Deaktivierungsstatus. Kleine Buchstaben auf farbigem Hintergrund sind oft leicht zu übersehen.

Vervollständigen Sie das Erlebnis

Achten Sie auf Details, die bei der Verwendung des Designs leicht übersehen werden können.

Definieren Sie Mindesttextgrößen je nach RolleDokumentieren Sie lesbare Mindestwerte für Textkörper, Beschriftungen und Beschriftungen und erklären Sie, wann ein größerer Stil erforderlich ist, anstatt den Text entsprechend zu verkleinern.Versuchen Sie es mit der tatsächlichen Anzeigegröße auf dem Gerät. Text in einem vergrößerten Vorschaubild kann die Lesbarkeit in voller Größe beeinträchtigen.Definieren Sie eine responsive TypskalaDokumentieren Sie, wie sich Überschriften und Textkörper über die Breite des Ansichtsfensters hinweg ändern, wobei die Hierarchie erhalten bleibt und abrupte Größenänderungen vermieden werden.Wenn Sie flexible Schriftgrößen verwenden, legen Sie Mindest- und Höchstgrenzen fest. Stellen Sie sicher, dass das lange Etikett nicht verkleinert wird, sodass nur noch eine Zeile übrig bleibt.

Der Fortschritt wird automatisch in diesem Browser gespeichert.

ANLEITUNG

So prüfen Sie

Überprüfen Sie die Hierarchie, wenn der Text lang und vergrößert ist

Ersetzen Sie Titel durch längere Inhalte und erhöhen Sie die Schriftgröße auf Geräten. Sorgen Sie dafür, dass Hierarchie, vietnamesische Akzente, Zeilenabstände und damit verbundene Aktionen leicht lesbar sind, ohne den Inhalt abzuschneiden.

BEISPIELE

Anwendungsbeispiele

Langer Titel in einem Tag

Die Karte verfügt über einen zweizeiligen Titel, eine Beschreibung und eine Schaltfläche zum Öffnen. Wenn die Buchstaben größer sind, wird das Schild höher, anstatt den Knopf zu verdecken oder das vietnamesische Zeichen abzuschneiden.