Display-Schriften: so gestaltest du mit großer Typografie

Display-Schriften sind Schriften, die groß eingesetzt werden sollen: Überschriften, Poster, Cover, Verpackungen und kurze Wortfolgen. Ihre Details, vom scharfen Kontrast zwischen dicken und dünnen Strichen bis zu engem Abstand und ausdrucksstarken Formen, sind dafür gemacht, in großen Größen am besten zu wirken, und fallen in Absatzgrößen meist auseinander. Nutze eine Display-Schrift für die wenigen Wörter, die jemanden stoppen sollen, und eine ruhigere Textschrift für alles, was danach gelesen wird.

Dieser Leitfaden zeigt, was eine Schrift zur Display-Schrift macht, wie groß du sie setzt, wie du sie kombinierst und wie große Schrift nicht gedrängt oder altmodisch wirkt. Er baut auf Typografie-Grundlagen und visueller Hierarchie auf.

Was eine Display-Schrift von einer Textschrift unterscheidet

Textschriften sind für Komfort über Tausende Wörter gebaut: offene Formen, stabile Striche, großzügiger Abstand und eine große x-Höhe, damit Buchstaben kleine Größen und schlechte Bildschirme überstehen. Display-Schriften tauschen einen Teil davon gegen Charakter. Bei 80 px hat niemand Mühe, die Buchstaben zu sehen, also kann die Gestalterin Kontrast steigern, Breiten stauchen, Details schärfen und Abstände verengen.

Manche Familien gibt es in beiden Versionen: als Text-Schnitt und Display-Schnitt desselben Designs oder als einzelne variable Datei mit einer Achse für optische Größen, die sich beim Ändern der Größe selbst anpasst. Variable Schriften erklärt optische Größen genauer.

Arten von Display-Schriften und die Stimmung, die sie setzen

Display-Schriften wählst du am leichtesten nach dem Gefühl, das du willst. Jede Familie unten enthält weit verbreitete Beispiele von Google Fonts, sodass du sie an deinen eigenen Wörtern ausprobieren kannst.

• Serifen mit hohem Kontrast: Mode, Kultur, Editorial. Beispiele: Playfair Display, DM Serif Display, Bodoni Moda.
• Schmale Grotesk: Dringlichkeit, Sport, Nachrichten, Poster. Beispiele: Bebas Neue, Anton, Oswald.
• Breite und weit laufende Grotesk: Tech, moderne Marken, selbstbewusste Ruhe. Beispiele: Syne, Unbounded.
• Weich und gerundet: freundlich, Essen, Kinder, Wohlbefinden. Beispiele: Fraunces mit seiner Soft-Achse, Fredoka.
• Schwere Grotesken: klare Aussagen, Launches, Aktivismus. Beispiele: Archivo Black, Inter Tight im Schwarz-Schnitt.
• Schreibschrift und handgezeichnet: Einladungen, Handwerk, persönliche Marken, sparsam eingesetzt. Beispiele: Caveat, Yellowtail.

Wie groß Display-Schrift sein sollte

Groß genug, dass sie klar das Erste ist, was Menschen sehen, und klein genug, dass die Wörter auf wenige Zeilen passen. Eine nützliche Gewohnheit ist, Display-Schrift relativ zur Arbeitsfläche zu bemessen statt in Punkten. Bei einem Post mit 1080 mal 1350 füllt eine Überschrift aus zwei bis vier Wörtern oft etwa 70 bis 90 Prozent der Breite. Auf einer Website liegt eine Hero-Überschrift meist beim Drei- bis Sechsfachen der Fließtextgröße.

Im Web skaliert clamp() Display-Schrift stufenlos zwischen einem Minimum und einem Maximum, sodass sie auf großen Bildschirmen groß ist, ohne auf Handys überzulaufen. Verenge Zeilenabstand und Laufweite, wenn die Größe wächst, die Standardwerte sind für kleineren Text gezeichnet.

.hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.75rem, 5vw + 1rem, 6.5rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 14ch;
}

.hero-lede {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.55;
  max-width: 52ch;
}

Display-Schrift mit einer Textschrift kombinieren

Die einfachste verlässliche Kombination gibt jeder Schrift eine Aufgabe. Die Display-Schrift spricht laut für wenige Wörter, die Textschrift erledigt die leise Arbeit bei Bildunterschriften, Fließtext, Daten und Preisen. Setze die beiden in mindestens einer klaren Weise voneinander ab, etwa Serife gegen Grotesk oder schmal gegen normale Breite, damit sie nicht wie ein knapper Fehlgriff aussehen. Schriftkombinationen behandelt die Regeln vollständig.

Display-Schrift auf Farbverläufen und unruhigen Hintergründen

Große Schrift ist der verträglichste Text, den du auf einen bunten Hintergrund setzen kannst, weil dicke Striche ihre Form gegen Bewegung im Feld dahinter halten. Das Risiko liegt in den dünnen Teilen: Haarfeine Serifen und feine Details verschwinden in helleren oder unruhigeren Bereichen eines Farbverlaufs. Wähle auf reichen Hintergründen eine Display-Schrift mit stabileren dünnen Strichen oder gehe eine Stärke hoch.

In Gradiently weiß ein Mark, wo deine Wörter stehen: Sein ruhigster Bereich wandert hinter die Überschrift, und Farben nahe den Buchstaben werden tiefer oder heller, sodass selbst feine Display-Schrift hält. Schriftzug-Behandlungen wie Kontur, Inline und Extrusion geben Display-Wörtern Charakter, wenn die Schrift selbst schlicht ist. Texteffekte zeigt, wann sie funktionieren.

Fehler, die Display-Schrift billig wirken lassen

1. 1

   Standardabstand bei riesigen Größen

   Große Schrift mit Text-Standards wirkt locker. Verenge den Zeilenabstand auf etwa 1 bis 1,1 und die Laufweite leicht.

2. 2

   Falsch Fett und falsch Kursiv

   Fehlt einer Schrift ein Schnitt, täuschen Tools und Browser ihn womöglich vor, indem sie Buchstaben verschmieren oder neigen. Lade die echten Stärken und Kursivschnitte.

3. 3

   Schrift zum Passen strecken

   Skaliere Schrift nie horizontal oder vertikal. Wähle stattdessen einen schmalen oder breiten Schnitt.

4. 4

   Trendschriften ohne Grund

   Eine Schrift, die gewählt wurde, weil sie diese Saison überall ist, altert mit der Saison. Wähle nach der Stimmung, die du brauchst.

5. 5

   Einzelne Wörter in zweizeiligen Überschriften

   Ein einzelnes kurzes Wort allein auf der zweiten Zeile schwächt die Überschrift. Formuliere um, brich anders um oder nutze text-wrap: balance.