Typografie I
Schriftauswahl
Warum die Wahl der richtigen Schrift mehr Wirkung hat als jede Farbe — und wie du als Entwickler sichere Entscheidungen triffst.
- Den Unterschied zwischen Serif, Sans-Serif und Monospace erklären und wissen, wann welche Kategorie passt
- Die fünf wichtigsten Font Weights kennen und gezielt für visuelle Hierarchie einsetzen
- Mit Google Fonts systematisch eine passende Schrift für ein Projekt auswählen
- Die Persönlichkeit einer Schrift erkennen und zum Kontext des Projekts abstimmen
- Häufige Schriftfehler in bestehenden UIs identifizieren und konkret benennen
Kerngedanke
Typografie ist das Erste, was Nutzer wahrnehmen
Noch bevor ein Nutzer einen einzigen Button geklickt hat, hat die Schrift bereits eine Aussage gemacht — über Professionalität, über Ton, über Vertrauen. Keine andere Design-Entscheidung wirkt so unmittelbar und unbewusst wie die Wahl der Typeface.
Entwickler brauchen ein System, keine Intuition
Designer verbringen Jahre damit, ein Gespür für Schriften zu entwickeln. Für Entwickler gibt es einen besseren Weg: klare Auswahlregeln und eine handvoll bewährter Schriften, die in fast jedem Kontext funktionieren.
Theorie
Die drei Schriftklassen im UI-Design
Die meisten Schriften lassen sich in drei Kategorien einteilen, die jeweils andere Stärken haben. Das Wichtigste zuerst: Im UI-Design ist Sans-Serif die sichere Standardwahl — sie ist auf Bildschirmen am lesbarsten. Serif und Monospace erfüllen spezifische Rollen.
Ohne Serifen — die kleinen Querstriche an Buchstabenenden. Auf Bildschirmen klar und modern. Für alle UI-Texte, Buttons, Labels und Fließtext die erste Wahl.
Mit Serifen. Wirkt klassisch, vertrauenswürdig, redaktionell. Gut für Überschriften in Editorials, Magazinen, Landingpages — seltener für lange Fließtexte in Apps.
400 — Regular
Standard-Fließtext. Gut lesbar, neutral. Für Beschreibungen, Labels, Hilfstexte.
500 — Medium
Leicht betont. Für sekundäre Titel, aktive Navigation, wichtige Body-Texte.
600 — Semibold
Deutlich betont, ohne zu schreien. Für Überschriften, Buttons, Card-Titel.
700 — Bold
Starke Betonung. Für primäre Überschriften, wichtige Zahlen, Hero-Text.
800 — Extrabold
Maximale Wirkung. Nur für Seitentitel, Splash-Screens oder Marketingtext.
Verwende maximal 2 Font-Weight-Stufen pro Seite: eine für normalen Text (400–500) und eine für Betonungen (600–700). Mehr Gewichtsstufen erzeugen Unruhe statt Hierarchie.
Theorie — Fortsetzung
Schrift und Persönlichkeit
Schriften kommunizieren Charakter — lange bevor ein Nutzer den Inhalt liest. Ein Banking-Dashboard und ein Startup-Produkt-Tool können technisch identisch sein, aber durch unterschiedliche Schriften völlig verschiedene Gefühle auslösen. Das ist keine Magie, sondern eine erlernbare Einschätzung.
Professionell / Seriös
Neutrale Sans-Serif, moderater Border Radius, reduzierte Farbigkeit. z.B. Inter, IBM Plex Sans
Modern / Tech
Geometrische Sans-Serif mit klaren Proportionen. z.B. Plus Jakarta Sans, DM Sans
Freundlich / Zugänglich
Gerundete Sans-Serif, weiche Formen. z.B. Nunito, Poppins, Quicksand
Filter: mindestens 10 Schriftschnitte (Styles)
Schriften mit vielen Gewichten wurden sorgfältiger designed. Auf Google Fonts unter „Number of styles" auf 10+ filtern — das eliminiert sofort ~85% der Optionen.
Nach Beliebtheit sortieren
Populäre Schriften sind beliebt, weil sie funktionieren. Sortierung nach „Popularity" auf Google Fonts zeigt bewährte Optionen zuerst — kein schlechter Ausgangspunkt.
Vorschau mit eigenem Text testen
Klicke auf eine Schrift und ändere den Vorschautext auf echten Inhalt aus deinem Projekt. Generischer Beispieltext verdeckt Schwächen bei bestimmten Buchstabenkombinationen.
Weniger laden ist mehr
Lade nur die Gewichte, die du tatsächlich verwendest (z.B. 400, 600, 700). Jeder zusätzliche Schnitt kostet Ladezeit. Vier Gewichte sind fast immer genug.
Vergleichsbeispiel 1 von 4
Font Weight als Hierarchie-Werkzeug
Eine der häufigsten Schwächen in Entwickler-UIs: alle Texte haben das gleiche Gewicht. Das Auge findet keinen Einstiegspunkt — alles konkurriert gleichzeitig um Aufmerksamkeit. Font Weight ist eine der einfachsten und wirkungsvollsten Methoden, um visuelle Hierarchie zu erzeugen, ohne Farbe oder Größe zu verändern.
Im Vorher-Beispiel tragen alle drei Textzeilen gleich viel Gewicht — das Auge weiß nicht, wo es anfangen soll. Im Nachher-Beispiel wurde nur Font Weight und Textfarbe verändert, keine Größe, kein Layout. Der Titel zieht jetzt sofort die Aufmerksamkeit auf sich, der Body-Text liefert die Information, und das Datum tritt visuell zurück.
Das ist der Kern von visueller Hierarchie: nicht alles gleichzeitig betonen, sondern entscheiden, was zuerst gesehen wird.
Font Weight und Textfarbe sind verwandte Werkzeuge: Bold + primäre Farbe = maximale Betonung. Regular + tertiäre Farbe = visuelles Zurücktreten. Kombiniere beide gezielt statt nur auf Schriftgröße zu setzen.
Vergleichsbeispiel 2 von 4
Schriftpersönlichkeit und Kontext
Die gleiche UI mit zwei verschiedenen Schriften sendet völlig unterschiedliche Signale. Das ist kein Detail — es ist die erste unbewusste Bewertung, die ein Nutzer trifft. Die Schriftwahl muss zur Funktion und zum Vertrauen passen, das die Anwendung aufbauen soll.
Das Vorher-Beispiel zeigt eine absichtlich extreme Fehlanpassung — eine verspielt wirkende Schrift in einer Banking-UI. Das ist natürlich überzeichnet, aber das Prinzip gilt auch subtiler: Eine zu runde, zu dekorative oder zu ungewöhnliche Schrift erzeugt Dissonanz, wenn der Kontext Seriosität verlangt.
Im Nachher-Beispiel signalisiert die neutrale, klare Sans-Serif: Diese Anwendung ist verlässlich. Das Monospace-Label für die Kategorie passt außerdem zum technischen Kontext und verstärkt das Präzisionsgefühl.
Frage bei jeder Schriftwahl: „Passt diese Schrift dazu, was Nutzer beim ersten Öffnen fühlen sollen?" Sicherheit, Spaß, Kompetenz und Effizienz verlangen unterschiedliche typografische Signale.
Vergleichsbeispiele 3 + 4 von 4
System-Schriften vs. zu viele Schriften
Zwei häufige Extremfehler: zu viele Schriften gleichzeitig — und die Wahl einer unlesbaren Display-Schrift für Fließtext.
Dieser Bericht enthält alle relevanten Kennzahlen der letzten Woche. Bitte überprüfe die Einträge sorgfältig und bestätige die Daten bis Freitag.
Dieser Bericht enthält alle relevanten Kennzahlen der letzten Woche. Bitte überprüfe die Einträge sorgfältig und bestätige die Daten bis Freitag.
Zu viele Schriften: Drei verschiedene Familien in einer Karte erzeugen visuelles Chaos — keine einheitliche Stimme. Eine gut ausgewählte Familie mit verschiedenen Gewichten erledigt dieselbe Aufgabe eleganter.
Falsche Schrift für den Zweck: Kursive Schreibschriften und dekorative Serifs sind für Überschriften gemacht — nicht für dichte Informationstexte. Für Fließtext gilt: x-Höhe, Laufweite und Lesbarkeit bei kleinen Größen sind entscheidend.
Verwende maximal 2 Schriftfamilien pro Projekt: eine für UI-Text und optional eine für Überschriften oder Code. Mehr als zwei Familien brauchen triftigen Grund — und sehr gutes Auge.
Praxisaufgabe
Typografie einer Profil-Card verbessern
Aufgabenstellung
Du bekommst eine Profil-Card mit mehreren typografischen Schwächen: alle Texte haben das gleiche Gewicht, keine visuelle Hierarchie, Farben unterscheiden Ebenen nicht. Verbessere die Card durch gezielte Änderungen an Font Weight, Textfarbe und ggf. Schriftgröße — ohne das Layout zu ändern.
- Identifiziere die primäre, sekundäre und tertiäre Information in der Card
- Setze Font Weight gezielt ein, um diese drei Ebenen zu unterscheiden
- Passe Textfarben an: primary / secondary / tertiary / ghost
- Überlege, ob eine Monospace-Schrift für ein Element (z.B. Username oder Rolle) passt
- Teste dein Ergebnis im Dark Mode — funktioniert die Hierarchie dort genauso?