Typografie als Teil der Marke
Schriften transportieren Stimmung. Eine Serifenschrift wirkt oft klassisch, eine moderne Sans-Serif klar und zeitgemäß. Misch nicht zu viele Schriften – meist reichen eine für Überschriften und eine für Fließtext, höchstens eine dritte für Akzente. So bleibt das Bild kohärent und die Lesbarkeit ungestört. Die Wahl sollte zu Farben, Bildsprache und Tonalität passen.
Lesbarkeit steht an erster Stelle. Zu kleine Schrift, zu wenig Zeilenabstand oder zu lange Zeilen ermüden die Augen – Nutzer springen ab. Faustregeln: mindestens 16px für Fließtext, 60 bis 75 Zeichen pro Zeile, Zeilenabstand um 1,5. Der Kontrast zwischen Text und Hintergrund muss den Anforderungen an Barrierefreiheit genügen.
Webfonts und Performance
Jede zusätzliche Schriftdatei kostet Ladezeit. Lade nur die Schnitte und Zeichensätze, die du wirklich brauchst, nicht das komplette Paket. Subsetting reduziert die Dateigröße weiter, WOFF2 ist effizient. font-display: swap zeigt sofort eine Fallback-Schrift, statt den Text unsichtbar zu halten. Systemfonts als Fallback sind sofort verfügbar und wirken auf dem jeweiligen Gerät vertraut.
Hierarchie und Struktur
Überschriften gliedern Inhalte und helfen Nutzern wie Suchmaschinen, die Struktur zu erfassen. Konsistente Größen und Gewichte schaffen Hierarchie: Wichtiges fällt auf, Nebensächliches tritt zurück. Formatiere Listen, Zitate und hervorgehobene Passagen passend – so wird die Seite scanbar. Auf mobilen Geräten müssen Größen und Abstände angepasst werden.
Vermeide zu viele Schriftgrößen und -gewichte auf einer Seite. Ein klares System – eine Größe für H1, eine für H2, eine für den Fließtext – schafft Ruhe. Nutze Weißraum bewusst: Abstände zwischen Absätzen erleichtern das Lesen. Zu eng gesetzte Texte wirken unruhig.
Praktische Umsetzung
CSS-Variablen für Schriftfamilie, -größe und -gewicht erleichtern Anpassungen und konsistentes Theming. Mit clamp() lassen sich Schriftgrößen responsiv skalieren. Zwei gut gewählte Schriften reichen für die meisten Projekte und halten die Seite schnell und wiedererkennbar. Wer das von Anfang an mitdenkt, spart Nachbesserungen.
Schriftauswahl in der Praxis
Achte auf Lesbarkeit in verschiedenen Größen und auf verschiedenen Geräten – manche Schriften wirken in großen Überschriften stark, sind aber klein schwer lesbar. Prüfe, ob die Schrift alle benötigten Zeichen unterstützt, etwa Umlaute. Achte auf Lizenzen: Nicht jede Schrift darf uneingeschränkt im Web genutzt werden. Google Fonts oder Adobe Fonts bieten klare Bedingungen.
Typografie gezielt für Marke und Lesbarkeit einsetzen, Webfonts performant laden, klare Hierarchie schaffen. So wird Schrift zu einem starken, effizienten Element deiner Website.
