Design-Grundlagen · Modul 2: Typografie

Lektion 1 von 4Text 13 Min.

Schriften verstehen: Klassen und Charakter

Lernziele
  • die Anatomie einer Schrift mit den wichtigsten Fachbegriffen beschreiben
  • die großen Schriftklassen unterscheiden
  • die Wirkung einer Schrift einschätzen
  • Schriften nach Zweck statt nach Geschmack auswählen

Typografie ist der Teil der Gestaltung, der am häufigsten unterschätzt wird. Dabei besteht der größte Teil jeder Website, jeder Präsentation und jedes Angebots aus Text. Farben und Bilder prägen den ersten Eindruck, aber es ist die Schrift, mit der Besucher die meiste Zeit verbringen. Eine gut gewählte und gut gesetzte Schrift wird kaum bemerkt – sie lässt den Inhalt einfach wirken. Eine schlecht gewählte ermüdet, verwirrt oder vermittelt unbeabsichtigt einen falschen Charakter.

Die Typografin Beatrice Warde verglich gute Typografie 1930 mit einem Kristallglas: Es soll den Wein zeigen, nicht sich selbst. Dieses Bild ist bis heute ein guter Maßstab. Diese erste Lektion des Moduls legt die Grundlagen: Woraus eine Schrift besteht, welche Schriftklassen es gibt und wie man eine Schrift auswählt, die zum Zweck passt.

1. Die Anatomie einer Schrift

Um über Schriften zu sprechen, helfen einige Fachbegriffe. Sie beschreiben die Proportionen, die darüber entscheiden, wie eine Schrift wirkt und wie gut sie sich lesen lässt.

Abb. 1.1Die wichtigsten Maße einer Schrift
Abb. 1.1: Die wichtigsten Maße einer Schrift. Anatomie einer Schrift am Wort Hxpg: Grundlinie, x-Höhe, Versalhöhe, Oberlänge und Unterlänge sind als Linien eingezeichnet. Eine Serife ist am Buchstaben H markiert.
Abb. 1.1Alle Buchstaben stehen auf der Grundlinie. Die x-Höhe ist die Höhe der Kleinbuchstaben ohne Ober- und Unterlängen – sie bestimmt maßgeblich, wie groß eine Schrift wirkt.
Definition 1.1
x-Höhe
Die Höhe der Kleinbuchstaben ohne Ober- und Unterlänge, gemessen am Buchstaben x. Schriften mit großer x-Höhe wirken bei gleicher Schriftgröße größer und sind am Bildschirm meist besser lesbar, weil die Kleinbuchstaben, aus denen ein Text überwiegend besteht, mehr Fläche erhalten.

Neben der x-Höhe prägen weitere Merkmale den Charakter. Serifen sind die kleinen Füßchen und Querstriche an den Enden der Striche. Der Strichstärkenkontrast beschreibt, wie stark sich dicke und dünne Linien innerhalb eines Buchstabens unterscheiden. Die Punzen sind die Innenräume von Buchstaben wie o, e oder a; offene, große Punzen verbessern die Lesbarkeit in kleinen Größen. Und die Laufweite gibt an, wie viel Abstand die Buchstaben zueinander haben.

ErkundenDie großen Schriftklassen
Serif: Mit Füßchen an den Buchstabenenden. Wirkt traditionell, seriös, literarisch – gut für lange Texte und für Marken, die Beständigkeit ausstrahlen wollen.

2. Die großen Schriftklassen

Es gibt Zehntausende Schriften, aber sie lassen sich in wenige große Gruppen einteilen. Die deutsche Norm DIN 16518 unterscheidet elf Gruppen, und die neuere Einteilung nach Form und Herkunft ist noch feiner. Für die Praxis genügen vier Klassen, die Sie hier direkt vergleichen können.

VergleichEin Satz, vier Schriftklassen

Gute Gestaltung ist so wenig Gestaltung wie möglich.

Der Satz wird Dieter Rams zugeschrieben. Achten Sie darauf, wie derselbe Inhalt je nach Schrift anders klingt – mal feierlich, mal nüchtern, mal kräftig.

Wirkung: klassisch, seriös, literarisch – gut für lange Texte und Marken mit Tradition
Tab. 1.1Schriftklassen im Überblick
KlasseMerkmaleBekannte BeispieleTypischer Einsatz
Serifenschrift (Antiqua)Serifen, oft StrichstärkenkontrastGaramond, Times, GeorgiaBücher, Zeitungen, Marken mit Tradition
Serifenlose (Grotesk)keine Serifen, gleichmäßige StricheHelvetica, Inter, RobotoOberflächen, Websites, Beschilderung
Serifenbetonte (Egyptienne)kräftige, blockartige SerifenRockwell, Roboto SlabÜberschriften, Plakate, Handwerk
Schreibschriften und Displayschriftenhandschriftlich oder dekorativPacifico, LobsterLogos, einzelne Akzente – nie für Fließtext
Nichtproportionalealle Zeichen gleich breitCourier, JetBrains MonoCode, technische Anmutung

Lange galt die Regel, dass Serifenschriften für gedruckte und serifenlose Schriften für Bildschirmtexte besser seien. Mit hochauflösenden Bildschirmen hat sich das relativiert. Studien zur Lesbarkeit finden zwischen gut gestalteten Schriften beider Klassen kaum messbare Unterschiede. Entscheidend sind die Qualität der Schrift, ihre x-Höhe, die Größe und der Satz – nicht die Serifen.

3. Schriften haben einen Charakter

Schriften wirken nicht neutral. Menschen schreiben ihnen zuverlässig Eigenschaften zu: seriös oder verspielt, modern oder traditionell, freundlich oder distanziert. Untersuchungen zur Schriftwahrnehmung zeigen, dass diese Zuschreibungen zwischen Menschen erstaunlich übereinstimmen und dass eine unpassende Schrift die Glaubwürdigkeit eines Textes messbar senken kann. Ein Anwaltsbüro mit einer verspielten Handschrift wirkt ebenso befremdlich wie ein Kinderspielplatz mit einer strengen Zeitungsschrift.

Die Wahl einer Schrift ist deshalb eine inhaltliche Entscheidung. Sie sollte zu dem passen, was ein Unternehmen ausstrahlen möchte, und zu den Menschen, die es ansprechen will. Eine hilfreiche Übung besteht darin, drei Adjektive für die gewünschte Wirkung aufzuschreiben – etwa „verlässlich, modern, nahbar“ – und dann Schriften danach zu prüfen, ob sie diese Eigenschaften transportieren.

Die meisten Unternehmen brauchen keine auffällige Schrift, sondern eine gute. Eine gut gemachte, gut lesbare Schrift mit ausreichend Schnitten ist fast immer die bessere Wahl als eine originelle, die nach drei Monaten ermüdet.

4. Praktische Kriterien für die Auswahl

Neben dem Charakter zählen handfeste Eigenschaften. Eine Schrift für eine Unternehmenswebsite sollte mehrere Schnitte haben, mindestens normal, fett und kursiv, besser noch halbfett und leicht. Sie sollte alle benötigten Zeichen enthalten, also Umlaute, das ß, Anführungszeichen in deutscher Form, den Gedankenstrich und das Eurozeichen. Für Tabellen und Preislisten sind Ziffern mit gleicher Breite hilfreich, damit Zahlenkolonnen sauber untereinanderstehen. Und schließlich spielen Lizenz und Einbindung eine Rolle: Viele gute Schriften sind frei verfügbar, andere kosten Lizenzgebühren, die sich nach Nutzung und Seitenaufrufen richten. Aus Datenschutzgründen sollten Webschriften zudem vom eigenen Server geladen werden, nicht von fremden Diensten – ein Thema, das im Kurs Website-Recht ausführlich behandelt wird.

Auch variable Schriften sind eine Überlegung wert. Sie enthalten alle Stärken in einer einzigen Datei und lassen sich stufenlos anpassen. Das spart Ladezeit, wenn mehrere Schnitte gebraucht werden, und ermöglicht feine Abstufungen, etwa eine etwas kräftigere Stärke für Text auf dunklem Hintergrund.

5. Weniger ist mehr

Eine der wichtigsten Regeln der Typografie betrifft die Anzahl der Schriften. Die meisten gelungenen Websites kommen mit einer oder zwei Schriftfamilien aus. Jede weitere Schrift erhöht die Ladezeit, macht das Erscheinungsbild unruhiger und erschwert die Pflege. Eine einzige gut ausgebaute Familie mit mehreren Stärken bietet bereits genug Möglichkeiten für Überschriften, Fließtext, Hervorhebungen und Beschriftungen. Wie man zwei Schriften sinnvoll kombiniert, wenn man mehr Abwechslung möchte, zeigt die letzte Lektion dieses Moduls.

Wer eine bestehende Website beurteilt, kann mit einem einfachen Blick in die Entwicklerwerkzeuge des Browsers prüfen, welche Schriften tatsächlich geladen werden. Nicht selten finden sich dort fünf oder mehr Schriftdateien, die aus früheren Entwürfen, Plugins oder eingebetteten Diensten stammen – ein leicht zu behebender Grund für langsame Ladezeiten und ein uneinheitliches Bild.

6. Ein Auswahlprozess in fünf Schritten

In der Praxis hat sich ein einfacher Ablauf bewährt. Zuerst werden die drei Adjektive für die gewünschte Wirkung festgelegt. Dann folgt eine Vorauswahl von fünf bis acht Schriften, die zu diesen Adjektiven passen und die technischen Kriterien erfüllen. Im dritten Schritt wird jede Kandidatin an echtem Inhalt getestet: eine Überschrift, ein Absatz Fließtext, eine Preisangabe, eine Adresse. Im vierten Schritt werden die Ergebnisse nebeneinandergelegt und mit etwas Abstand verglichen, am besten gemeinsam mit zwei oder drei Personen, die das Unternehmen gut kennen. Und schließlich wird die Entscheidung dokumentiert, samt der gewählten Schnitte und Größen, damit sie später nicht versehentlich verwässert wird. Der ganze Prozess dauert selten länger als einen halben Tag und verhindert, dass eine Schrift nur deshalb gewählt wird, weil sie jemandem spontan gefallen hat.

Zum Schluss ein Hinweis zur Zusammenarbeit: Wer eine Agentur mit der Gestaltung beauftragt, sollte nach der Begründung für die vorgeschlagene Schrift fragen. Eine gute Antwort verweist auf Wirkung, Lesbarkeit, Schnitte und Lizenz – nicht nur auf Geschmack.

Quellen und weiterführende Literatur
  1. [1]Warde, B. (1956): The Crystal Goblet. Sixteen Essays on Typography. Cleveland: World Publishing.
  2. [2]DIN 16518 (1964): Klassifikation der Schriften.
  3. [3]Bringhurst, R. (2004): The Elements of Typographic Style. 3. Aufl. Vancouver: Hartley & Marks.
  4. [4]Brady, M. (2013): Typographic Personality. Typography Journal; Shaikh, A. D.; Chaparro, B. S.; Fox, D. (2006): Perception of Fonts. Usability News 8(1).
  5. [5]Wallace, S. et al. (2022): Towards Individuated Reading Experiences: Different Fonts Increase Reading Speed for Different Individuals. ACM TOCHI 29(4).

Stand: September 2026. Kursmaterial der Klarwerk Akademie.

Abschlussquiz

Drei Fragen – dann ist die Lektion geschafft.

Frage 1 von 3

Warum wirken Schriften mit großer x-Höhe am Bildschirm lesbarer?