UX & UI Design
03 / Schrift im Interface
Kernfrage
Wie liest man am Bildschirm?
Im Interface ist Schrift fast überall: in Titeln, Buttons, Labels, Fehlermeldungen und Tabellen. Sie muss in kleinen Grössen funktionieren, auf vielen Bildschirmen und oft in mehreren Sprachen. Gute UI-Typografie ist ruhig, gut lesbar und folgt einer klaren Skala.
Lernziel: Du kannst eine Schrift für ein Interface auswählen, eine typografische Skala aufbauen und Text in Komponenten lesbar setzen.
Die beste UI-Schrift fällt nicht auf.
3.1 / Schrift wählen
Lesbar, vielseitig, verfügbar.
Für Interfaces zählen andere Eigenschaften als für ein Plakat:
01
Grosse x-Höhe
Kleinbuchstaben wirken auch klein offen.
02
Viele Schnitte
Regular, Medium, Bold, am besten als variable Schrift.
03
Klare Zeichen
I, l und 1 sowie O und 0 sind unterscheidbar.
Systemschriften wie SF Pro auf Apple-Geräten oder Roboto auf Android laden schnell und wirken vertraut. Eine eigene Schrift lohnt sich, wenn sie die Marke trägt, und kostet Ladezeit.
Zwei Familien reichen fast immer, oft genügt eine.
3.2 / Die typografische Skala
Wenige Grössen, klares Verhältnis.
Eine Skala leitet alle Grössen aus einer Basis und einem Verhältnis ab, zum Beispiel 16 px und 1,25. So entstehen etwa 13, 16, 20, 25, 31 und 39 px. Fünf bis sieben Stufen reichen für ein ganzes Produkt.
Am Handy wird das Verhältnis kleiner, damit grosse Titel nicht ganze Zeilen sprengen. Die Werte werden als Textstile oder Tokens gespeichert, etwa heading-1, body und label.
Jede Grösse braucht einen Grund.
3.3 / Text in Komponenten
Labels, Zeilen, Längen.
Im Interface ist Text Teil der Bedienung. Buttons brauchen kurze, eindeutige Verben, Labels stehen über dem Feld, Fehlermeldungen nennen die Lösung. Fliesstext braucht eine Zeilenhöhe um 1,4 bis 1,6, Titel etwas weniger.
Plane Platz für längere Texte: Deutsche Wörter sind oft deutlich länger als englische. Abschneiden mit «…» ist nur für Nebensächliches in Ordnung, nie für Aktionen oder Preise.
Text im Interface ist Bedienung.
Übung
Ein Typo-System
Aufgabe: Lege ein typografisches System für die Velowerk-Website fest.
SCHRITT 1
Wähle eine Schrift und begründe die Wahl mit drei Kriterien.
SCHRITT 2
Baue eine Skala mit fünf bis sieben Stufen für Desktop und Handy.
SCHRITT 3
Benenne jede Stufe nach ihrer Aufgabe, etwa Titel, Text und Label.
SCHRITT 4
Setze damit eine Seite mit Titel, Text, Formular und Fehlermeldung.
Auswertung: Wo hast du die Skala verlassen, und war es wirklich nötig?