Typografie – mehr als nur Schriftauswahl
Typografie ist mehr als Schriftauswahl — sie bestimmt Lesbarkeit, Tonalität und Wahrnehmung eines Designs. Gute Typografie fällt nicht auf, schlechte Typografie fällt unangenehm auf. Sie ist eines der mächtigsten Gestaltungsmittel und gleichzeitig eines der am häufigsten unterschätzten.
Schriftklassen im Überblick
Serif
Serifen an Buchstabenenden — Fließtext Print, formal, traditionell
Sans-Serif
Ohne Serifen, klare Linien — Digital, modern, sachlich
Monospace
Alle Zeichen gleich breit — Code, technische Inhalte
Display
Für große Schriftgrade — Headlines, Logos, Werbung
Handschrift
Natürlicher, persönlicher Charakter — Dekorativ, sparsam einsetzen
Typografische Grundregeln
Schriftpaarung
Maximal 2-3 Schriftfamilien in einem Design. Kontrast zwischen den Schriften anstreben: Serif + Sans-Serif funktioniert oft gut. Schriften ähnlichen Charakters vermeiden — zu ähnlich wirkt beliebig, zu unterschiedlich chaotisch.
Zeilenlänge
Optimale Zeilenlänge: 45-75 Zeichen für Fließtext. Zu kurz: Auge muss zu oft springen. Zu lang: Auge verliert die nächste Zeile. Im Web erreicht durch max-width auf dem Textcontainer.
Zeilenabstand
Zeilenabstand (line-height) sollte 1.4-1.6x der Schriftgröße betragen für Fließtext. Überschriften können enger sein (1.1-1.3x). Zu eng: Text wirkt erdrückend. Zu weit: Zusammenhang geht verloren.
Schriftgröße und Hierarchie
Klare Hierarchie durch Größenunterschiede: H1 deutlich größer als H2, H2 deutlich größer als Body. Mindestens 16px (1rem) für Body-Text im Web. Unter 14px für längere Texte vermeiden.
Häufig gestellte Fragen
Wie wähle ich die richtige Schrift aus?
Zielgruppe und Tonalität definieren: Seriös und traditionell -> Serif. Modern und sachlich -> Sans-Serif. Schrift zur Marke passen lassen. Lesbarkeit vor Originalität. Kostenlose Optionen: Google Fonts, Adobe Fonts (mit Creative Cloud).
Was ist der Unterschied zwischen Schriftschnitt und Schriftfamilie?
Eine Schriftfamilie (z.B. 'Helvetica') umfasst alle Varianten. Schriftschnitte sind die Einzelvarianten: Regular, Bold, Italic, Light. Für Web: nur benötigte Schnitte laden um Performance zu optimieren.