Typografie-System-Design: Wie man skalierbare Schrift erstellt

Eine Schriftart auszuwählen, ist kein Typografie-System-Design. Zwei Schriftarten auszuwählen, die gut zusammen aussehen, ist immer noch kein Typografie-System-Design. Ein Typografie-System ist die Menge von Regeln, die bestimmt, wie jedes Textelement in Ihrem Produkt, Ihrer Marke oder Benutzeroberfläche in jedem Kontext, in dem es jemals erscheinen wird, funktioniert.

Die meisten Designer überspringen diesen Schritt. Sie wählen eine Überschriften- und eine Fließtextschrift, schätzen die Größen ab und nennen es fertig. Sechs Monate später verwendet die Marketing-Website eine Skala, die App eine andere, das Pitch-Deck eine dritte, und niemand kann erklären, warum die Marke inkonsistent wirkt, obwohl das Logo unverändert ist.

Diese Inkonsistenz ist ein Problem des Typografie-Systems. Und es ist behebbar.

Was ein Typografie-System tatsächlich enthält

Ein echtes Typografie-System definiert fünf Dinge:

1. Eine Schriftskala. Die mathematische Beziehung zwischen Ihren Textgrößen.
2. Schriftpaarungen. Welche Schriftarten welche Rollen spielen und warum.
3. Regeln für Schriftstärke und -stil. Wann fett, kursiv, medium verwendet wird und was jede Stärke signalisiert.
4. Abstandsstandards. Zeilenhöhe, Laufweite und Absatzabstand für jede Größe.
5. Responsives Verhalten. Wie sich jedes der oben genannten Elemente an verschiedene Bildschirmgrößen anpasst.

Wenn Ihrem „Typografie-System“ eines dieser Elemente fehlt, haben Sie Schriftarten ausgewählt, aber kein System.

Die Schriftskala ist das Fundament

Eine Schriftskala ist eine Reihe von Schriftgrößen, die aus einem konsistenten mathematischen Verhältnis generiert werden. Anstatt Größen nach Gefühl auszuwählen (hier 16px, dort 24px, vielleicht 36px für den Hero-Bereich), wählen Sie eine Basisgröße und ein Verhältnis, und jede andere Größe ergibt sich daraus.

Gängige Verhältnisse, die funktionieren:

Beginnen Sie mit einer Basis von 16px (dem Browser-Standard, zugänglich, lesbar) und multiplizieren Sie nach oben für Überschriften, teilen Sie nach unten für Bildunterschriften und Beschriftungen. Eine Große Terz-Skala ausgehend von 16px ergibt Ihnen: 10px, 12.8px, 16px, 20px, 25px, 31.25px, 39px. Runden Sie auf saubere Werte, und Sie haben eine Skala, die beabsichtigt statt willkürlich wirkt.

Schriftpaarung ist Strategie

Das Internet ist voll von Listen der „besten Schriftpaarungen“. Die meisten davon sind Dekorationsratschläge, die als Designratschläge getarnt sind. Echte Schriftpaarung ist strategisch.

Die Regeln, die tatsächlich funktionieren:

Kontrast in der Struktur, Harmonie in der Proportion. Kombinieren Sie eine geometrische Sans mit einer humanistischen Serifenschrift. Der strukturelle Kontrast schafft visuelles Interesse. Die gemeinsame x-Höhe und Proportion lassen sie zusammengehörig wirken. Inter + Merriweather. DM Sans + Lora. Satoshi + Source Serif.

Eine Stimme pro Rolle. Ihre Überschriftenschrift trägt Persönlichkeit. Ihre Fließtextschrift trägt Inhalt. Ihre UI-Schrift trägt Funktion. Der Versuch, eine Schriftart alle drei Aufgaben erfüllen zu lassen, führt zu einem System, das generisch oder überfordert wirkt.

Zwei Schriftarten sind fast immer genug. Drei ist das Maximum für jedes System, das überschaubar bleiben soll. Jede zusätzliche Schriftart vervielfacht die Anzahl der Paarungs-, Stärken- und responsiven Entscheidungen, die Sie treffen müssen. Wenn Sie glauben, vier Schriftarten zu benötigen, müssen Sie wahrscheinlich zwei Schriftarten besser nutzen.

Testen Sie die Paarung im Kontext, nicht in einem Schriftschnittmuster. Eine Paarung, die auf einem Schriftschnittmuster-Poster schön aussieht, kann in einer Kartenkomponente oder einer Navigationsleiste auseinanderfallen. Testen Sie im tatsächlichen Layout, bevor Sie sich festlegen.

Regeln für Schriftstärke und -stil

Schriftstärke ist Hierarchie. Fett bedeutet wichtig. Medium bedeutet unterstützend. Regulär bedeutet Fließtext. Leicht bedeutet dekorativ oder sekundär. Diese Assoziationen sind in die Art und Weise, wie Menschen lesen, eingebettet.

Der Fehler liegt in der inkonsistenten Verwendung von Schriftstärken. Wenn Ihr H2 auf der Marketing-Website halbfett, aber in der App fett ist, wirkt die Marke anders, obwohl die Schriftart dieselbe ist. Ein Typografie-System legt dies fest:

• H1: Fett (700). Immer. Dies ist Ihre lauteste Stimme.
• H2: Halbfett (600) oder Fett (700). Wählen Sie eine, verwenden Sie sie überall.
• H3: Medium (500). Genug Kontrast, um wahrgenommen zu werden, ohne mit H2 zu konkurrieren.
• Fließtext: Regulär (400). Lesbar, neutral, ohne Reibung.
• Bildunterschriften und Beschriftungen: Regulär (400) oder Medium (500) bei kleineren Größen.

Kursiv hat eine Aufgabe: Betonung innerhalb des Fließtextes. Die Verwendung von Kursiv für dekorative Zwecke (Hervorhebungen, Abschnittsbezeichnungen) verwässert ihre Bedeutung und macht tatsächliche Betonung unsichtbar.

Abstände sind der Schwachpunkt von Systemen

Zeilenhöhe, Laufweite und Absatzabstand sind die Bereiche, in denen die meisten „Typografie-Systeme“ stillschweigend auseinanderfallen. Die Schriftgrößen stimmen über Produkte hinweg überein, die Schriftstärken passen, aber der Text fühlt sich anders an, weil die Abstände inkonsistent sind.

Regeln für die Zeilenhöhe:

Überschriften benötigen eine engere Zeilenhöhe (1.1 bis 1.3), da großer Text bei Fließtext-Verhältnissen zu viel vertikalen Raum erzeugt. Fließtext benötigt eine lockerere Zeilenhöhe (1.5 bis 1.8) für angenehmes Lesen. Der häufige Fehler ist, 1.5 auf alles anzuwenden, was Überschriften schweben lässt und Fließtext bei der falschen Größe beengt wirken lässt.

Regeln für die Laufweite:

Großer Text (Überschriften, Display) profitiert von einer leicht negativen Laufweite (-0.01em bis -0.02em). Der optische Abstand bei großen Größen erzeugt Lücken, die breiter wirken als beabsichtigt. Kleiner Text (Bildunterschriften, Beschriftungen, Großbuchstaben) profitiert von einer leicht positiven Laufweite (+0.02em bis +0.05em), da eine zu enge Laufweite bei kleinen Größen die Lesbarkeit verringert.

Absatzabstand:

Verwenden Sie einen konsistenten Multiplikator Ihrer Basiseinheit. Wenn Ihre Basis 16px mit einem 4px-Raster ist, sollte der Absatzabstand 16px oder 24px betragen, nicht einen willkürlichen Wert. Dies hält den vertikalen Rhythmus auf jeder Seite konsistent.

Responsives Verhalten

Ein Typografie-System, das nur an einem Breakpoint funktioniert, ist kein System. Es ist ein Screenshot.

Fluide Typografie skaliert Schriftgrößen mithilfe von CSS clamp() fließend zwischen Breakpoints. Anstatt bei einem Breakpoint von 16px auf 14px zu springen, interpoliert die Größe. Dies eliminiert die Layout-Ruckler, die durch harte Breakpoint-Änderungen entstehen.

font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem);

Skalenkomprimierung auf Mobilgeräten. Ihr Desktop-Skalenverhältnis (z.B. 1.250) erzeugt auf einem kleinen Bildschirm zu viel Kontrast. Ein 39px H1 auf dem Desktop funktioniert. Ein 39px H1 auf einem 375px-Telefon nicht. Die Lösung: Komprimieren Sie das Verhältnis auf Mobilgeräten (reduzieren Sie auf 1.125 oder 1.150), während die Basisgröße gleich bleibt. Die Hierarchie bleibt erhalten, die Größen passen sich an.

Mindestlesbare Größen. Gehen Sie niemals unter 16px für Fließtext auf Mobilgeräten. Gehen Sie niemals unter 12px für jeglichen Text. Barrierefreiheit ist nicht optional, und kleiner Text auf kleinen Bildschirmen versagt bei echten Benutzern.

Häufige Fehler im Typografie-System

Das Schriftarten-Buffet. Fünf Schriftarten, keine Begründung. Jede Seite wirkt wie eine andere Marke.

Die verwaiste Schriftstärke. Verwendung von Thin (100) oder Black (900) für ein einziges dekoratives Element und sonst nichts. Dies fügt visuelles Rauschen hinzu, ohne Systemwert zu schaffen.

Das Abstands-Raten. Zeilenhöhen und Laufweiten, die sich zwischen Komponenten ändern, weil niemand die Regeln definiert hat.

Die Nur-Desktop-Skala. Sieht auf einem 1440px-Mockup großartig aus. Bricht auf allem Kleineren auseinander, weil niemand das responsive Verhalten getestet hat.

Die fehlenden Tokens. Ein Typografie-System, das in einer Figma-Datei definiert, aber nicht in Design-Tokens oder CSS-Custom-Properties übersetzt wurde. Das System existiert in der Theorie, aber nicht im Code, sodass Ingenieure es in jedem Sprint neu erfinden.

FAQ

Was ist ein Typografie-System im Design?

Ein Typografie-System ist der vollständige Satz von Regeln, der die Schriftauswahl, -größe, -stärke, -abstände und das responsive Verhalten über eine Marke oder ein Produkt hinweg regelt. Es geht über die Auswahl von Schriftarten hinaus, um zu definieren, wie jedes Textelement skaliert und Konsistenz bewahrt.

Wie viele Schriftarten sollte ein Designsystem haben?

Zwei ist der Standard. Drei ist das Maximum für die meisten Systeme. Eine Display- oder Überschriftenschrift und eine Fließtextschrift decken die überwiegende Mehrheit der Designanforderungen ab. Das Hinzufügen weiterer Schriftarten erzeugt eine exponentielle Komplexität bei Paarungs-, Stärken- und responsiven Entscheidungen.

Was ist das beste Schriftskala-Verhältnis?

Es gibt kein einziges bestes Verhältnis. Die Große Terz (1.250) funktioniert gut für Marketing und Redaktionelles. Die Kleine Terz (1.200) eignet sich für dichte Benutzeroberflächen. Die Reine Quarte (1.333) erzeugt einen starken Überschriftenkontrast. Wählen Sie das Verhältnis, das zu Ihrer Inhaltsdichte und Ihren Hierarchieanforderungen passt.

Bauen Sie das System, bevor Sie die Schriftart wählen

Die Schriftart ist die letzte Entscheidung, nicht die erste. Definieren Sie Ihre Skala, Ihre Abstandsregeln, Ihre Stärkenhierarchie und Ihr responsives Verhalten. Dann wählen Sie die Schriftart, die diesen Einschränkungen entspricht. Eine mittelmäßige Schriftart innerhalb eines großartigen Systems wird eine großartige Schriftart ohne System jedes Mal übertreffen.