Designsystem-Typografie in Figma – konsistente Schrift für UI

Uneinheitliche Schriften gehören zu den häufigsten Problemen in Interfaces: Überschriften springen, Buttons wirken mal zu groß, mal zu klein, und in jedem neuen Screen scheint eine andere Schriftgröße zu leben. Saubere Designsystem-Typografie in Figma löst genau dieses Chaos.

Der folgende Leitfaden zeigt, wie ein durchdachtes Typografie-System in Figma aufgebaut wird: von der Planung der Hierarchie über Text Styles und Tokens bis hin zu responsiven Größen und praktischen Workflows im Team.

Typografie-Hierarchie für UI planen

Bevor Text Styles in Figma angelegt werden, braucht es eine klare typografische Struktur. Sie ist das Fundament für jedes Designsystem.

Typografische Ebenen sinnvoll definieren

Für digitale Produkte hat sich eine reduzierte, aber klare Hierarchie bewährt. Typischer Umfang:

• Display/Marketing (für Landingpages, Hero-Bereiche)
• H1–H4 (Überschriften im Produkt, z. B. Screen-Titel, Abschnittsüberschriften)
• Body (Standard-Fließtext)
• Secondary/Meta (Hilfstexte, Labels, Captions)
• UI-Texte (Buttons, Badges, Input-Labels, Fehlermeldungen)

Wichtiger als viele Stufen ist ein erkennbarer Abstand zwischen den Ebenen. Überschriften sollten sich klar von Body-Text abheben, ohne wie ein Fremdkörper zu wirken.

Font-Paarung und Schriftschnitte auswählen

Wer ein Designsystem pflegt, sollte möglichst wenige Schriften verwenden. Empfehlenswert:

• 1 Font-Familie für UI und Fließtext (mit verschiedenen Schnitten)
• Optional 1 zusätzliche Schriftart für Marketing-/Brand-Elemente

Für Interfaces eignet sich meist eine serifenlose Schrift, die bei kleinen Größen gut lesbar ist. Statt zehn Schriftschnitten (Thin, Extra Light, etc.) reichen oft:

• Regular (oder Book) für Fließtext
• Medium oder Semibold für wichtige Hervorhebungen
• Bold für starke Akzente, Buttons, Section-Titel

Wichtig ist, dass dieselben Schnitte später auch im Code und im Designsystem verfügbar sind. Wer nur einen Schnitt in der Webfont-Lizenz hat, sollte auch im Figma-System keine fünf Schnitte einplanen.

Skalentyp wählen: feste Stufen oder modulare Skala

Für die Größen ist eine typografische Skala hilfreich. Zwei gängige Ansätze:

• Feste Stufen: z. B. 12, 14, 16, 20, 24, 32 px – leicht zu kommunizieren, ideal für Teams mit wenig Erfahrung.
• Modulare Skala (z. B. Faktor 1,25): 12, 15, 19, 24, 30, 38 px – wirkt harmonisch, erfordert etwas mehr Planung.

Wichtiger als die genaue Formel ist: Die Stufen sollten konsistent bleiben und nicht bei jedem Projekt spontan geändert werden.

Text Styles in Figma systematisch anlegen

Sobald die Hierarchie steht, werden Text Styles in Figma angelegt. Diese Styles sind die Bausteine, aus denen spätere Komponenten und Screens entstehen.

Benennungssystem für Figma-Text Styles

Ein klares Naming erspart Diskussionen und Sucherei. Bewährt haben sich drei Ebenen:

• Ebene (z. B. Heading, Body, UI)
• Variante (z. B. L, M, S oder 1, 2, 3)
• Attribut (z. B. /Bold, /Regular)

Beispiel für konsistente Namen:

• Heading/H1/Bold
• Heading/H2/Semibold
• Body/M/Regular
• Body/S/Regular
• UI/Button/Medium
• UI/Label/Regular

So ist auf einen Blick klar, welche Größe und Funktion ein Style hat – ohne jede Vorschau öffnen zu müssen.

Basiswerte pro Text Style definieren

Jeder Text Style in Figma sollte bewusst definierte Werte haben:

• Schriftart und Schriftschnitt
• Fontgröße (px)
• Zeilenhöhe (Line Height) – sinnvoll als fester Wert, nicht in %
• Zeichenabstand (Letter Spacing) – bei Bedarf leicht angepasst
• Ausrichtung (links, mittig, rechts)

Gerade bei Zeilenhöhe und Letter Spacing lohnt ein Blick auf die Lesbarkeit: Fließtext mit zu geringer Zeilenhöhe wirkt schnell gedrängt, Überschriften dürfen etwas enger stehen, um kompakter zu wirken.

Typografie und Komponenten verbinden

Text Styles sollten in allen wichtigen UI-Komponenten verwendet werden. Typische Beispiele:

• Buttons (Primary, Secondary, Tertiary)
• Formularelemente (Input-Label, Placeholder, Error-Text)
• Navigation (Menüpunkte, Breadcrumbs, Tabs)
• Karten/Listen (Titel, Unterzeile, Meta-Info)

Je einheitlicher die Verknüpfung zwischen Komponenten und Text Styles ist, desto leichter gelingt später der Handoff an Entwickler. Das spart Zeit und reduziert Rückfragen.

Typografie-Tokens und Variablen im Designsystem nutzen

In modernen Workflows werden typografische Werte nicht nur als Figma-Styles, sondern auch als Tokens und Variablen gepflegt. Das macht das System langfristig robuster.

Was Typografie-Tokens im UI-Design leisten

Tokens sind benannte Werte, die sowohl im Design als auch im Code genutzt werden können. Ein Typografie-Token bündelt oft mehrere Eigenschaften, etwa:

• Font-Familie
• Größe
• Zeilenhöhe
• Gewicht

Beispielname im Code: text.body.m oder font.heading.l. In Figma können diese Tokens mit Plugins oder der Variablen-Funktion gespiegelt werden, sodass ein Update später an einer Stelle statt an hundert Komponenten erfolgt.

Figma-Variablen für Typografie strukturieren

Figma bietet Variablen, um wiederkehrende Werte zu organisieren. Für Typografie lohnt sich die Trennung in:

• Fontgrößen (z. B. font.size.body.m)
• Line Heights (z. B. font.lineheight.body)
• Font Weights (z. B. font.weight.bold)

Damit lassen sich Styles aus Variablen zusammensetzen. Ändert sich später der Basiswert einer Größe, passen sich die zugehörigen Text Styles und Komponenten automatisch an – ohne alles neu zu definieren.

Designsystem-Typografie und Code abgleichen

Für ein sauberes Designsystem ist der Abgleich mit der Implementierung entscheidend. Sonst existieren schnell zwei Welten: das, was in Figma steht, und das, was im Frontend landet.

Bewährt hat sich eine kurze gemeinsame Tabelle zwischen Design und Entwicklung:

Solche Übersichten können Teil der Dokumentation im Designsystem sein und geben auch neuen Teammitgliedern einen schnellen Überblick.

Responsive Typografie in Figma abbilden

Interfaces laufen heute von kleinen Smartphones bis zu großen Desktop-Monitoren. Die responsive Typografie muss sich darauf einstellen, ohne ihre Hierarchie zu verlieren.

Breakpoints und Textgrößen definieren

Typischerweise werden zwei bis drei wichtige Breakpoints genutzt, etwa:

• Mobile (z. B. bis 480 px)
• Tablet (z. B. 768 px)
• Desktop (z. B. ab 1024 px)

Für jeden Breakpoint lohnt sich eine kleine Varianten-Tabelle der wichtigsten Textstile, zum Beispiel:

• Heading/H1: 24 px (Mobile), 28 px (Tablet), 32 px (Desktop)
• Body/M: 14 px (Mobile), 15 px (Tablet), 16 px (Desktop)
• Button/Text: 14 px (Mobile), 14 px (Tablet), 15 px (Desktop)

Wichtig ist, dass Abstände und Komposition mitgedacht werden: Eine größere H1 auf Desktop braucht oft auch mehr vertikale Abstände in den Layouts.

Figma-Layouts mit responsiver Typografie testen

In Figma sollten für zentrale Screens je eine mobile, Tablet- und Desktop-Variante mit korrekt angewendeten Text Styles angelegt werden. So lässt sich prüfen:

• Wirkt die Hierarchie auf kleineren Screens noch klar?
• Gibt es Text, der zu klein oder zu groß wird?
• Bleiben Buttons und Labels ausreichend lesbar?

Wer bereits Erfahrung mit responsive Layouts hat, kann die Arbeit mit Grundregeln zur Lesbarkeit aus dem Webdesign kombinieren und in Figma konsequent durchspielen.

Option: Fluid Typography in der Dokumentation erklären

Falls im Code mit fluiden Fontgrößen (z. B. via clamp()) gearbeitet wird, kann Figma das nur näherungsweise abbilden. In diesem Fall lohnt ein kurzer erklärender Abschnitt im Designsystem:

• Konkrete Werte für Mobile und Desktop in Figma zeigen
• Beschreiben, dass die Größe dazwischen fließend verläuft
• Entwicklern die genutzte Formel oder Code-Beispiele bereitstellen

So bleibt klar: Figma ist das Referenzbild, der Code übernimmt die dynamische Anpassung dazwischen.

Schrift für Barrierefreiheit und Lesbarkeit optimieren

Ein gutes Designsystem berücksichtigt von Anfang an Barrierefreiheit. Typografie spielt dabei eine zentrale Rolle.

Lesbare Mindestgrößen für UI-Elemente

Besonders kritisch sind Texte in Navigationen, Formularen und Fehlermeldungen. Zu kleine Schrift erhöht die Fehlerquote und führt zu Frust.

Praktische Richtlinien für Figma:

• Body-Text auf Mobile nicht unter ca. 14 px planen
• Labels, Meta-Texte und Platzhalter nicht kleiner als etwa 12 px
• Buttons so gestalten, dass Text nicht gequetscht wirkt

Diese Werte sind keine starren Normen, aber gute Startpunkte, um Prototypen lesbar zu halten.

Typografie und Kontrast im Designsystem

Kontrast betrifft eigentlich Farben, ist aber für Typografie entscheidend. Eine elegante Schrift nützt wenig, wenn der Text nicht gut lesbar ist. Gerade in UI-Kits sollten Varianten von Text auf verschiedenen Hintergründen gezeigt werden:

• Dunkler Text auf hellem Hintergrund (Standard)
• Heller Text auf dunklem Hintergrund (z. B. für Header oder Badges)
• Fehler- oder Hinweistext in Signalfarben

Wer bereits mit strukturierten Farbpaletten arbeitet, kann die typografische Planung mit einem Farb-Designsystem kombinieren – etwa so, wie es bei Farbtokens in Figma üblich ist.

Sprachlängen und Übersetzungen einplanen

Viele Produkte werden später übersetzt. Das wirkt sich stark auf Typografie aus – besonders bei Buttons und Navigationen. Im Designsystem sollten daher:

• Beispiele mit längeren Texten (z. B. deutscher vs. englischer Buttontext) gezeigt werden
• Maximale Zeilenumbrüche für Titel definiert werden (z. B. H1 max. 2 Zeilen)
• Komponenten so entwickelt sein, dass sie längere Labels nicht sofort „sprengen“

Wer hier bewusst plant, spart später viel Zeit bei Lokalisierung und Design-Adjustments.

Praktische Workflow-Tipps für Figma-Typografie

Ist das typografische System einmal definiert, geht es im Alltag vor allem darum, es konsistent zu nutzen und weiterzuentwickeln.

Checkliste: Typografie sauber im Team verankern

Damit das System nicht nur in der Theorie existiert, hilft eine praktische Routine im Team.

• Alle Basis-Text Styles in einer zentralen Library anlegen und veröffentlichen
• Komponentenbibliothek auf diese Styles migrieren (Buttons, Karten, Formulare)
• Kurze Doku-Seite im Figma-File: Ziele, Hierarchie, Beispiele, Do/Don’t
• Neues Projekt? Zuerst Library mit Typografie verknüpfen, nicht neue Styles bauen
• Regelmäßige Reviews, bei denen neue Textvarianten diskutiert und ggf. als offizielle Styles aufgenommen werden

So geht’s: Typografie-System in einem bestehenden Figma-Projekt aufräumen

• Alle aktuell verwendeten Textgrößen exportieren oder markieren.
• Gruppieren: Welche Größen und Schnitte sind sich so ähnlich, dass sie vereinheitlicht werden können?
• Neue, klare Skala definieren (z. B. 12, 14, 16, 20, 24, 32 px) und als Styles anlegen.
• Bestehende Texte nach und nach auf die neuen Styles mappen (Fokus auf zentrale Screens).
• Alte, nicht mehr genutzte Styles löschen oder deutlich als „deprecated“ kennzeichnen.

Typografie und Content-Design abstimmen

Typografie ist nie losgelöst vom Inhalt. Überschriftenstrukturen, Lesefluss und Textlängen sollten mitgedacht werden. Wer an SEO- oder Content-Strukturen arbeitet, kennt das bereits, etwa aus der Arbeit mit klar aufgebauten Textstrukturen. Ähnlich hilft im Interface-Design:

• Klare Regeln, welche Textebenen es gibt (Title, Subtitle, Body, Helper)
• Abstimmung mit Content-Verantwortlichen, wie lang bestimmte Texte sein dürfen
• Beispiele mit realistischen Texten, nicht nur mit „Lorem ipsum“

So entsteht ein UI-Typografie-System, das nicht nur visuell, sondern auch inhaltlich funktioniert.