FigmaOpenCode

Body

Synonyme: Fließtext, Paragraph, Text, Body-Text
Ähnliche Komponenten: Subline

Kurzbeschreibung

Body dient der Vermittlung von längeren Informationen in Schriftform. 

Beispiele

Varianten

Code anzeigen

<p class="kern-body kern-body--large">Dieser Body-Text ist in der Größe „large" geschrieben. Diese Größe sollte nur sparsam eingesetzt werden, z.&#8239;B. auf Startseiten.</p>
<p class="kern-body">Dieser Body-Text ist in der Größe „default" geschrieben. Diese Größe bietet eine gute Lesbarkeit und sollte standardmäßig verwendet werden.</p>
<p class="kern-body kern-body--small">Dieser Body-Text ist in der Größe „small" geschrieben. Diese Größe sollte nur wenig verwendet werden, z.&#8239;B. wenn wenig Platz vorhanden ist.</p><br />
<p class="kern-body kern-body--bold">Ein Body-Text jeglicher Größe kann gefettet werden. Dies sollte nur in Ausnahmefällen verwendet werden, z.&#8239;B. um eine wichtige Information hervorzuheben.</p>
<p class="kern-body kern-body--muted">Unabhängig von seiner Größe kann ein Body-Text in einer zurückhaltenden Form verwendet werden. Dies sollte jedoch nur in Ausnahmefällen geschehen, z.&#8239;B. um ergänzende Randbemerkungen abzubilden.</p>

Beschreibung

Body ist eine Textkomponente, die die Erstellung von Informationen als Fließtext erleichtert. Body gibt es in drei verschiedenen Größen: „small“, „default“ und „large“. Die Body-Komponente bildet die textliche Grundlage für längere Inhalte und soll gut lesbar sein.

Verwendungsregeln

Verwende body für Fließtext, der inhaltliche Sachverhalte vermittelt. Sie bildet die Grundlage für längere Inhalte und ist auf gute Lesbarkeit ausgelegt. Für die inhaltliche Ausformulierung dient der Abschnitt „Sprache und Tonalität“ als Orientierung.

Nutze großen Fließtext (body--large) für einleitende Absätze auf Diensteinstiegsseiten oder Landingpages. Diese Texte stehen ganz oben auf der Seite und fassen deren Inhalt zusammen. Sie sollten pro Seite nur einmal verwendet werden – und nur dann, wenn der Kontext dies wirklich erfordert.

Kleiner Fließtext (body--small) ist für kurze, ergänzende Textabschnitte gedacht – zum Beispiel, wenn nur wenig Raum zur Verfügung steht. Er eignet sich jedoch nicht für zentrale Informationen und sollte sparsam eingesetzt werden. Eine Ausnahme bildet die Nutzung in Tabellen mit viel Inhalt, wo body--small verwendet werden kann, um die Übersicht bei begrenztem Platz zu verbessern.

Zur Hervorhebung einzelner Wörter oder Phrasen kann body--bold verwendet werden. Links innerhalb eines Fließtexts werden als Inline-Link formatiert. Für Links außerhalb des Textflusses steht eine eigene Link-Komponente zur Verfügung. Auch nummerierte oder unnummerierte Listen lassen sich einbinden. Eine Anleitung zur Formatierung findest du in Figma.

Der Stil body--muted ist für zurückhaltend dargestellten Fließtext vorgesehen, der nur in Ausnahmefällen verwendet werden sollte. Er eignet sich ausschließlich für ergänzende Inhalte, die nicht zum Verständnis des Haupttextes erforderlich sind – etwa Randbemerkungen, erklärende Hinweise oder rechtliche Fußnoten. Da der Text visuell deutlich zurücktritt, sollte er nie für zentrale Informationen oder Kernaussagen eingesetzt werden.

Texte sollten nicht als Schriftgrafiken eingebunden werden – es sei denn, sie sind vollständig anpassbar (z. B. Schriftgröße, Farbe, Hintergrund).

Dos und Don’ts

Verwende Body-Text ausschließlich für Fließtext – nicht für Inhalte, für die eigene Komponenten vorgesehen sind (z. B. Link oder Heading).

Nutze niemals händische Textformatierungen – wie Fettungen und Schriftgrößen – um Fließtexte zu erzeugen, sondern die vorgegebenen Größen und Stile.

Setze die Schriftgrößen „small“ und „large“ nur sparsam ein.

Verwende den Stil „muted“ nur in Ausnahmefällen.

Weitere Hinweise

• Prüfe, ob umfangreiche Inhalte besser auf mehrere Seiten oder Abschnitte aufgeteilt werden sollten.

Barrierefreiheit

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Implementierungsabhängig

Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:

Implementierungsabhängig

WCAG 1.4.4

Body ist bis auf 200% vergrößerbar ohne Inhaltsverlust

Implementierungsabhängig

WCAG 1.4.10

Body ist bei einer Bildschirmbreite von 320px ohne horizontales Scrollen lesbar

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

Bestanden

WCAG 1.4.5

Body wird als echten Text und nicht als Bild dargestellt

Bestanden

WCAG 1.4.6

Body erfüllt das minimale Kontrastverhältnis von 7:1

Bestanden

WCAG 1.4.12

Body ist bei angepassten Zeilenabständen lesbar