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>

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 die Default-Body-Komponente 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.

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.

Weitere Hinweise

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

Barrierefreiheit

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße und Kontrastverhältnis – für barrierefreie Dienste.

• Achte in der Umsetzung darauf, dass Inhalte auch für Menschen mit kognitiven Beeinträchtigungen verständlich sind. 
• Der Text muss bei 320px Bildschirmbreite vollständig und ohne horizontales Scrollen angezeigt werden.
• Der Text muss bis auf 200% skaliert werden können. Bei der Skalierung muss der Text vollständig sichtbar bleiben und darf nicht andere Seitenbereiche verdecken oder von diesen verdeckt werden.
  • Hinweis 1: Es ist zulässig, dass Textbereiche nach der Skalierung vertikal gescrollt werden müssen, damit sie vollständig angezeigt werden.
  • Hinweis 2: Die Anwendung kann eine eigene Zoomfunktion anbieten. Alternativ können die Einstellungen der Plattformsoftware übernommen werden.

Siehe auch: BFIT Handreichungen