Figma

Text

Beschreibung

Das KERN Design-System stellt konsistente Textkomponenten bereit, die auf einem 8-Punkte-Raster basieren. Sie bringen die erforderlichen vertikalen Abstände bereits mit und sind so gestaltet, dass sie innerhalb gleicher Größenkategorien problemlos kombiniert werden können – ohne zusätzlichen Abstand oder manuelles Nachjustieren.

• Heading

  Ist eine Überschrift für Seiten und Abschnitte.

• Title

  Dient als Titel innerhalb von Komponenten.

• Preline

  Ergänzt Title oder Heading mit unterstützenden Informationen.

• Subline

  Ergänzt Title oder Heading mit unterstützenden Informationen.

• Label

  Visualisieren Aktionen, Inhalte oder Statusinformationen.

• Body

  Wird für Fließtext verwendet, der inhaltliche Sachverhalte vermittelt.

Textrollen

Textrollen helfen dabei, Inhalte klar zu strukturieren, ihre Funktion im Interface zu definieren und typografisch konsistent darzustellen. Sie unterstützen sowohl die visuelle Hierarchie als auch die Zugänglichkeit – und sorgen für einheitliche Nutzendenerlebnisse über verschiedene Komponenten und Seiten hinweg.
Auch wenn bestimmte Textrollen – wie etwa Title und Heading – aktuell denselben visuellen Stil verwenden, ist ihre funktionale Trennung im Design-System bewusst vorgesehen. Diese Rollentrennung ermöglicht es, auf inhaltliche Bedeutungen, semantische Strukturen oder künftige Design-Anpassungen flexibel zu reagieren – etwa wenn sich visuelle Trends oder Anforderungen an die Barrierefreiheit ändern.

Rolle	Verwendung
Heading	Nutze Heading für strukturierte Seiten- und Abschnittsüberschriften. Headings sind Teil der semantischen Dokumentenstruktur und sollten entsprechend mit HTML-Überschriftentags ausgezeichnet werden.
Title	Nutze Title für Überschriften innerhalb von Komponenten. Er dient der visuellen Gliederung innerhalb von UI-Elementen und hilft Nutzenden, sich schnell zu orientieren. Da visuelle Struktur auch inhaltliche Struktur bedeutet, muss Title mit einem entsprechenden HTML-Überschriftentag ausgezeichnet werden.
Preline	Nutze Preline zur inhaltlichen Ergänzung Title oder Heading – z. B. als Kategorisierung oder thematischen Einordnung. Preline sollte nicht eigenständig, sondern nur im Zusammenspiel mit einer Heading oder einem Title verwendet werden.
Subline	Nutze Subline zur inhaltlichen Ergänzung von Title oder Heading – z. B. als einleitender oder erklärender Text unter einer Überschrift. Subline sollte nicht eigenständig, sondern nur im Zusammenspiel mit einer Heading oder einem Title verwendet werden.
Label	Verwende Label zur klaren und eindeutigen Kennzeichnung von UI-Elementen. Labels benennen Funktionen und Inhalte und unterstützen so die Verständlichkeit und Barrierefreiheit. Sie werden z. B. bei Eingabefeldern, Buttons oder anderen interaktiven Komponenten eingesetzt.
Body	Verwende Body für Fließtext, der inhaltliche Sachverhalte vermittelt. Die Komponente bildet die Grundlage für längere Texte und ist auf gute Lesbarkeit ausgelegt.

infoHinweis

Auch wenn einige Rollen aktuell gleich gestaltet sind, unterscheiden sie sich funktional. Diese Trennung erlaubt zukünftige visuelle Anpassungen, ohne das zugrunde liegende Markup ändern zu müssen.

Textkomponenten kombinieren

Das KERN Design-System stellt konsistente Textkomponenten bereit, die auf einem 8-Punkte-Raster basieren. Sie bringen die erforderlichen vertikalen Abstände bereits mit und sind so gestaltet, dass sie innerhalb gleicher Größenkategorien problemlos kombiniert werden können – ohne zusätzlichen Abstand oder manuelles Nachjustieren. Bei allen Textkomponenten – mit Ausnahme der Headings – lässt sich die Größe über einen Modifikator des Klassennamens im Format kern-Textkomponente--Größe anpassen, zum Beispiel kern-title--small.

Verfügbare Modifikatoren je Komponente

Komponente	Modifikatoren
Heading	medium (entspricht default), small, large
Title	default, small, large
Subline	default, small, large
Label	default, small, large
Body	default, small, large

Empfehlung zur Kombination

Jede Komponente ist typografisch und räumlich auf die übrigen abgestimmt. Dadurch lassen sich unterschiedlich gestylte Texte problemlos untereinander kombinieren, ohne dass zusätzliche Abstände gesetzt werden müssen.
Kombiniere ausschließlich Textkomponenten mit derselben Größenbezeichnung (z. B. nur *-default). So stellst du sicher, dass Rhythmus, Leserlichkeit und Designkonsistenz Design-Konsistenz gewahrt bleiben.

✅ Erlaubt: label-default → title-default → subline-default → body-default
🚫 Nicht empfohlen: label-small → title-large → subline-default → body-small

Barrierefreiheit

Die Textkomponenten im KERN Design-System erfüllen grundlegende Anforderungen an Barrierefreiheit, darunter:

• Ausreichende Schriftgrößen: Alle Textgrößen sind so gewählt, dass sie auch bei kleiner Darstellung gut lesbar bleiben.
• Kontrastverhältnisse: Sämtliche Text-Farbkombinationen erreichen ein Kontrastverhältnis von mindestens 7:1, wie von WCAG AAA für normalen Text gefordert. Für große Texte (z. B. Headings) gilt mindestens 4.5:1.
• Semantische Struktur: Rollen wie Heading sind bewusst getrennt von rein visuellen Titeln (Title) und sollten in HTML mit semantisch korrekten Tags (<h1> bis <h6>) ausgezeichnet werden. Das unterstützt Screenreader und andere assistive Technologien.
• Labels und Kontext: Label-Komponenten unterstützen die Zugänglichkeit interaktiver Elemente, indem sie diese eindeutig benennen und in Beziehung setzen (z. B. über for-Attribute bei Formularfeldern).
• Responsives Verhalten: Textkomponenten passen sich an verschiedene Bildschirmgrößen an und bleiben auch bei Zoom oder in mobilen Ansichten nutzbar.