Typografie

Typografie in Storybook

Beispiele

Im Abschnitt Verwendung finden Sie Informationen zur korrekten Verwendung der Typografie-Komponente und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel

Mit der Typografie-Komponente können Sie Inhalte mit einer semantischen Kennzeichnung versehen, die die Formatierung und das HTML-Tag bestimmt.

<Typography variant="body-medium">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Typography>

Beispiel für Variante

Sie können die variant-Eigenschaft verwenden, um verschiedene Stile und HTML-Tags auf den Text anzuwenden.

<Typography variant="blockquote-medium">
    This is a blockquote.
</Typography>

Beispiele für alle Varianten

Beispiel für Tag

Mit der tag-Eigenschaft können Sie festlegen, welches HTML-Tag verwendet wird, sodass das Tag nicht durch die Typografievariante bestimmt wird.

Warning: Achten Sie bei der Auswahl eines alternativen Tags darauf, dass das ausgewählte Tag die semantische Bedeutung beibehält und barrierefreies HTML unterstützt.

Weitere Informationen finden Sie in den Richtlinien zur Verwendung.

In diesem Beispiel wird der Text von einem span-Tag umschlossen und so formatiert, dass kleiner Text enthalten ist.

<Typography variant="body-small" tag="span">
    This is a span that is formatted to have small text.
</Typography>

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

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.
• Tone of Voice: Verwenden Sie einen einheitlichen und angemessenen Tonfall, der zu unserer Marke passt. Weitere Informationen finden Sie unter Stimme und Ton.
• 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

Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1 gemäß den Anforderungen der WCAG 2.1 AA. Nicht-textuelle Inhalte, die eine Bedeutung vermitteln müssen (z. B. Symbole und Sichtbarkeit des Tastaturfokus), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf. Alle Inhalte sind bis einschließlich 400 % sichtbar und funktionsfähig, ohne dass ein Scrollen in zwei Dimensionen erforderlich ist.

Diese Komponente wurde validiert, um die Zugänglichkeitsrichtlinien WCAG 2.1 AA zu erfüllen. Vom Autor des Inhalts vorgenommene Änderungen können sich jedoch auf die Konformität mit der Barrierefreiheit auswirken.

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

Code

<Typography>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Typography>

Importanweisung

import { Typography } from '@jutro/components';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

childrenerforderlich

Typ

node

Beschreibung

The children to render as typography text content.

className

Typ

string

Beschreibung

CSS class name for this component.

variant

Typ

See variant options

Beschreibung

A flag that determines the typography variant to apply to the element. This will determine the style of the text element and, if not overridden by the tag property, the HTML tag it uses.

Standardwert

'body-medium'

tag

Typ

See tag options

Beschreibung

HTML tag to be used for the typography element. If not provided, it will be determined based on the variant.

Variantenoptionen

In den folgenden Tabellen sind die zulässigen Werte für die Eigenschaft variant und das zuhörige standardmäßige HTML-Tag aufgeführt. Eine Demonstration der jeweiligen Formatierung finden Sie im Abschnitt „Beispiele“.

Hero-Varianten

Zeichenfolge der Variante	Standardmäßiges HTML-Tag
'hero-1'	h1
'hero-2'	h2
'hero-3'	h3

Überschriftenvarianten

Zeichenfolge der Variante	Standardmäßiges HTML-Tag
'heading-1'	h1
'heading-2'	h2
'heading-3'	h3
'heading-4'	h4
'heading-5'	h5
'heading-6'	h6

Eyebrow-Varianten

Zeichenfolge der Variante	Standardmäßiges HTML-Tag
'eyebrow-1'	h1
'eyebrow-2'	h2
'eyebrow-3'	h3

Beschriftungsvarianten

Zeichenfolge der Variante	Standardmäßiges HTML-Tag
'label-large-stronger'	label
'label-large-strong'	label
'label-large'	label
'label-medium-stronger'	label
'label-medium-strong'	label
'label-medium'	label
'label-small-stronger'	label
'label-small-strong'	label
'label-small'	label
'label-xsmall-stronger'	label
'label-xsmall-strong'	label
'label-xsmall'	label

Haupttextvarianten

Zeichenfolge der Variante	Standardmäßiges HTML-Tag
'body-large'	p
'body-medium'	p
'body-small'	p
'body-xsmall'	p

Code-Varianten

Zeichenfolge der Variante	Standardmäßiges HTML-Tag
'code-large'	code
'code-medium'	code
'code-small'	code
'code-xsmall'	code

Blockquote-Varianten

Zeichenfolge der Variante	Standardmäßiges HTML-Tag
'blockquote-large'	blockquote
'blockquote-medium'	blockquote
'blockquote-small'	blockquote
'blockquote-xsmall'	blockquote

figcaption-Varianten

Zeichenfolge der Variante	Standardmäßiges HTML-Tag
'figcaption-large'	figcaption
'figcaption-medium'	figcaption
'figcaption-small'	figcaption
'figcaption-xsmall'	figcaption

Tag-Optionen

Die folgenden Zeichenfolgen können als Werte für die tag-Eigenschaft verwendet werden.

Warning: Achten Sie bei der Auswahl eines alternativen Tags darauf, dass das ausgewählte Tag die semantische Bedeutung beibehält und barrierefreies HTML unterstützt.

Weitere Informationen finden Sie in den Richtlinien zur Verwendung.

Überschriften-Tags

• 'h1'
• 'h2'
• 'h3'
• 'h4'
• 'h5'
• 'h6'

Haupttext-Tags

• 'p'
• 'blockquote'
• 'code'
• 'span'
• 'div'

Tags für Bildunterschriften und Beschriftungen

• 'label'
• 'legend'
• 'blockquote'
• 'figcaption'

Hooks

Für typography sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für typography.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape-Hatches.

Änderungsprotokoll

10.11.0

Typografie-Komponente hinzugefügt.