Zum Hauptinhalt springen

Typografie

Typografie in Storybook

Verwendung​

Überblick​

Die Typografie-Komponente ist ein grundlegendes Element des Designsystems und sorgt für eine konsistente und semantisch korrekte Textdarstellung. Durch die Trennung des visuellen Erscheinungsbilds (definiert durch variant) von der semantischen Bedeutung (definiert durch tag) bietet die Komponente Flexibilität bei gleichzeitiger Beibehaltung der Barrierefreiheit.

Wesentliche Eigenschaften:

  • variant: Steuert die visuelle Gestaltung des Texts, z. B. Schriftgrad, Schriftbreite, Zeilenhöhe und Farbe. Beispiele hierfür sind heading-1, heading-2, body-large und label-medium.
  • tag: Überschreibt das zugrunde liegende semantische HTML-Element, um die ordnungsgemäße Struktur und Zugänglichkeit des Dokuments sicherzustellen. Beispiele hierfür sind h1, h2, p und span.

Standardmäßig ist jede Variante mit einem spezifischen HTML-Tag verknüpft. Mit der tag-Eigenschaft können Sie diese Standardeinstellung jedoch überschreiben. Dies gibt Ihnen die Flexibilität, die visuelle Hervorhebung von Text anzupassen und gleichzeitig eine logische semantische Struktur beizubehalten. So können Sie beispielsweise eine Überschrift visuell dezent gestalten, ohne ihre strukturelle Bedeutung zu verändern.

Eine vollständige Liste der Standard-Tags finden Sie in den Tabellen für die Variantenoptionen. Weitere Beispiele für diese Methode finden Sie im Abschnitt Trennung von Stil und Semantik.

Zu verwenden​

Verwenden Sie die Typografie-Komponente für alle Textelemente in der Anwendung, beispielsweise:

  • Überschriften: Für Titel und Abschnittsüberschriften.
    • Beispiel: Verwenden Sie eine Überschriftenvariante, z. B. heading-1.
  • Haupttext: Für Absätze und anderen längeren Text.
    • Beispiel: Verwenden Sie eine Textvariante, z. B. body-medium.
  • Beschriftungen: Für kürzeren, beschreibenden Text, z. B. Beschriftungen von Formularfeldern.
    • Beispiel: Verwenden Sie eine Beschriftungsvariante, z. B. label-small.
  • Eyebrow: Für einleitenden Text, der über einer Hauptüberschrift steht, um Kontext zu liefern.
    • Beispiel: Verwenden Sie eine Eyebrow-Variante, z. B. eyebrow-1.
  • Hero: Für großen, auffälligen Text in Hero-Bereichen oder Marketing-Überschriften.
    • Beispiel: Verwenden Sie eine Hero-Variante, z. B. hero-1.
  • Blockzitate: Zum Formatieren von Text, der aus einer externen Quelle zitiert wird.
    • Beispiel: Verwenden Sie eine Blockquote-Variante, z. B. blockquote-medium.
  • Bildunterschriften: Für beschreibenden Text zu Bildern oder Abbildungen.
    • Beispiel: Verwenden Sie eine figcaption-Variante, z. B. figcaption-medium.
  • Code: Zur Anzeige von Inline- oder Block-Level-Codeausschnitten.
    • Beispiel: Verwenden Sie eine Code-Variante, z. B. code-medium.
  • Jeder Text, der eine einheitliche Formatierung und eine konsistente semantische Bedeutung erfordert.

Nicht zu verwenden​

Verwenden Sie die Typografie-Komponente nicht für eigenständige Elemente, die in erster Linie als Schaltfläche oder Link dienen sollen. Verwenden Sie stattdessen die dedizierten Komponenten Button oder Link, die für die korrekte Verarbeitung von interaktiven Zuständen, Fokusverwaltung und Barrierefreiheitsfunktionen entwickelt wurden.

Beispiel für die Verwendung​

Webformular mit nummerierten Beschreibungen, die Beispiele für verschiedene Typografiestile angeben

  1. Hero-Variante: Dies ist die Hauptüberschrift der Seite.
  2. Eyebrow-Variante: Dieser Text liefert den Kontext für die darunter stehende Überschrift.
  3. Überschriftenvariante (Abschnittstitel): heading-2 dient als Hauptüberschrift für den Abschnitt „Fahrer hinzufügen“.
  4. Überschriftenvariante (Unterabschnittstitel): Dies ist ein Beispiel für die Trennung von visuellem Stil und semantischer Bedeutung. Der Text ist optisch kleiner als die Überschrift des Hauptabschnitts (unter Verwendung einer heading-4-Variante), ist jedoch als h3 markiert, damit eine korrekte verschachtelte Struktur für Screenreader erstellt wird (h2 → h3).
  5. Haupttextvariante: Dies ist ein Standardabsatz mit Anweisungstext.
  6. Beschriftungsvariante: Dieser Text beschreibt eine Formulareingabe.

Trennung von Stil und Semantik​

In den folgenden Beispielen wird gezeigt, wie mit den Eigenschaften variant und tag ein visuelles Erscheinungsbild erstellt wird, das sich von der zugrunde liegenden semantischen Struktur des Texts unterscheidet.

Beispiel: Dezente Abschnittsüberschrift​

Dies ist nützlich, wenn eine Überschrift semantisch für die Dokumentgliederung notwendig ist, aber visuell dezent sein soll.

  • Variante: body-medium
  • Tag: h2
  • Erklärung: Diese Überschrift ist semantisch wichtig für Screenreader, die durch die Seitenstruktur navigieren, aber mit der body-medium-Variante fügt sie sich optisch in den Absatztext ein, wodurch eine unnötige Hervorhebung vermieden wird.

Das folgende Beispiel verdeutlicht dieses Prinzip in der Praxis:

Beispiel: Optisch hervorgehobenes Zitat​

Dies gilt für Text, der eine hohe visuelle Wirkung erzielen soll, aber keine strukturelle Überschrift ist.

  • Variante: heading-3
  • Tag: blockquote
  • Erklärung: Hier erhält ein Blockzitat die visuelle Gewichtung einer heading-3-Variante, damit es hervorgehoben wird. Durch die Verwendung des blockquote-Tags wird sichergestellt, dass es von assistiven Technologien korrekt als Zitat und nicht fälschlicherweise als strukturelle Abschnittsüberschrift erkannt wird.

Das folgende Beispiel verdeutlicht dieses Prinzip in der Praxis:

Allgemeine Richtlinien​

  • Beibehaltung der Hierarchie: Verwenden Sie Überschriften (h1 bis h6) immer in einer logischen, verschachtelten Reihenfolge. h2 muss auf h1 folgen und h3 muss auf h2 folgen, auch wenn die visuelle Variante anders ist. Überspringen Sie keine Überschriftenebenen (z. B. h1 direkt gefolgt von h4).
  • Semantische Korrektheit: Priorisieren Sie die tag-Eigenschaft im Hinblick auf semantische Genauigkeit. Die Variante dient der visuellen Darstellung, das Tag dagegen der Bedeutung.
  • Konsistenz: Verwenden Sie die vordefinierten Variantenwerte einheitlich in der gesamten Anwendung, um eine kohärente visuelle Sprache beizubehalten.

Inhalt​

Allgemeine Richtlinien fürs Schreiben​

  • Klarheit und Bündigkeit: Schreiben Sie klar und kommen Sie direkt auf den Punkt. Vermeiden Sie Fachjargon und zu komplexe Sätze.
  • Aktivform: Verwenden Sie das Aktiv statt des Passiv für eine klare und direkte Kommunikation.
  • Einfache Sprache: Verwenden Sie eine für die Zielgruppe leicht verständliche Sprache.
  • Konsistenz in der Terminologie: Verwenden Sie in der gesamten Anwendung einheitliche Begriffe für Funktionen, Aktionen und Konzepte.
  • Tonfall und Stil: Verwenden Sie einen einheitlichen und angemessenen Tonfall, der zu unserer Marke passt. Weitere Informationen finden Sie unter Tonfall und Stil.
  • Korrekturlesen: Überprüfen Sie Texte immer auf Grammatikfehler, Rechtschreibfehler und Tippfehler.
  • Mikrotext: Achten Sie auf kleine Textabschnitte wie Schaltflächenbeschriftungen, Fehlermeldungen und QuickInfos. Sie sind entscheidend für das Benutzererlebnis.

Barrierefreiheit​

Konformität der Komponente​

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

  • Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
  • Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
  • Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
  • Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Richtlinien zur Erstellung barrierefreier Webinhalte​

Semantisches HTML (tag-Eigenschaft): Dies ist der wichtigste Aspekt für die Barrierefreiheit. Screenreader und andere assistive Technologien erkennen anhand von semantischen HTML-Tags (z. B. h1-h6, p und blockquote) die Struktur und Bedeutung des Inhalts. Wählen Sie immer das für die Funktion des Inhalts am besten geeignete Tag aus.

Überschriftenhierarchie: Achten Sie auf eine logische Überschriftenstruktur (z. B. h1 gefolgt von h2, nicht von h4). Dies ermöglicht Benutzern von Screenreadern eine effiziente Navigation durch Inhalte. Eine ausführliche Anleitung finden Sie im W3C-Tutorial zu Überschriften.

Theming​

Die Typografie-Komponente übernimmt standardmäßig die Stile aus dem Design der Anwendung. Sie können jedoch typografische Elemente wie Farben, Schriftfamilien und die Skala von Schriftgrößen und Schriftbreiten an spezifische Branding-Anforderungen anpassen.

Erfahren Sie mehr über das Theming mit Design-Token