Was bedeutet „Typography“?

Typografie ist die bewusste Gestaltung von Schrift, Abständen, Hierarchie und Lesbarkeit in Print- und digitalen Medien. Der englische Begriff Typography meint dasselbe: Schrift wird nicht nur ausgewählt, sondern so eingesetzt, dass Menschen Inhalte schneller verstehen, Marken besser einordnen und digitale Oberflächen leichter nutzen können.

Für mich ist Typografie eine oft unterschätzte Grundlage guter Kommunikation. In über 20 Jahren Arbeit mit KMU habe ich häufig gesehen: Eine Website kann technisch sauber sein und ein Logo kann gut aussehen – wenn die Schriftgestaltung unruhig, zu klein oder schwer lesbar ist, verliert die gesamte Marke an Vertrauen.

Gute Schriftgestaltung ist keine Dekoration. Gute Schriftgestaltung macht Inhalt verständlich, Haltung sichtbar und Marken wiedererkennbar.

Typografie: Bedeutung für Marke, Website und Lesbarkeit

Schriftgestaltung beeinflusst, wie Du Informationen wahrnimmst. Eine klare Schriftart wirkt anders als eine verspielte, eine großzügige Zeilenhöhe anders als ein eng gesetzter Textblock. Dadurch entsteht Markenwirkung: Schrift kann Nähe, Präzision, Qualität, Tradition, Innovation oder Bodenständigkeit vermitteln.

Gerade im Webdesign entscheidet die Schriftgestaltung nicht nur über Ästhetik, sondern über Orientierung. Besucher scannen Überschriften, Zwischenüberschriften, Fließtext, Buttons und Hinweise. Wenn die visuelle Hierarchie unklar ist, wirkt eine Seite anstrengend – auch dann, wenn der Inhalt fachlich gut ist.

In unseren Projekten für Branding & Design betrachten wir Schrift immer als Teil der Positionierung und des Corporate Design. Die Frage lautet nicht: „Welche Schrift gefällt uns?“ Die bessere Frage lautet: „Welche Schrift unterstützt die Wahrnehmung, die Deine Marke im Markt aufbauen soll?“

Wichtige Begriffe der Typografie

Schriftart, Schriftfamilie und Schriftschnitt

Eine Schriftart beschreibt das konkrete Design von Buchstaben, Zahlen und Zeichen. Eine Schriftfamilie umfasst mehrere Varianten derselben Schrift, zum Beispiel Regular, Italic, Medium, Bold oder Black. Diese Varianten heißen Schriftschnitte.

Für eine Marke ist eine gut ausgebaute Schriftfamilie oft wertvoller als eine einzelne schöne Schrift. Mit mehreren Schriftschnitten kannst Du Überschriften, Fließtext, Zitate und Hervorhebungen konsistent gestalten, ohne ständig neue Fonts einzuführen.

Schriftgröße, Zeilenhöhe und Zeilenlänge

Die Schriftgröße bestimmt, wie groß Text dargestellt wird. Die Zeilenhöhe beschreibt den vertikalen Abstand zwischen den Textzeilen. Die Zeilenlänge beschreibt, wie viele Zeichen eine Zeile ungefähr enthält.

Für gute Lesbarkeit werden häufig Zeilenlängen von etwa 45 bis 75 Zeichen pro Zeile empfohlen. Diese Spanne nennt Robert Bringhurst in The Elements of Typographic Style (1992/2012) für einspaltigen Lesetext als weithin zufriedenstellenden Bereich. Im Web ist dieser Wert kein starres Gesetz, aber eine sinnvolle Orientierung: Zu lange Zeilen ermüden, zu kurze Zeilen zerhacken den Lesefluss.

Kerning und Laufweite

Kerning bezeichnet den Abstand zwischen einzelnen Buchstabenpaaren. Laufweite beschreibt den allgemeinen Zeichenabstand über ein Wort, eine Zeile oder einen Textabschnitt hinweg. Feines Kerning ist besonders bei Logos, Claims und großen Überschriften wichtig, weil kleine Unstimmigkeiten dort sofort auffallen.

Kontrast, Ausrichtung und Hervorhebung

Kontrast meint hier vor allem den Unterschied zwischen Schrift und Hintergrund, aber auch den Unterschied zwischen Überschrift und Fließtext. Linksbündiger Text ist im Web meistens am angenehmsten zu lesen. Zentrierte Texte funktionieren für kurze Statements, werden bei längeren Absätzen aber schnell mühsam.

Hervorhebungen sollten gezielt eingesetzt werden: Fettungen helfen beim Scannen, Kursivschrift kann Nuancen markieren, Unterstreichungen sollten im Web meist Links vorbehalten bleiben. Wenn alles betont ist, ist nichts mehr wichtig.

Web-Typografie: Webfonts, Geräte und mobile Lesbarkeit

Web-Typografie hat eigene Anforderungen. Eine Schrift muss nicht nur gut aussehen, sondern auf Smartphone, Tablet und Desktop funktionieren. Webfonts ermöglichen markentypische Schriftgestaltung im Browser, können aber Ladezeit, Datenschutz und technische Stabilität beeinflussen. Systemschriften laden meist schneller, wirken aber oft weniger eigenständig.

Responsive Typografie bedeutet, dass Schriftgrößen, Zeilenhöhe, Abstände und Layouts je nach Bildschirmgröße sinnvoll skalieren. Mobile Lesbarkeit braucht meist größere Schrift, kürzere Zeilen, klare Kontraste und ausreichend Abstand zwischen Elementen. Kleine graue Texte, enge Zeilen und schwache Buttons sind typische Fehler, die ich bei KMU-Websites immer wieder sehe.

Bei Webdesign & Entwicklung geht es deshalb nicht darum, eine Schrift nur „schön“ einzubauen. Eine Website braucht ein typografisches System: klare Größenstufen, definierte Abstände, konsistente Überschriften und Textstile, die im Alltag wirklich gepflegt werden können.

Typografie und Barrierefreiheit

Schriftgestaltung ist ein wichtiger Teil von Barrierefreiheit. Menschen mit Sehschwäche, Konzentrationsproblemen oder mobilen Nutzungssituationen profitieren von klaren Schriften, ausreichendem Kontrast, skalierbaren Schriftgrößen und einer verständlichen Textstruktur.

Die WCAG 2.2 des W3C definiert unter anderem Mindestanforderungen an den Farbkontrast. Für normalen Text fordert Erfolgskriterium 1.4.3 auf Level AA in der Regel ein Kontrastverhältnis von mindestens 4,5:1, für großen Text 3:1. Zusätzlich betreffen Kriterien wie Visual Presentation und Text Spacing die anpassbare Darstellung von Text.

Typische Fehler bei Schriftgestaltung auf KMU-Websites

Viele typografische Probleme entstehen nicht aus mangelndem Geschmack, sondern aus fehlendem System. Besonders häufig sehe ich diese Fehler:

  • Zu kleine Schriftgrößen: Fließtext wirkt auf dem Desktop noch akzeptabel, ist auf dem Smartphone aber schwer lesbar.
  • Zu lange Zeilen: Breite Textblöcke erschweren den Rücksprung zur nächsten Zeile.
  • Zu viele Schriftarten: Mehr als zwei bis drei Schriftfamilien machen ein Erscheinungsbild schnell unruhig.
  • Schwacher Kontrast: Hellgrauer Text auf weißem Hintergrund sieht fein aus, kostet aber Lesbarkeit.
  • Unklare Überschriftenhierarchie: Wenn H2, H3 und Fließtext kaum unterscheidbar sind, verliert der Inhalt Struktur.
  • Inkonsistente Stile: Buttons, Zitate, Teaser und Formulare wirken wie aus verschiedenen Systemen zusammengesetzt.

Ein Brand Style Guide hilft, solche Entscheidungen verbindlich zu dokumentieren. Für kleine Teams ist das besonders wichtig, weil nicht jede neue Landingpage, Präsentation oder Broschüre wieder bei null beginnen sollte.

FAQ: Häufige Fragen zur Typografie

Was ist Typografie?

Typografie ist die bewusste Gestaltung von Schrift, Abständen, Zeilen, Kontrast und visueller Hierarchie. Gute Schriftgestaltung macht Inhalte leichter verständlich und sorgt dafür, dass Deine Marke professioneller wahrgenommen wird.

Warum ist Typografie wichtig?

Typografie beeinflusst Lesbarkeit, Vertrauen und Markenwirkung. Wenn Schriftgrößen, Zeilenhöhe und Kontrast nicht passen, verlieren Nutzer schneller die Orientierung und verlassen eine Website eher.

Was ist der Unterschied zwischen Schriftart und Typografie?

Eine Schriftart ist das Design einzelner Buchstaben und Zeichen. Typografie ist das gesamte System dahinter: Schriftwahl, Schriftfamilie, Größen, Abstände, Kerning, Laufweite, Ausrichtung, Kontrast und Hierarchie.

Welche Schrift eignet sich für Websites?

Für Websites eignen sich gut lesbare Schriften mit mehreren Schriftschnitten, sauberer Darstellung auf verschiedenen Geräten und verlässlicher technischer Einbindung. Ob Webfonts oder Systemschriften besser sind, hängt von Markenanspruch, Ladezeit, Datenschutz und Corporate Design ab.

Wie viele Schriftarten sollte eine Marke verwenden?

In den meisten Fällen reichen ein bis zwei Schriftfamilien, maximal drei. Wichtiger als Vielfalt ist ein klares typografisches System mit definierten Rollen für Überschriften, Fließtext, Hervorhebungen und Interface-Elemente.

Quellen

  1. Robert Bringhurst: The Elements of Typographic Style — Fachbuch, Hartley & Marks (1992/2012)
  2. W3C: Web Content Accessibility Guidelines (WCAG) 2.2 — w3.org (2024)
Florian Berger
Ähnliche Ausdrücke Typografie, Typography, Schriftgestaltung, Schriftsetzung
Typografische Hierarchie
Bloggerei.de