Typografie
Typografie ist die Gestaltung mit Schrift und ein zentrales Element jeder Website. Sie beeinflusst nicht nur das Erscheinungsbild, sondern auch die Lesbarkeit, Wahrnehmung und Stimmung einer digitalen Oberfläche. Eine gute Typografie sorgt dafür, dass Informationen schnell erfasst und angenehm gelesen werden können. Neben der Auswahl einer geeigneten Schriftart spielen auch Faktoren wie Schriftgrösse, Zeilenabstand und Kontrast eine wichtige Rolle.
Im Webdesign ist Typografie besonders wichtig, weil ein grosser Teil der Inhalte aus Text besteht. Deshalb müssen Schriftarten so gewählt und eingesetzt werden, dass sie auf unterschiedlichen Geräten – vom Smartphone bis zum Monitor – klar, konsistent und zugänglich erscheinen.
Schriftarten und Schriftfamilien
Schriftarten werden im Webdesign in sogenannte Schriftfamilien unterteilt.
Die wichtigsten sind:
Serifen-Schriften:
Diese Schriften besitzen kleine „Füsschen“ oder Linien am Ende der Buchstaben. Sie wirken klassisch und sind oft in gedruckten Texten zu finden (z. B. Times New Roman). Im Web werden sie seltener eingesetzt, da sie auf Bildschirmen in kleinen Grössen weniger klar wirken.
Serifenlose Schriften (Sans-Serif):
Diese Schriften verzichten auf die kleinen Linien und wirken dadurch moderner und klarer (z. B. Arial, Helvetica oder Open Sans). Sie sind im Web besonders beliebt, da sie auf Displays gut lesbar sind.
Monospace-Schriften:
Alle Buchstaben haben den gleichen Zeichenabstand (z. B. Courier New). Sie werden häufig für Code oder technische Inhalte verwendet.
Dekorative Schriften:
Diese sind eher gestalterisch und werden sparsam eingesetzt, z. B. für Überschriften oder Logos.
Typografische Gestaltung im Web
Bei der Gestaltung von Text im Web spielen mehrere Faktoren zusammen:
Schriftgrösse:
Die Schriftgrösse sollte immer dem Endgerät und der Lesedistanz angepasst werden. Für den Fliesstext sind rund 16 px empfehlenswert, für Überschriften 24–48 px, je nach Hierarchie. Wichtig ist ein deutliches Grössenverhältnis zwischen Überschriften und Text, damit die Struktur sofort erkennbar ist.
Zeilenabstand (Line Height):
Ein ausreichend grosser Zeilenabstand verbessert die Lesbarkeit und sorgt für ein ruhiges Schriftbild. Ein Wert zwischen 1.4 und 1.6 ist ideal. Zu enge Zeilen wirken gedrängt, zu grosse Abstände unterbrechen den Lesefluss.
Zeilenlänge:
Zu lange Zeilen erschweren das Lesen, weil das Auge den Anfang der nächsten Zeile schwer findet. Optimal sind 60 bis 80 Zeichen pro Zeile. Kürzere Zeilen wirken übersichtlicher, besonders auf mobilen Geräten.
Kontrast:
Text und Hintergrund sollten sich klar voneinander abheben. Ein dunkler Text auf hellem Hintergrund bietet die beste Lesbarkeit. Schwache Kontraste zum Beispiel hellgrauer Text auf Weiss, wirken zwar modern, sind aber schwer lesbar, vor allem bei hellem Umgebungslicht.
Ausrichtung:
Der Fliesstext sollte linksbündig gesetzt werden, da dies dem natürlichen Leseverhalten entspricht. Blocksatz kann sauber wirken, erzeugt aber oft unregelmässige Wortabstände. Zentrierter Text eignet sich nur für kurze Zitate oder Überschriften.
Diese Faktoren sorgen gemeinsam für eine ruhige, gut lesbare Textgestaltung, die Nutzer nicht ermüdet und Inhalte klar vermittelt.
Webfonts
Im Gegensatz zum Druck werden Schriftarten im Web über sogenannte Webfonts eingebunden. Dadurch ist sichergestellt, dass eine Schriftart auf allen Geräten gleich aussieht – auch wenn sie auf dem Computer des Nutzers nicht installiert ist.
Dort können Designer lizenzfreie Schriften auswählen und in den Code einer Website einbinden.
Google Fonts ist besonders für Websites optimiert. Die Schriften sind technisch leicht, werden schnell geladen und funktionieren in allen modernen Browsern. Zudem sind sie responsiv – sie passen sich automatisch an unterschiedliche Bildschirmgrössen an. Ein grosser Vorteil ist, dass Google Fonts komplett kostenlos und ohne Lizenzgebühren nutzbar ist, was es zur beliebtesten Lösung für Webdesigner macht.
Ein Beispiel für eine CSS-Einbindung lautet:
font-family: 'Roboto Slab';Mit dieser Methode wird die Schrift Open Sans vom Server geladen und im Browser angezeigt.
Hierarchien und Gestaltungssysteme
Eine gute Typografie arbeitet mit klaren Hierarchien, um Inhalte übersichtlich zu strukturieren:
Überschriften (h1, h2, h3 …): geben die inhaltliche Struktur wieder.
Fliesstext (p): vermittelt Informationen und sollte gut lesbar sein.
Hervorhebungen (strong, em): lenken den Blick auf wichtige Begriffe.
Diese Hierarchie sorgt dafür, dass der Leser Informationen schnell erfassen und sich leicht orientieren kann. Sie ist zugleich ein wichtiges Element für Barrierefreiheit, da Bildschirmleseprogramme die Struktur auslesen können.
Bedeutung für das Design
Typografie ist weit mehr als nur die Wahl einer Schriftart. Sie trägt wesentlich zur Identität und Wiedererkennbarkeit einer Website bei. Eine moderne, klare Schrift kann eine Website seriös und professionell wirken lassen, während eine verspielte Typografie eher eine kreative oder emotionale Wirkung erzielt.
Gute Typografie verbindet Funktionalität und Ästhetik: Sie macht Informationen zugänglich, lenkt den Blick gezielt und unterstützt das Gesamterlebnis einer Website. Damit ist sie – ähnlich wie Farbe und Layout – ein entscheidender Bestandteil eines gelungenen Designs.