Eine Display-Schrift wählen, ohne die Lesbarkeit zu ruinieren

Die Landingpage ging live und sah großartig aus: eine kontrastreiche Display-Schrift im Hero, voller Persönlichkeit bei 64 Pixeln. Sechs Wochen später steht dieselbe Schrift auf dem Einstellungs-Screen bei 13 Pixeln — die Striche zu Fäden ausgedünnt, der enge Letternschnitt zu Schlieren verklumpt, jedes Label mit Schnörkeln, nach denen bei dieser Größe niemand gefragt hat. Niemand hat das entschieden. Die Schrift sickerte nach unten, ein „nur der Konsistenz halber“ nach dem anderen, weil nichts markierte, wo sie aufhörte, willkommen zu sein.

Eine Display-Schrift ist eine Schrift, die für große Größen gezeichnet wurde — höherer Kontrast zwischen dicken und dünnen Strichen, engere Standardabstände, mehr Persönlichkeit in den Buchstabenformen — und jede dieser Design-Entscheidungen arbeitet bei kleinen Größen gegen sie. Die Faustregel: Eine Display-Schrift bekommt ungefähr die obersten zwei oder drei Stufen der Schriftgrößenskala und nichts darunter; eine robuste Fließtext-Schrift trägt alles andere. Dieser Artikel ist Teil unseres Typografie-Leitfadens.

Was macht eine Schriftart zu einer Display-Schrift?

Die vorgesehene Größe. Eine Display-Schriftart ist dafür gezeichnet, groß gesehen zu werden — Überschriften, Poster, Heros — und sie tauscht Robustheit bei kleinen Größen gegen Charakter bei großen Größen. Dieser Tausch zeigt sich in drei konkreten Design-Entscheidungen:

• Höherer Strichkontrast. Dicke Stämme gegen haarfeine Dünnstriche — dramatisch bei 60px, wo eine Haarlinie noch mehrere Pixel breit ist.
• Engere Standardabstände. Großer Text braucht weniger Luft zwischen den Buchstaben, also sind Display-Schriften eng geschnitten.
• Mehr Persönlichkeit in den Buchstabenformen. Details, Eigenheiten und Schnörkel, die den genauen Blick belohnen, zu dem eine Überschrift einlädt.

Alle drei sind Tugenden in ihrem Habitat. Alle drei werden zu Bürden, sobald die Schrift eine andere Aufgabe übernehmen soll.

Warum scheitern Display-Schriften bei kleinen Größen?

Weil sich Lesen mit der Größe verändert. Bei Display-Größe behandelt das Auge Buchstabenformen als Formen — es verweilt, bemerkt das Detail, genießt es. Bei Fließtext-Größe liest das Auge Wortformen: ganze Wort-Silhouetten, im Tempo erkannt, Dutzende pro Sekunde. Detail, das das verweilende Auge belohnte, wird zur Störung für das überfliegende.

Jeder Display-Tausch kehrt sich dann um. Haarfeine Striche dünnen sich ins Nichts aus oder brechen auf Bildschirmen mit geringerer Auflösung auf. Der enge Schnitt, großzügig bei 60px, verklumpt Buchstabenpaare bei 13px zu Schlieren. Und Persönlichkeit wird zu Rauschen — eine Eigenheit, die du einmal in einer Überschrift bewundert hast, ist eine Eigenheit, die der Leser in jeder Zeile eines Absatzes herausfiltern muss.

Wo gehört eine Display-Schrift auf der Schriftgrößenskala hin?

Ganz oben — ungefähr die obersten zwei oder drei Stufen — und sonst nirgends. Sie berührt niemals Fließtext, Bildunterschriften oder Interface-Labels; die Fließtext-Schrift trägt alles unterhalb der Übergabe. Auf der klassischen Web-Skala (16px-Basis, Verhältnis der reinen-Quart-Klasse — die Größenberechnung selbst liegt in unserem Leitfaden zur Schriftgrößenskala) sieht die Aufteilung so aus:

Die Übergabe-Stufe — wo der Display-Stil endet und der Überschriften-Stil beginnt — ist die eine Entscheidung, die es wert ist, explizit getroffen zu werden. Eine persönlichkeitsstarke Schrift übergibt meist oberhalb von h2; eine mildere kann sie halten. Unterhalb der Übergabe gibt es keine Debatte — 21px ist Absatz-Territorium, und Absatz-Territorium gehört dem Arbeitspferd.

Sieh dir eine Display-Schrift über einem Arbeitspferd-Fließtext über die gesamte Skala an — eine persönlichkeitsstarke Überschriften-Schrift über einem Fließtext der Inter-Klasse, jede Stufe in Mustertext in ihrer echten Größe gezeigt. Lass deinen Blick am Muster hinabgleiten und finde die Stufe, bei der die Display-Schrift aufhört, ein Vergnügen zu sein; das ist deine Übergabe.

Was verlangt eine Display-Schrift von der Fließtext-Schrift?

Neutralität — im Verhältnis zu ihrer eigenen Lautstärke. Je mehr Persönlichkeit die Display-Schrift hat, desto neutraler muss die Fließtext-Schrift sein: eine Stimme spricht, eine trägt. Diese Arbeitsteilung ist es wert, explizit ausgesprochen zu werden, denn sie ist die gesamte Logik der Schriftpaarung. Zwei ausdrucksstarke Schriften konkurrieren, und eine Seite, die mit sich selbst konkurriert, liest sich lauter und weniger selbstbewusst als jede der beiden Schriften allein. Die stillen Arbeitspferde — der Inter-Klasse, der Source-Sans-Klasse — existieren genau für diese Aufgabe, und eine davon zu wählen ist kein Mangel an Vorstellungskraft; es ist das, was die fantasievolle Wahl ganz oben erst leistbar macht.

Wie unterziehst du eine Display-Schrift einem Belastungstest, bevor du dich festlegst?

Setz sie in Fließtext-Größe und sieh zu, wie sie scheitert. Ganz ehrlich — setz einen vollständigen Absatz echten Produkttexts in die Kandidatenschrift bei 16px und lies ihn. Du solltest die Fehlermodi pünktlich eintreffen sehen: die Dünnstriche kämpfen, die Paare verklumpen, die Textur ermüdet ab der dritten Zeile. Dieses Scheitern ist eine bestandene Note — es bestätigt, dass die Schrift das ist, was sie zu sein behauptet, und dass deine Übergabe-Regel tragend ist.

Wenn sie überlebt — wenn der Absatz sich bequem liest — hast du überhaupt keine Display-Schrift gefunden. Du hast ein Arbeitspferd mit Reichweite gefunden, und das ist gut zu wissen, bevor du dich festlegst: Es kann bedeuten, dass du nur eine Schriftfamilie brauchst, bei der Strichstärke und Größe die Arbeit erledigen, die sonst zwei Schriften erledigt hätten.

Wie viele Display-Schriften solltest du verwenden?

Eine. Eine Display-Schrift verdient ihren Platz, indem sie die Identitätsnote ist — das, wodurch sich ein Leser an die Seite erinnert — und Identitätsnoten teilen sich nicht. Eine zweite Display-Schrift fügt keine Ausdruckskraft hinzu; sie spaltet die Wiedererkennung zwischen zwei Stimmen und halbiert beide. Die Ausnahmen sind Art-Direction-Projekte — eine Magazinstrecke, eine Kampagne — wo Vielfalt der Punkt ist; in Produkt- und Markentypografie deckt eine Display-Schrift über einer Fließtext-Schrift nahezu jeden Bedarf.

Sieh ihr absichtlich beim Scheitern zu

Setz die Display-Kandidatin in Fließtext-Größe — und lies einen vollständigen Absatz davon. Wenn sie verklumpt und ermüdet, leg dich mit Zuversicht fest und markiere die Übergabe-Stufe in deiner Skala. Wenn sie sich gut liest, überdenk die Prämisse: Vielleicht bist du nur eine Schriftfamilie von einem einfacheren System entfernt.