%402x.svg)
Typografie ist die Kunst, Schrift so einzusetzen, dass Inhalte lesbar, verständlich und wirkungsvoll werden. Von Schriftwahl über Hierarchie bis Mikrotypografie – ein umfassender Überblick.
Über 90 Prozent aller Designflächen bestehen aus Text. Ob Website, Plakat, Verpackung oder App – Typografie ist das Gestaltungsmittel, das fast überall den größten Anteil der Fläche einnimmt. Und trotzdem wird sie im Alltag oft übersehen, weil gute Typografie genau das tut: Sie funktioniert, ohne aufzufallen. Schlechte Typografie dagegen fällt sofort auf – auch wenn die meisten Menschen nicht benennen können, was genau stört.
In diesem Artikel erklären wir, was Typografie ausmacht, warum sie weit mehr ist als eine schöne Schrift und welche Prinzipien den Unterschied zwischen lesbarem Design und visuellem Chaos ausmachen.
Der Begriff kommt aus dem Griechischen: typos (Gestalt) und graphein (schreiben). Typografie beschreibt die bewusste Gestaltung und Anordnung von Schrift. Das reicht von der Auswahl einer Schriftart über die Definition von Größen und Abständen bis hin zur Strukturierung ganzer Seitenlayouts.
Typografie hat dabei zwei Ebenen, die zusammenspielen müssen: die Makrotypografie und die Mikrotypografie.
Makrotypografie beschreibt die Gesamtgestaltung einer Seite oder eines Screens. Sie umfasst das Layout, die Spaltenbreite, den Satzspiegel, die Anordnung von Überschriften, Fließtext, Bildunterschriften und Marginalien. Makrotypografie entscheidet, wie ein Text auf den ersten Blick wirkt – geordnet oder chaotisch, einladend oder abschreckend, professionell oder amateurhaft.
Im Webdesign ist Makrotypografie besonders relevant, weil Nutzer:innen Inhalte selten linear lesen. Sie scannen Seiten, springen zwischen Überschriften und suchen nach Ankerpunkten. Eine durchdachte Makrotypografie unterstützt dieses Verhalten, statt dagegen zu arbeiten.
Mikrotypografie beschäftigt sich mit den Feinheiten: Zeichenabstände (Kerning), Wortabstände, Zeilenabstände (Leading), die korrekte Verwendung von Anführungszeichen, Gedankenstrichen und geschützten Leerzeichen. Im Deutschen sind beispielsweise Gänsefüßchen typografisch korrekt – gerade Anführungszeichen sind ASCII-Notlösungen und mindern die Qualitätsanmutung sofort.
Ein weiteres Beispiel: Der Gedankenstrich ist ein Halbgeviertstrich, nicht der kürzere Bindestrich. Zahlen mit Einheiten werden mit geschütztem Leerzeichen getrennt, damit 12 kg nicht am Zeilenende auseinandergerissen wird. Solche Details fallen den meisten Menschen nicht bewusst auf – aber ihr Fehlen erzeugt ein diffuses Gefühl von mangelnder Qualität.
Jede Schriftart transportiert eine Stimmung, bevor ein einziges Wort gelesen wird. Das ist keine esoterische Behauptung, sondern das Ergebnis jahrhundertelanger Formgebung und kultureller Prägung.
Schriften mit kleinen Endstrichen an den Buchstaben – etwa Times New Roman, Georgia oder Garamond. Sie wirken traditionell, vertrauenswürdig und lesefreundlich in langen Fließtexten, besonders im Print. Viele Zeitungen, Buchverlage und Kanzleien setzen auf Serifen, weil sie Seriosität und Beständigkeit kommunizieren.
Schriften ohne Endstriche – etwa Helvetica, Arial, Inter oder die Futura. Sie wirken modern, klar und funktional. Im Webdesign haben sich serifenlose Schriften als Standard etabliert, weil sie auf Bildschirmen in verschiedenen Größen und Auflösungen gut lesbar sind.
Innerhalb der serifenlosen Schriften gibt es einen wichtigen Unterschied: Humanistische Groteskschriften orientieren sich an handschriftlichen Formen und wirken warm und zugänglich. Geometrische Groteskschriften basieren auf Grundformen wie Kreis und Quadrat und wirken technisch und präzise. Die Wahl zwischen beiden ist eine strategische Entscheidung, die eng mit der Markenpersönlichkeit zusammenhängt.
Schriften, die für große Darstellungen, Überschriften oder besondere Akzente gestaltet wurden. Sie können expressiv, verspielt oder markant sein – eignen sich aber nie für Fließtext. Der häufigste Fehler: Eine Display-Schrift in kleiner Größe für Absätze einsetzen. Das zerstört die Lesbarkeit und wirkt unprofessionell.
Eines der wichtigsten Konzepte in der Typografie ist die visuelle Hierarchie. Sie beantwortet die Frage: Was lesen Nutzer:innen zuerst? Was als Zweites? Was können sie überspringen?
Hierarchie wird durch mehrere Mittel erzeugt: Schriftgröße, Schriftgewicht (fett, normal, leicht), Farbe, Position und Abstand. Eine Überschrift in 32 Pixel und Bold zieht mehr Aufmerksamkeit als ein Fließtext in 16 Pixel und Regular – das klingt trivial, wird aber erstaunlich oft falsch umgesetzt.
Ein häufiger Fehler: Zu viele Hierarchiestufen auf einer Seite. Wenn alles betont ist, ist nichts betont. Professionelle Typografie arbeitet mit maximal drei bis vier klar unterscheidbaren Stufen: Headline, Subheadline, Fließtext und eventuell Bildunterschriften oder Metadaten.
Die meisten Designprojekte arbeiten mit zwei Schriftarten – selten mit mehr. Die Herausforderung liegt in der Kombination: Sie muss Kontrast erzeugen und trotzdem harmonisch wirken.
Bewährte Kombinationsprinzipien sind: eine Serifenschrift für Überschriften mit einer serifenlosen für Fließtext (oder umgekehrt), zwei Schriften aus derselben Schriftfamilie in unterschiedlichen Schnitten, oder eine expressive Display-Schrift für Headlines mit einer neutralen Textschrift für den Rest.
Was nicht funktioniert: Zwei ähnliche Schriften, die sich nur minimal unterscheiden. Das wirkt nicht wie eine bewusste Entscheidung, sondern wie ein Fehler.
Im Web gelten andere Regeln als im Print. Schriften müssen auf unterschiedlichen Bildschirmen, in verschiedenen Auflösungen und auf Geräten von Smartphone bis Desktop funktionieren. Das hat konkrete Konsequenzen:
Die Grundschriftgröße im Web sollte mindestens 16 Pixel betragen. Alles darunter ist auf mobilen Geräten schwer lesbar. Der Zeilenabstand sollte mindestens das 1,4- bis 1,6-fache der Schriftgröße betragen. Die Zeilenlänge beeinflusst die Lesbarkeit massiv: Optimal sind 60 bis 80 Zeichen pro Zeile. Zu breite Textblöcke überfordern das Auge, zu schmale erzeugen zu viele Zeilenumbrüche.
Responsive Typografie – also die Anpassung von Schriftgrößen an die Bildschirmbreite – ist im modernen Webdesign unverzichtbar. Über CSS-Einheiten wie clamp() oder vw lassen sich Schriftgrößen fluid skalieren, sodass Headlines auf dem Desktop groß und kraftvoll wirken und auf dem Smartphone trotzdem lesbar bleiben.
Seit der Einführung von Webfonts über Dienste wie Google Fonts und Adobe Fonts haben Designer:innen eine riesige Auswahl. Gleichzeitig beeinflussen Schriften die Ladezeit einer Website: Jeder zusätzliche Schriftschnitt kostet Performance. Professionelles Webdesign wählt daher gezielt aus – drei bis vier Schnitte einer Schrift reichen für die allermeisten Projekte.
Gute Typografie ist barrierefreie Typografie. Das betrifft Schriftgröße, Kontrast zwischen Text und Hintergrund, ausreichende Zeilenabstände und die Vermeidung von reinem Versaliensatz für längere Texte. Seit dem Barrierefreiheitsstärkungsgesetz (BFSG) gelten für viele Websites verbindliche Anforderungen an die Lesbarkeit – typografische Entscheidungen haben also auch rechtliche Konsequenzen.
Typografie ist unsichtbare Arbeit – im besten Sinne. Wenn sie funktioniert, merkt niemand etwas. Wenn sie nicht funktioniert, wirkt alles irgendwie unprofessionell, ohne dass die meisten Menschen sagen können, woran es liegt. Genau deshalb gehört Typografie zu den Kompetenzen, die professionelles Design von Amateurdesign unterscheiden.
Eine durchdachte Schriftwahl kommuniziert Markenwerte, bevor ein einziges Wort gelesen wird. Die richtige Hierarchie führt Nutzer:innen durch komplexe Inhalte. Und saubere Mikrotypografie signalisiert: Hier hat jemand auf die Details geachtet – und das überträgt sich auf die Wahrnehmung des gesamten Unternehmens.
Bei Büro Bloock ist Typografie keine nachgelagerte Entscheidung, sondern Teil jedes Corporate Designs und jeder Website. Wir wählen Schriften strategisch aus – passend zur Markenpositionierung, zum Medium und zur Zielgruppe. Und wir achten auf die Details, die den Unterschied machen: korrekte Anführungszeichen, saubere Hierarchien, responsive Typografie, die auf jedem Gerät funktioniert.
