Warum deine UI-Typografie nach Anfänger aussieht: 6 Fixes mit exakten Werten
Sechs Typografiefehler, die eine Oberfläche nach Anfänger aussehen lassen, und der Profi-Fix für jeden mit den genauen Zahlen: Typoskala, eine Schriftfamilie, lesbares Grau, Versalien, Zeilenhöhe und Hierarchie.
Anfänger-Typografie ist selten ein großer Fehler. Es sind sechs kleine, jeweils nach Gefühl entschieden: eine Größe, die passend aussah, eine Schrift, die lustig wirkte, ein Grau, das elegant schien. Profi-Typografie wirkt ruhig, weil jede dieser Entscheidungen einer Regel folgt. Hier sind die sechs, mit den Zahlen.
1. Nutze eine Typoskala
✕ Anfänger: Größen nach Gefühl gewählt
✓ Profi: ein Verhältnis, 1,25 ab 16
Links wurde jede Größe einzeln gewählt: 31, 27, 22, 17, 15, 13. Die Abstände dazwischen sind ungleichmäßig, daher sehen manche Stufen fast gleich aus und andere springen. Rechts ist jede Größe die vorherige mal 1,25: 16, 20, 25, 31, 39. Die Schritte sind gleichmäßig, also unterscheidet sich jede Stufe klar von der nächsten.
Ein Verhältnis zwischen 1,2 und 1,333 passt zu den meisten Oberflächen. Wähle eins, schreib es auf und tippe nie eine Größe ein, die nicht auf der Liste steht. In CSS sind das ein paar Variablen, in Figma ein Set an Textstilen. Unser Leitfaden zur modularen Typoskala hilft bei der Wahl des Verhältnisses.
:root {
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
}
2. Eine Familie, zwei Schnitte
Wochenende in Lissabon
ein kleines ReisetagebuchDrei Tage, zwei Viertel und eine sehr lange Fahrt mit der Straßenbahn.
MEHR LESEN✕ Anfänger: vier Schriften auf einer Karte
Wochenende in Lissabon
Ein kleines ReisetagebuchDrei Tage, zwei Viertel und eine sehr lange Fahrt mit der Straßenbahn.
Mehr lesen✓ Profi: eine Familie, Regular und Bold
Jede neue Schrift bringt ihre eigene Persönlichkeit mit, und vier Persönlichkeiten auf einer Karte streiten. Der Leser kann nicht erkennen, welche die Marke ist. Eine Familie in zwei Schnitten, Regular zum Lesen und Bold für Überschriften, reicht, um jede Ebene zu bauen, die ein Bildschirm braucht.
Wenn du eine zweite Familie willst, gib ihr genau eine Aufgabe, etwa nur Headlines, und halte sie überall dort. Füge nie eine Schrift hinzu, nur um ein Element „besonders“ zu machen.
3. Grau, das man lesen kann
Deine Bestellung ist unterwegs
Ankunft 14:20 bis 14:40 Uhr.Wir schreiben dir, wenn der Kurier in der Nähe ist.
✕ #B0B0B0 auf Weiß: schwer lesbar
Deine Bestellung ist unterwegs
Ankunft 14:20 bis 14:40 Uhr.Wir schreiben dir, wenn der Kurier in der Nähe ist.
✓ #6B6B6B auf Weiß: gut lesbar
Hellgrau wirkt in einer Designdatei auf einem hellen Monitor edel. Auf einem Handy draußen verschwindet es. Die Ankunftszeit links ist die nützlichste Zeile der Karte und die am schwersten lesbare.
#6B6B6B wirkt neben dem schwarzen Titel immer noch leise und bleibt lesbar. Als Faustregel gilt: Sekundärtext auf Weiß sollte nicht heller sein als etwa #767676, das hellste Grau, das das Barrierefreiheits-Minimum für Fließtext erfüllt.
4. Versalien nur für Labels
Wir haben unsere Bedingungen aktualisiert. Bitte prüfe die Änderungen vor deiner nächsten Bestellung.
✕ Anfänger: ein Satz in Versalien
UPDATE
Wir haben unsere Bedingungen aktualisiert
Bitte prüfe die Änderungen vor deiner nächsten Bestellung.
✓ Profi: ein Label in Versalien, Text in normaler Schreibweise
Versalien nehmen Wörtern ihre Form. In Kleinbuchstaben geben die hohen und kurzen Buchstaben jedem Wort eine Kontur, die dein Auge erkennt; in Versalien ist jedes Wort ein Rechteck, also muss ein Satz Buchstabe für Buchstabe gelesen werden. Deshalb fühlt sich ein Absatz in Versalien wie Schreien an und braucht länger zum Lesen.
Versalien funktionieren für das, wofür sie gemacht sind: kurze Labels aus ein bis drei Wörtern, etwa ein Rubrik-Tag, ein Status oder ein Button. Alles Längere kommt in normale Groß- und Kleinschreibung.
5. Enge Überschriften, luftiger Fließtext
Abstand gehört zur Typografie
Enger Zeilenabstand macht aus einem Absatz eine Wand. Gib Fließtext Luft zum Atmen und halte Überschriften kompakt.
✕ Anfänger: lockere Überschrift, gedrängter Text
Abstand gehört zur Typografie
Enger Zeilenabstand macht aus einem Absatz eine Wand. Gib Fließtext Luft zum Atmen und halte Überschriften kompakt.
✓ Profi: Überschrift bei 1,1, Text bei 1,5
Die Zeilenhöhe hat bei verschiedenen Größen gegensätzliche Aufgaben. Große Überschriften haben schon viel Raum innerhalb ihrer Buchstaben, deshalb hält eine Überschrift mit 1,1 als eine Form zusammen. Kleiner Fließtext braucht Platz zwischen den Zeilen, damit das Auge den Anfang der nächsten findet, deshalb bekommt er 1,5.
Die Anfänger-Version macht das Gegenteil, oft weil eine Zeilenhöhe auf alles angewendet wurde. Lege zwei Werte fest und nutze sie überall: etwa 1,1 bis 1,2 für Überschriften, 1,4 bis 1,6 für Fließtext.
6. Größe, Gewicht, Farbe, Abstand
Bestellung #2841
GeliefertHeute, 14:203 ArtikelGesamt 42,80 €
✕ Anfänger: alles fett, eine Größe
● Geliefert
Bestellung #2841
Heute, 14:20 · 3 ArtikelGesamt 42,80 €
✓ Profi: vier Werkzeuge, eine klare Reihenfolge
Wenn alles fett ist, ist nichts fett. Die Anfänger-Karte hat fünf Zeilen in gleicher Größe und gleichem Gewicht, also muss der Leser alle lesen, um die eine wichtige zu finden.
Die Profi-Karte nutzt vier Werkzeuge, jedes ein bisschen: Die Bestellnummer ist größer, der Status bekommt Farbe und einen Punkt, die Details werden grau, und Abstand trennt die Summe. Kein Werkzeug wird hart ausgereizt, deshalb wirkt sie ruhig. Mehr dazu unter typografische Hierarchie.
Die sechs Fixes in einer Tabelle
| Anfänger | Profi | Der Wert |
|---|---|---|
| Größen nach Gefühl | Eine Typoskala | 1,25 ab 16: 20, 25, 31, 39 |
| Mehrere Schriften | Eine Familie, zwei Schnitte | Regular und Bold |
| Hellgrauer Text | Lesbares Grau | #6B6B6B auf Weiß, nie heller als #767676 |
| Sätze in Versalien | Versalien für kurze Labels | Ein bis drei Wörter |
| Eine Zeilenhöhe für alles | Zwei Zeilenhöhen | Überschriften 1,1, Text 1,5 |
| Alles fett | Vier Werkzeuge der Hierarchie | Größe, Gewicht, Farbe, Abstand |
FAQ
Was ist eine gute Typoskala für UI?
Ein Verhältnis zwischen 1,2 und 1,333 ab einer Basis von 16 px. Ein Verhältnis von 1,25 ergibt 16, 20, 25, 31 und 39 px, genug Stufen für die meisten Bildschirme.
Wie viele Schriften sollte eine UI nutzen?
Eine Familie reicht, in zwei Schnitten. Füge eine zweite Familie nur mit einer festen Aufgabe hinzu, etwa für Headlines, und nutze sie überall gleich.
Welche Zeilenhöhe sollte Fließtext haben?
Etwa 1,5 für Fließtext und etwa 1,1 bis 1,2 für große Überschriften.
Welches Grau ist auf Weiß lesbar?
#767676 ist das hellste Grau, das das WCAG-Minimum für Fließtext auf Weiß erfüllt. #6B6B6B gibt etwas mehr Spielraum und wirkt trotzdem noch sekundär.
Sollte UI-Text komplett in Versalien stehen?
Nur für kurze Labels aus ein bis drei Wörtern. Längerer Text in Versalien ist langsamer zu lesen, weil Wörter ihre Form verlieren.
Quellen
- Typoskala: 16 × 1,25ⁿ = 20, 25, 31,25 und 39,06, gerundet dargestellt.
- Kontrast auf Weiß, berechnet mit der WCAG-2-Formel: #B0B0B0 2,2 zu 1, #767676 4,5 zu 1, #6B6B6B 5,3 zu 1. WCAG verlangt 4,5 zu 1 für Fließtext (1.4.3 Contrast (Minimum)).
- Zuerst als Karussell veröffentlicht auf UX Brainy.
Want type that looks this calm across your whole product? Our team builds UI and design systems with the typography decided once.
Get Started
