Eine Website kann technisch perfekt funktionieren.

Sie lädt schnell.

Das Menü ist logisch.

Die Inhalte sind hervorragend.

Trotzdem kann das Lesen anstrengend sein.

Vielleicht ist die Schrift zu klein.

Die Zeilen sind extrem lang.

Zwischen den Zeilen fehlt Luft.

Überschriften unterscheiden sich kaum vom Fließtext.

Oder fünf verschiedene Schriftarten konkurrieren miteinander.

Das Problem liegt dann nicht beim Inhalt.

Sondern bei der Typografie.

Typografie beschäftigt sich mit der Gestaltung von Schrift und Text.

Im Web gehören dazu unter anderem:

Schriftfamilie
+
Schriftgröße
+
Schriftgewicht
+
Zeilenhöhe
+
Zeilenlänge
+
Abstände
+
Hierarchie
+
Farbe

Die Wahl einer Schriftart ist also nur ein kleiner Teil davon.

Typografie macht Text sichtbar strukturiert

Ein Dokument besteht nicht einfach aus Buchstaben.

Es besitzt unterschiedliche Ebenen.

Zum Beispiel:

Seitentitel
↓
Hauptabschnitt
↓
Unterabschnitt
↓
Fließtext
↓
Hinweis
↓
Metadaten

Typografie macht diese Unterschiede sichtbar.

Damit ist sie eines der wichtigsten Werkzeuge der visuellen Hierarchie.

Gute Typografie soll möglichst wenig auffallen

Das klingt zunächst widersprüchlich.

Eine beeindruckende Schrift kann durchaus Teil einer starken Markenidentität sein.

Beim Lesen langer Texte sollte die Gestaltung den Inhalt aber unterstützen und nicht permanent Aufmerksamkeit auf sich selbst ziehen.

Wenn ein Leser nach zehn Minuten denkt:

Interessantes Thema.

ist das meist besser als:

Interessante Buchstaben.

Typografie besitzt zwei Aufgaben

Sie soll einerseits:

Information strukturieren

und andererseits:

Lesen erleichtern

Beides gehört zusammen.

Eine große Überschrift kann hervorragend aussehen.

Wenn der Fließtext darunter kaum lesbar ist, funktioniert das Typographiesystem trotzdem nicht.

Schriftart und Typografie sind nicht dasselbe

Häufig beginnt eine Designentscheidung mit:

Welche Schrift nehmen wir?

Das ist legitim.

Aber selbst die beste Schriftart kann schlecht eingesetzt werden.

Zum Beispiel:

zu klein,

zu eng,

mit falscher Zeilenhöhe,

auf zu breiter Textspalte.

Umgekehrt kann eine unspektakuläre Standardschrift ausgezeichnet funktionieren, wenn die typografischen Parameter gut gewählt sind.

Was ist eine Schriftfamilie?

Eine Schriftfamilie umfasst zusammengehörige Schriftschnitte.

Zum Beispiel:

Regular

Italic

Medium

Semibold

Bold

Sie teilen dieselbe Grundgestaltung, unterscheiden sich aber etwa durch Gewicht oder Neigung.

Was ist ein Font?

Im Alltag werden „Font“ und „Schriftart“ häufig synonym verwendet.

Historisch und typografisch kann genauer unterschieden werden.

Für normale Webprojekte genügt meist die praktische Vorstellung:

Schriftfamilie
→ gesamtes Schriftsystem

Font / Schnitt
→ konkrete Variante

Zum Beispiel:

Familie
└── Regular
└── Medium
└── Bold

Serif und Sans Serif

Eine klassische Unterscheidung betrifft:

Serifenschriften

und:

serifenlose Schriften.

Was sind Serifen?

Serifen sind kleine Abschlussstriche beziehungsweise Formen an den Buchstaben.

Vereinfacht:

Serif
→ Buchstaben mit Abschlüssen

Serifenlose Schrift:

Sans Serif
→ reduzierte Buchstabenformen ohne diese Abschlüsse

„Sans“ bedeutet dabei sinngemäß:

ohne.

Sind Sans-Serif-Schriften im Web automatisch besser?

Nein.

Diese einfache Regel ist überholt.

Moderne Displays können sowohl gute Serifenschriften als auch Sans-Serif-Schriften hervorragend darstellen.

Entscheidend sind eher:

Qualität der Schrift,

Größe,

Kontrast,

Zeilenhöhe,

Einsatzbereich.

Serifenschriften können redaktionell wirken

Sie werden häufig mit:

Büchern,

Zeitungen,

Magazinen,

klassischer Editorialgestaltung

assoziiert.

Das bedeutet nicht, dass jede Serifenschrift konservativ aussieht.

Es existieren sehr moderne Serifendesigns.

Sans Serif kann reduziert und technisch wirken

Viele Benutzeroberflächen verwenden serifenlose Schriften.

Sie können:

klar,

neutral,

modern,

technisch

wirken.

Aber auch hier existiert eine enorme stilistische Bandbreite.

Die Kategorie bestimmt nicht automatisch den Charakter

Zwei Sans-Serif-Schriften können vollkommen unterschiedlich wirken.

Eine:

freundlich und rund.

Eine andere:

streng und technisch.

Dasselbe gilt für Serifenschriften.

Die konkrete Formensprache ist wichtiger als die grobe Kategorie.

Typografie transportiert Markenwirkung

Vergleiche gedanklich:

eine elegante Modezeitschrift,

eine Entwicklerdokumentation,

eine Kinderwebsite,

eine Bank.

Alle benötigen Text.

Aber wahrscheinlich nicht dieselbe typografische Persönlichkeit.

Schrift kann vermitteln:

seriös

technisch

freundlich

luxuriös

spielerisch

redaktionell

Markenwirkung darf Lesbarkeit nicht verdrängen

Eine dekorative Display-Schrift kann hervorragend für eine große Überschrift funktionieren.

Für einen Artikel mit 3.000 Wörtern wäre sie möglicherweise anstrengend.

Deshalb können unterschiedliche Aufgaben unterschiedliche Schriften verwenden.

Display Font und Text Font

Eine mögliche Kombination:

Überschriften
→ charakterstärkere Schrift

Fließtext
→ ruhige Leseschrift

Das kann starke Markenwirkung mit guter Lesbarkeit verbinden.

Eine einzige Schriftfamilie kann ebenfalls genügen

Viele hochwertige Websites verwenden nur eine Familie.

Unterschiede entstehen dann durch:

Größe

Gewicht

Abstand

Farbe

Das kann sehr ruhig und konsistent wirken.

Zwei Schriftfamilien sind häufig ausreichend

Zum Beispiel:

Heading Font
+
Body Font

Mehr Schriften erhöhen die gestalterische Komplexität.

Drei, vier oder fünf unterschiedliche Familien benötigen einen sehr guten Grund.

Jede zusätzliche Schrift braucht eine Aufgabe

Nicht:

Diese Schrift gefällt uns auch.

Sondern:

Welche Funktion erfüllt sie?

Wenn keine klare Antwort existiert, kann sie meist entfallen.

Was ist eine Fallback-Schrift?

Ein Webfont kann möglicherweise:

noch nicht geladen sein,

blockiert werden,

technisch fehlen.

Dann verwendet der Browser eine Ersatzschrift.

Diese wird als Fallback bezeichnet.

Konzeptionell:

gewünschter Webfont
↓
nicht verfügbar
↓
Fallback Font

Eine gute Font-Konfiguration berücksichtigt diesen Fall.

Fallbacks sollten ähnlich proportioniert sein

Eine extrem schmale Webschrift wird durch eine sehr breite Ersatzschrift ersetzt.

Dann können:

Überschriften umbrechen,

Buttons größer werden,

Layouts springen.

Ein passenderer Fallback reduziert diese Veränderungen.

Was ist ein Webfont?

Ein Webfont ist eine Schriftdatei, die eine Website für die Darstellung lädt.

Damit kann unabhängig von den lokal installierten Schriften des Besuchers eine bestimmte Typografie verwendet werden.

Das ermöglicht eine konsistente Markenwirkung.

Webfonts haben einen Preis

Jede zusätzliche Schriftdatei muss übertragen werden.

Zum Beispiel:

Regular
+
Italic
+
Medium
+
Semibold
+
Bold

können mehrere Ressourcen bedeuten.

Deshalb trifft Typografie direkt auf Website-Performance.

Nicht jeden verfügbaren Schriftschnitt laden

Vielleicht bietet eine Schrift:

Thin,

ExtraLight,

Light,

Regular,

Medium,

Semibold,

Bold,

ExtraBold,

Black.

Die Website benötigt aber nur:

Regular
Semibold
Bold

Dann müssen die anderen Varianten nicht zwangsläufig ausgeliefert werden.

Weniger Fontdateien können schneller sein

Das ist besonders bei langen Contentseiten relevant.

Wenn Typografie mit zehn Dateien beginnt, bevor der Leser überhaupt einen Buchstaben sieht, wurde das Design unnötig teuer.

Variable Fonts

Eine variable Schrift kann mehrere Eigenschaften innerhalb einer Fontdatei abbilden.

Zum Beispiel unterschiedliche Gewichtungen.

Konzeptionell:

eine Fontdatei
↓
Weight 400
Weight 500
Weight 600
Weight 700

Das kann sehr flexibel sein.

Ob es tatsächlich kleinere Dateien oder bessere Performance ergibt, hängt von der konkreten Schrift und Verwendung ab.

Variable Fonts bieten gestalterische Flexibilität

Ein System kann beispielsweise feinere Abstufungen verwenden.

Statt nur:

Regular
Bold

vielleicht:

450
575
700

Aber auch hier gilt:

Nur weil etwas technisch möglich ist, muss man nicht jede Zwischenstufe nutzen.

System Fonts

Eine Alternative zu geladenen Webfonts sind bereits auf den Geräten vorhandene Systemschriften.

Vorteil:

kein zusätzlicher Fontdownload

Sie können dadurch sehr performant sein.

Nachteil von System Fonts

Das genaue Schriftbild kann je nach Betriebssystem variieren.

Eine Windows-Nutzerin sieht möglicherweise eine andere Systemschrift als jemand auf macOS.

Für eine stark typografisch definierte Marke kann das unerwünscht sein.

Wann System Fonts sinnvoll sind

Zum Beispiel:

interne Anwendungen,

technische Dashboards,

performanceorientierte Websites,

Projekte ohne starke typografische Markenanforderungen.

Sie sind keine Notlösung.

Sie können eine bewusste Designentscheidung sein.

Schriftgröße

Die Schriftgröße beeinflusst unmittelbar:

Lesbarkeit

und:

visuelle Hierarchie.

Zu kleiner Fließtext zwingt Besucher:

näher an den Bildschirm,

zu zoomen

oder:

das Lesen aufzugeben.

Es gibt keine universell perfekte Schriftgröße

Eine Zahl wie:

16 px

ist kein Naturgesetz.

Zwei Schriften können bei derselben nominellen Größe deutlich unterschiedlich groß wirken.

Das hängt beispielsweise von:

x-Höhe,

Buchstabenproportionen,

Strichstärke

ab.

Die wahrgenommene Größe zählt

Schrift A bei 16 Pixeln kann sehr groß wirken.

Schrift B bei 18 Pixeln vergleichbar.

Deshalb sollte Typografie visuell getestet werden.

Nicht nur anhand von Zahlen.

Fließtext sollte komfortabel lesbar sein

Bei einem Wissensportal lesen Menschen möglicherweise:

mehrere Tausend Wörter.

Hier ist ein etwas großzügiger Body Text oft sinnvoller als maximal kompakte Darstellung.

Ein Dashboard kann dagegen dichter arbeiten.

Der Nutzungskontext entscheidet.

Überschriften brauchen Abstufung

Zum Beispiel:

H1
→ wichtigste Überschrift

H2
→ Hauptabschnitt

H3
→ Unterabschnitt

Body
→ normaler Text

Die Größen müssen nicht extrem auseinanderliegen.

Aber die Rollen sollten klar erkennbar sein.

Was ist eine typografische Skala?

Eine Typographieskala definiert zusammengehörige Textgrößen.

Zum Beispiel:

14
16
20
26
34
44

Das ist nur ein Beispiel.

Die Idee lautet:

Nicht jede Größe spontan erfinden.

Sondern ein begrenztes System verwenden.

Eine Skala schafft Rhythmus

Statt:

H1 53 Pixel

H2 31 Pixel

H3 24 Pixel

Sidebar 19 Pixel

Cardtitel 27 Pixel

werden definierte Größen wiederverwendet.

Das wirkt konsistenter.

Eine mathematische Skala ist möglich

Man kann Größen beispielsweise mit einem festen Verhältnis steigern.

Konzeptionell:

Basisgröße
× Verhältnis
↓
nächste Stufe

Das kann harmonische Größenfolgen erzeugen.

Es ist aber kein Zwang.

Optische Korrektur bleibt wichtig

Eine mathematisch perfekte Skala kann im realen Design:

zu große H1,

zu kleine H3

erzeugen.

Design ist kein Taschenrechnerwettbewerb.

Die Skala ist ein Ausgangspunkt.

Semantische Textstile sind oft praktischer als Zahlen

Statt:

font-48

kann das Designsystem verwenden:

heading-page

heading-section

heading-card

body-default

body-small

Damit beschreibt der Name die Funktion.

Die konkrete Größe kann später wechseln

Desktop:

heading-page
→ groß

Mobil:

heading-page
→ kleiner

Die semantische Bedeutung bleibt identisch.

Das ist besonders wertvoll für Responsive Webdesign.

Schriftgewicht

Schriftgewicht beschreibt vereinfacht:

Wie kräftig erscheinen die Buchstaben?

Typische Bezeichnungen:

Regular
Medium
Semibold
Bold

Gewicht kann Hierarchie erzeugen, ohne die Schriftgröße zu verändern.

Fett ist ein starkes Signal

Ein fettes Wort fällt beim Scannen schneller auf.

Deshalb sollte Bold bewusst eingesetzt werden.

Wenn ganze Seiten fett gesetzt sind:

verliert das Signal seinen Wert.

Semibold ist oft ein nützlicher Mittelweg

Für kleinere Überschriften kann Semibold ausreichend sein.

Nicht jede Überschrift muss maximal fett erscheinen.

Ein ruhiges Typographiesystem profitiert häufig von feineren Abstufungen.

Sehr dünne Schriften können problematisch sein

Thin oder ExtraLight kann auf großen Displays elegant wirken.

Bei:

kleinen Größen,

schlechtem Display,

niedrigem Kontrast

wird es schnell schwer lesbar.

Für normalen Fließtext ist extreme Dünne deshalb selten ideal.

Schriftgewicht und Farbe wirken zusammen

Ein hellgrauer, dünner Text:

geringes Gewicht
+
geringer Kontrast

tritt sehr stark zurück.

Vielleicht zu stark.

Sekundärer Text darf schwächer sein.

Er sollte aber immer noch komfortabel gelesen werden können.

Zeilenhöhe

Die Zeilenhöhe beschreibt den vertikalen Raum, den eine Textzeile erhält.

Vergleiche gedanklich:

Zeile eins
Zeile zwei
Zeile drei

sehr eng

mit:

Zeile eins

Zeile zwei

Zeile drei

zu weit auseinander.

Beides kann den Lesefluss stören.

Zu geringe Zeilenhöhe

Die Textzeilen kleben zusammen.

Buchstaben aus benachbarten Zeilen konkurrieren visuell.

Längere Texte wirken dicht und anstrengend.

Zu hohe Zeilenhöhe

Die einzelnen Zeilen verlieren ihre Zusammengehörigkeit.

Das Auge muss größere vertikale Sprünge machen.

Auch das erschwert flüssiges Lesen.

Gute Zeilenhöhe hängt von der Schrift ab

Ein Wert, der für Schrift A hervorragend funktioniert, kann bei Schrift B:

zu eng

oder:

zu locker

wirken.

Relevant sind unter anderem:

Buchstabenhöhe,

Schriftgröße,

Gewicht,

Zeilenlänge.

Größere Schrift braucht nicht proportional genauso viel Zeilenhöhe

Eine große H1 kann beispielsweise relativ kompakt gesetzt werden.

Fließtext benötigt häufig mehr Luft.

Deshalb sollten Headings und Body eigene Zeilenhöhen besitzen.

Mehrzeilige Überschriften sind ein wichtiger Test

Desktop:

Was ist DNS?

eine Zeile.

Mobil:

Wie funktionieren
strukturierte Ausgaben
bei KI-Modellen?

mehrere Zeilen.

Plötzlich wird die Heading-Line-Height sichtbar wichtig.

Zu viel Abstand lässt die Überschrift auseinanderfallen.

Zeilenlänge

Die Länge einer Textzeile beeinflusst die Lesbarkeit enorm.

Sehr lange Zeilen zwingen das Auge:

weit nach rechts

und danach:

weit zurück zum Beginn der nächsten Zeile.

Dabei kann die Orientierung verloren gehen.

Sehr kurze Zeilen stören ebenfalls

Ein
Text
mit
sehr
kurzen
Zeilen

unterbricht den Lesefluss ständig.

Es entsteht permanenter Umbruch.

Gute Textbreite ist deshalb begrenzt

Eine Website kann auf einem 32-Zoll-Monitor angezeigt werden.

Der Artikel muss trotzdem nicht 1800 Pixel breit werden.

Viel sinnvoller:

breiter Viewport
↓
begrenzte Lesespalte
↓
freie Außenräume

Das haben wir bereits beim Responsive Webdesign gesehen.

Zeichen pro Zeile sind hilfreicher als Pixel

Warum?

Weil:

Schriften unterschiedlich breit sind.

Eine feste 700-Pixel-Spalte kann bei einer schmalen Schrift deutlich mehr Zeichen enthalten als bei einer breiten.

Für Lesbarkeit ist die tatsächliche Textmenge pro Zeile entscheidender.

Die perfekte Zahl existiert nicht

Man findet häufig Empfehlungen für bestimmte Zeichenbereiche pro Zeile.

Diese können gute Ausgangspunkte sein.

Aber:

Schrift,

Zielgruppe,

Sprache,

Textart,

Gerät

beeinflussen das Ergebnis.

Das Design sollte real getestet werden.

Deutsch besitzt lange Wörter

Zum Beispiel:

Datenschutzgrundverordnung

oder:

Informationssicherheitsmanagementsystem

Sehr schmale Textspalten können dadurch besonders problematisch werden.

Silbentrennung kann helfen

Browser können Wörter je nach Sprache automatisch trennen.

Das kann bei:

schmalen Spalten

oder:

langen deutschen Begriffen

nützlich sein.

Zu aggressive Silbentrennung kann den Lesefluss jedoch ebenfalls verschlechtern.

Textausrichtung

Für lange Webtexte ist linksbündiger Satz häufig sehr robust.

Text beginnt
immer an derselben
linken Kante.

Das erleichtert dem Auge den Einstieg in die nächste Zeile.

Blocksatz im Web

Blocksatz erzeugt links und rechts bündige Textkanten.

Das kann editorial wirken.

Auf dynamischen Bildschirmgrößen entstehen aber möglicherweise:

große Wortabstände,

unruhige Lücken.

Bei schmalen Spalten wird das besonders sichtbar.

Blocksatz braucht gute Typografie

In Printmedien können:

Trennung,

Wortabstand,

Zeichenabstand

sehr fein kontrolliert werden.

Im responsiven Web ist diese Kontrolle schwieriger.

Deshalb ist linksbündiger Text häufig die unkompliziertere Lösung.

Zentrierter Fließtext

Kurze Texte können zentriert gut funktionieren.

Zum Beispiel:

Hero-Subline.

Kurzes Zitat.

Für mehrere längere Absätze ist Zentrierung meist anstrengender, weil jede neue Zeile an einer anderen horizontalen Position beginnt.

Rechtsbündiger Text

Kann für bestimmte:

Labels,

Zahlen,

Layoutteile

funktionieren.

Für normalen längeren Fließtext in deutschsprachigen Websites ist er meist ungeeignet.

Zahlen besitzen besondere typografische Anforderungen

In:

Tabellen,

Finanzübersichten,

Dashboards

möchte man Zahlen vergleichen.

Zum Beispiel:

     9,90 €
    89,00 €
 1.249,50 €

Eine gute Ausrichtung erleichtert den Vergleich.

Tabellarische Ziffern

Manche Schriften bieten Ziffern mit einheitlicher Breite.

Damit lassen sich Zahlenspalten sauberer untereinander ausrichten.

Das ist besonders für:

Tabellen,

Finanzdaten,

Statistiken

nützlich.

Nicht jede typografische Spezialfunktion wird überall gebraucht

Ligaturen.

Small Caps.

Alternative Ziffern.

Variable Achsen.

Webtypografie bietet viele Möglichkeiten.

Für eine normale Website sind klare Grundlagen meist wichtiger.

Großbuchstaben

Versalien können Aufmerksamkeit erzeugen.

WICHTIG

Sie besitzen aber Nachteile.

Längere Texte in Großbuchstaben sind schlechter scanbar und wirken schnell laut.

Versalien eignen sich eher für kurze Labels

Zum Beispiel:

NEU

KATEGORIE

BETA

Für mehrzeilige Fließtexte eher nicht.

Letter Spacing

Letter Spacing verändert den Abstand zwischen Buchstaben.

Großbuchstaben können von leicht größerem Zeichenabstand profitieren.

Zum Beispiel:

K A T E G O R I E

Aber übertriebener Abstand zerstört den Wortzusammenhang.

Bei normalem Fließtext ist Vorsicht sinnvoll

Professionell entwickelte Schriften besitzen bereits abgestimmte Buchstabenabstände.

Starke manuelle Veränderungen können die Lesbarkeit verschlechtern.

Tracking und Kerning

Typografisch kann zwischen allgemeinen Zeichenabständen und der individuellen Anpassung bestimmter Buchstabenpaare unterschieden werden.

Für normale Webprojekte muss man diese Details meist nicht manuell optimieren.

Gute Fonts enthalten dafür bereits entsprechende Informationen.

Kursivschrift

Italic kann:

Betonung,

Titel,

fremdsprachige Begriffe,

Zitate

kennzeichnen.

Lange kursive Absätze sind meist schwerer zu lesen als normale Roman-Schrift.

Deshalb sparsam einsetzen.

Unterstreichung

Im Web besitzt Unterstreichung eine besondere Bedeutung:

Link

Deshalb sollte normaler Text nicht ohne guten Grund unterstrichen werden.

Sonst kann er wie ein klickbarer Link wirken.

Links im Fließtext

Links müssen als interaktiv erkennbar bleiben.

Eine Möglichkeit:

andere Farbe.

Noch robuster:

Farbe plus Unterstreichung.

Damit hängt die Erkennung nicht ausschließlich von Farbwahrnehmung ab.

Linkfarbe braucht ausreichenden Kontrast

Sowohl zum Hintergrund

als auch:

eine sinnvolle Unterscheidung vom normalen Text.

Zu schwache Unterschiede machen Links schwer auffindbar.

Besuchte Links

Browser können bereits besuchte Links anders darstellen.

Bei bestimmten Wissensseiten kann das nützlich sein:

Der Leser erkennt, welche Themen er schon geöffnet hat.

Ob und wie stark das sichtbar sein soll, ist eine Designentscheidung.

Typografie und visuelle Hierarchie

Ein typografisches System könnte beispielsweise lauten:

Page Title
→ sehr stark

Section Heading
→ stark

Subheading
→ mittel

Body
→ normal

Caption
→ sekundär

Das ist eine semantische Hierarchie.

Die konkrete Umsetzung erfolgt über:

Größe,

Gewicht,

Zeilenhöhe,

Farbe,

Abstand.

Unterschiedliche Hierarchieebenen brauchen nicht immer unterschiedliche Fonts

Ein gutes System kann vollständig mit einer einzigen Familie funktionieren.

H1
→ 700

H2
→ 650

H3
→ 600

Body
→ 400

plus Größenunterschiede.

Das ist häufig ruhiger.

Heading-Font plus Body-Font

Eine zweite Variante:

Überschriften
→ charakterstarke Serif

Fließtext
→ neutrale Sans Serif

oder umgekehrt.

Die Kombination kann eine klare Markenwirkung erzeugen.

Schriftkombinationen brauchen Gemeinsamkeiten oder bewussten Kontrast

Zwei fast identische Sans-Serif-Schriften können aussehen wie ein Fehler.

Zwei sehr unterschiedliche, aber gut abgestimmte Schriften können dagegen bewusst wirken.

Die Frage lautet:

Warum brauchen wir zwei?

Schriftpaarung nach Funktion

Eine gute Kombination kann beispielsweise aufteilen:

Markencharakter
→ Heading Font

Lesekomfort
→ Body Font

Das ist nachvollziehbar.

Zu viele Hervorhebungsmechanismen vermeiden

Beispiel H2:

größer,

fett,

blau,

unterstrichen,

Versalien,

mit Icon,

mit Linie.

Vielleicht ist das alles nicht nötig.

Typografie profitiert oft von Zurückhaltung.

Weißraum gehört zur Typografie

Textgestaltung endet nicht an den Buchstaben.

Auch Abstände zwischen:

Überschrift und Absatz,

Absätzen,

Listen,

Abschnitten

sind Teil des Leserythmus.

Absatzabstand

Zwei Absätze brauchen eine erkennbare Trennung.

Im Web geschieht das häufig über vertikalen Abstand.

Absatz eins.


Absatz zwei.

Eine zusätzliche Einrückung wie im klassischen Buchsatz ist dann meist nicht nötig.

Abschnittsabstand

Vor einer neuen H2 sollte typischerweise mehr Abstand stehen als zwischen H2 und ihrem ersten Absatz.

Dadurch entsteht:

voriger Inhalt


neuer Abschnitt
Text gehört dazu

Das unterstützt die visuelle Hierarchie.

Abstände sollten systematisch sein

Nicht:

H2 einmal 47 Pixel.

Dann 33.

Dann 58.

Besser eine definierte Spacing-Skala.

Zum Beispiel:

spacing-s
spacing-m
spacing-l
spacing-xl

Das verbindet Typografie mit dem Designsystem aus UI Design.

Vertikaler Rhythmus

Wenn Textstile und Abstände konsistent zusammenspielen, entsteht ein wiederkehrender visueller Rhythmus.

Seiten wirken dadurch ruhiger.

Auch wenn der Nutzer niemals bewusst sagt:

Hervorragender vertikaler Rhythmus.

Er spürt die Ordnung.

Responsive Typografie

Eine H1, die auf einem großen Bildschirm perfekt wirkt, kann mobil viel zu dominant werden.

Responsive Typografie passt Größen an den verfügbaren Raum an.

Desktop
→ größere Displaytypen

Mobil
→ kompaktere Displaytypen

Dabei bleibt die Hierarchie erhalten.

Nicht jede Textgröße muss sich verändern

Body Text kann auf verschiedenen Geräten relativ ähnlich bleiben.

Eine sehr große H1 kann dagegen deutlich skalieren.

Das ist sinnvoll, weil Body Text primär lesbar bleiben muss.

Breakpoint-basierte Typografie

Eine einfache Strategie:

Mobile
→ H1 klein

ab mittlerer Breite
→ H1 größer

Desktop
→ H1 groß

Das funktioniert gut.

Fluid Typography

Eine andere Strategie lässt die Größe innerhalb eines Bereichs kontinuierlich wachsen.

Minimum
↓
fließende Skalierung
↓
Maximum

Dadurch entstehen weniger harte Sprünge.

clamp() als technisches Konzept

CSS kann beispielsweise eine minimale, flexible und maximale Größe kombinieren.

Konzeptionell:

mindestens klein genug
+
wächst mit Viewport
+
niemals größer als Maximum

Die genaue Syntax gehört eher zur Webentwicklung.

Für das Designverständnis wichtig:

Responsive Typografie kann fließend und begrenzt sein.

Extrem große Display Typography

Manche moderne Websites verwenden riesige Überschriften.

Zum Beispiel:

WISSEN,
DAS DU
ANWENDEN
KANNST.

Das kann visuell stark sein.

Aber auf kleineren Geräten benötigt es sehr sorgfältige Anpassung.

Große Schrift verbraucht Raum

Auf Desktop vielleicht kein Problem.

Mobil kann eine H1 den gesamten ersten Bildschirm belegen.

Deshalb sollte geprüft werden:

Was soll zuerst sichtbar sein?

Nur Überschrift?

Oder auch:

Einleitung,

CTA,

Bild?

Typografie beeinflusst Responsive Webdesign direkt.

Lange Titel sind ein Stresstest

Nicht nur:

Was ist KI?

testen.

Sondern:

Welche Hardware braucht lokale KI und wie viel VRAM ist sinnvoll?

Eine gute Heading-Komponente muss beides verkraften.

Deutsche Sprache macht das besonders relevant

Lange zusammengesetzte Wörter und längere Überschriften können Layouts schnell belasten.

Das sollte bereits im Design berücksichtigt werden.

Typografie und mobile Navigation

Ein Menüpunkt:

KI & Automatisierung

braucht mehr Platz als:

Blog

Die Navigation sollte nicht nur mit Demo-Labels getestet werden.

Reale Begriffe gehören ins Design.

Typografie in Buttons

Ein Button braucht ausreichend:

Textgröße,

Zeilenhöhe,

Innenabstand.

Die Schrift sollte klar lesbar sein.

Aber der Button muss nicht wie eine Überschrift wirken.

Lange Buttontexte

Schlecht für Layout:

[ Klicke hier, um unsere verschiedenen Tarife miteinander zu vergleichen ]

Besser:

[ Tarife vergleichen ]

Das ist gleichzeitig Typografie und Content Design.

Buttons sollten nicht künstlich durch kleinere Schrift gerettet werden

Wenn die Beschriftung zu lang ist:

Text verbessern.

Nicht:

Font auf 9 Pixel verkleinern.

Labels

Formularlabels können etwas kleiner als Body Text sein.

Aber sie müssen klar lesbar bleiben.

Besonders:

Pflichtfelder,

Fehler,

Hilfetexte

dürfen nicht in mikroskopische Typografie abrutschen.

Metadaten

Datum.

Autor.

Lesezeit.

Kategorie.

Diese Informationen sind sekundär.

Typografisch können sie zurücktreten.

Zum Beispiel über:

kleinere Größe

oder:

geringeren Kontrast.

Aber:

sekundär bedeutet nicht unwichtig oder unlesbar.

Fußnoten und Kleingedrucktes

Ein verbreiteter schlechter Reflex:

Alles rechtlich oder technisch Nebensächliche extrem klein setzen.

Wenn Information relevant ist, sollte sie weiterhin lesbar bleiben.

Kleingedrucktes darf nicht zur Tarnung werden.

Typografie und Barrierefreiheit

Lesbarkeit betrifft:

Menschen mit Sehbeeinträchtigungen,

ältere Nutzer,

Menschen mit Legasthenie,

aber auch:

jeden Nutzer bei ungünstigen Bedingungen.

Zum Beispiel:

Sonnenlicht.

Kleiner Bildschirm.

Müdigkeit.

Schlechte Displayqualität.

Nutzer können Text vergrößern

Ein robustes Layout sollte nicht zusammenbrechen, wenn Browsertext oder Zoom vergrößert wird.

Zum Beispiel:

Buttontext darf nicht abgeschnitten werden.

Navigation darf nicht unbedienbar werden.

Cards müssen wachsen können.

Feste Höhen sind bei Text gefährlich

Beispiel:

Cardhöhe = 180 px

Der Text wird größer.

Nun passt er nicht mehr hinein.

Ein flexibles Layout ist robuster.

Text sollte bestimmen dürfen, wie viel Platz er braucht

Das entspricht der Grundidee responsiver Gestaltung.

Inhalt
→ benötigt Raum

nicht:

fester Raum
→ Inhalt muss irgendwie hineinpassen

Kontrast gehört zur Typografie

Dunkler Text auf hellem Hintergrund besitzt meist hohen Kontrast.

Hellgrauer Text auf Weiß weniger.

Typografie ist nicht nur Form.

Auch Textfarbe beeinflusst Lesbarkeit.

Das vertiefen wir im folgenden Beitrag zu Farben im Webdesign.

Sekundärtext braucht weiterhin genügend Kontrast

Ein häufiges modernes Designmuster:

#eeeeee

auf:

#ffffff

wirkt möglicherweise sehr elegant im Designmockup.

Im Alltag ist es kaum lesbar.

Zurückhaltung sollte nie auf Kosten der Funktion gehen.

Dark Mode verändert Typografie

Weiße Schrift auf rein schwarzem Hintergrund kann sehr hart wirken.

Viele dunkle Interfaces verwenden deshalb:

dunkelgraue Flächen

und:

leicht gebrochenes Weiß.

Die optimale Abstimmung hängt vom gesamten Farbsystem ab.

Schriftgewicht wirkt im Dark Mode teilweise anders

Helle Schrift auf dunklem Hintergrund kann subjektiv kräftiger erscheinen.

Ein Designsystem sollte deshalb nicht blind dieselben visuellen Entscheidungen übertragen.

Light und Dark Theme verdienen reale Tests.

Typografie und Performance

Webfont lädt langsam.

Zunächst wird Fallback angezeigt.

Dann erscheint der gewünschte Font.

Wenn beide unterschiedlich breit sind:

Text
↓
Fontwechsel
↓
Umbruch verändert sich

Das kann zu sichtbaren Layoutbewegungen führen.

Font Loading kann Core Web Vitals beeinflussen

Typografie trifft hier auf Core Web Vitals.

Ein wechselnder Font kann beispielsweise die Textmaße verändern und dadurch visuelle Verschiebungen verursachen.

Eine gute Fontstrategie sollte deshalb Performance und Layoutstabilität berücksichtigen.

Font-Dateigröße reduzieren

Mögliche Strategien sind:

nur benötigte Schnitte,

geeignete moderne Formate,

gegebenenfalls Zeichensatz-Subsets,

sinnvolle Cache-Nutzung.

Die konkrete technische Umsetzung hängt vom System ab.

Nicht jede Website braucht alle Schriftsysteme der Welt

Eine deutschsprachige Website braucht möglicherweise andere Zeichensätze als ein internationales Portal mit:

Lateinisch,

Kyrillisch,

Griechisch

und weiteren Schriftsystemen.

Fontauswahl und Internationalisierung sollten zusammen gedacht werden.

Umlaute testen

Eine Schrift muss natürlich:

Ä Ö Ü ä ö ü ß

sauber unterstützen.

Bei professionellen Webfonts ist das normalerweise selbstverständlich.

Bei ungewöhnlichen kostenlosen Fonts sollte trotzdem geprüft werden.

Sonderzeichen testen

Zum Beispiel:

€
%
&
@
→
✓

Auch diese können in Interfaces regelmäßig vorkommen.

Font Licensing

Nicht jede Schrift darf beliebig auf Websites verwendet werden.

Eine Desktoplizenz bedeutet nicht automatisch, dass dieselbe Fontdatei als Webfont ausgeliefert werden darf.

Vor produktiver Verwendung sollte daher geprüft werden, welche Nutzung die konkrete Schriftlizenz erlaubt.

Kostenlose Schrift bedeutet nicht automatisch freie Nutzung für alles

Auch kostenlose Fonts besitzen Lizenzen.

Die Bedingungen können unterschiedlich sein.

Das sollte Bestandteil einer professionellen Fontauswahl sein.

Datenschutz und extern geladene Fonts

Wenn Fontdateien von einem externen Dienst geladen werden, entsteht ein zusätzlicher externer Request.

Aus technischen, Datenschutz- und Performancegründen kann es sinnvoll sein, Webfonts selbst zu hosten, sofern die Lizenz das erlaubt.

Die konkrete rechtliche Bewertung gehört allerdings in den Datenschutzbereich.

Selbst gehostete Fonts

Konzeptionell:

Website
↓
eigener Server
↓
Fontdatei

statt:

Website
↓
externer Fontanbieter

Das kann mehr Kontrolle ermöglichen.

Fonts gehören zum Website-Asset-System

Wie:

Bilder,

CSS,

JavaScript.

Sie sollten:

versioniert,

optimiert,

korrekt gecacht

werden.

Typografie ist damit auch technische Infrastruktur.

WordPress und Typografie

Ein WordPress-Theme sollte möglichst zentrale Typografieregeln definieren.

Zum Beispiel:

Body

H1

H2

H3

Links

Buttons

Caption

Diese Regeln gelten anschließend über viele Seiten hinweg.

Einzelne Artikel sollten Schriftgrößen nicht manuell festlegen

Schlecht:

Artikel A:

H2 auf 31 Pixel.

Artikel B:

H2 auf 27.

Artikel C:

H2 blau und 34.

Damit zerfällt das System.

Besser:

H2
→ zentrale Theme-Regel

Globale Styles sind besonders wertvoll

Wird später entschieden:

Fließtext etwas größer.

Dann:

Body Style
↓
zentral ändern
↓
alle Artikel profitieren

Das ist wesentlich besser, als hunderte Seiten manuell anzupassen.

WordPress Block Editor

Auch Blöcke sollten sich möglichst an das globale Typographiesystem halten.

Ein Zitat kann beispielsweise eine definierte Variante besitzen.

Nicht:

bei jedem Zitat eine neue Fontgröße auswählen.

Design Tokens in WordPress

Das Prinzip aus UI Design lässt sich übertragen.

Zum Beispiel:

font-size-body

font-size-small

font-size-heading-2

oder besser semantisch:

text-body

text-caption

heading-section

Die konkrete technische Umsetzung hängt vom Theme ab.

Typografie für Wissensseiten

Eine Wissensplattform besitzt besondere Anforderungen.

Es gibt:

lange Texte,

viele Zwischenüberschriften,

Fachbegriffe,

Code,

Diagramme,

interne Links.

Der Text selbst ist ein Hauptprodukt.

Typografie ist deshalb besonders wichtig.

Wissensartikel brauchen Ruhe

Eine extrem extravagante Fließtextschrift kann spannend aussehen.

Nach 5.000 Wörtern vielleicht weniger.

Für Wissensseiten eignen sich häufig:

gut ausgebaute,

klar lesbare,

unaufdringliche

Textschriften.

Überschriften dürfen mehr Persönlichkeit besitzen

Hier kann Markencharakter stärker sichtbar werden.

Body
→ maximale Lesbarkeit

Headings
→ Lesbarkeit + Charakter

Das ist eine nützliche Arbeitsteilung.

Code braucht möglicherweise eine Monospace-Schrift

Zum Beispiel:

GET /api/users

oder:

{"status":"ok"}

Monospace bedeutet:

Jedes Zeichen besitzt ungefähr dieselbe horizontale Breite.

Das erleichtert bei Code:

Einrückung,

Struktur,

Zeichenvergleich.

Monospace ist für normalen Fließtext meist nicht ideal

Sie hat eine spezifische technische Wirkung.

Für kurze Codeelemente hervorragend.

Für lange redaktionelle Texte häufig ermüdend.

Inline Code und Codeblöcke

Inline:

style_id

sollte sich sichtbar vom normalen Text unterscheiden.

Ein Codeblock stärker:

Artikel
↓
Workflow
↓
Bildserver

Dabei müssen:

Größe,

Zeilenhöhe,

Kontrast

weiterhin lesbar bleiben.

Codeblöcke brauchen responsive Verhalten

Sehr lange Codezeilen können mobil horizontal überlaufen.

Mögliche Strategie:

Codeblock
→ horizontal scrollen

anstatt:

das gesamte Seitenlayout breit zu ziehen.

Tabellen, Code und Typografie

Nicht jeder Websitebereich braucht dieselbe Schriftgröße.

Eine Tabelle kann etwas kompakter sein.

Aber:

nicht so klein, dass die Informationsdichte die Lesbarkeit zerstört.

Typografie als System

Eine robuste Website könnte beispielsweise folgende Rollen besitzen:

Display
Page Heading
Section Heading
Subheading
Body
Body Small
Label
Caption
Code

Das ist überschaubar.

Und deckt sehr viele Fälle ab.

Jede Rolle braucht klare Regeln

Zum Beispiel:

Page Heading

• starke Größe
• kräftiges Gewicht
• kompakte Zeilenhöhe

Body

• komfortable Größe
• großzügigere Zeilenhöhe
• begrenzte Zeilenlänge

Caption

• kleiner
• etwas schwächerer Kontrast
• trotzdem klar lesbar

Keine 37 Textstile nötig

Ein Designsystem kann schnell ausufern.

Heading XL
Heading XL Small
Heading XL Compact
Heading Hero
Heading Hero Alt
Heading Special

Wenn niemand mehr weiß, welche Variante verwendet werden soll, verliert das System seinen Nutzen.

Wenige semantische Rollen sind besser

Neue Varianten nur dann hinzufügen, wenn eine echte wiederkehrende Aufgabe entsteht.

Das entspricht dem allgemeinen Prinzip guter Designsysteme.

Typografische Konsistenz entsteht durch Regeln

Nicht dadurch, dass jede Seite exakt gleich aussieht.

Ein Hero darf größer sein als ein Artikeltitel.

Eine Cardüberschrift kleiner als H2.

Aber die Unterschiede sollten nachvollziehbar sein.

Beispiel Hierarchie

Hero Display
→ sehr prominent

Page Heading
→ zentrale Seitenüberschrift

Section Heading
→ Hauptabschnitt

Card Heading
→ Komponententitel

Body
→ Inhalt

Caption
→ Zusatzinformation

Damit entsteht ein semantischer Typografiebaukasten.

Typografie und Contentstruktur müssen zusammenpassen

Eine H2 sollte nicht nur größer aussehen.

Sie sollte auch semantisch tatsächlich eine H2 sein.

Gestaltung sollte die Dokumentstruktur widerspiegeln.

Das hilft:

Nutzern,

Screenreadern,

Suchmaschinen,

Wartbarkeit.

Nicht Überschriften nur wegen der Optik verwenden

Schlecht:

H2 wird gewählt, weil sie schön groß ist.

Obwohl semantisch nur ein kleiner Hinweis gemeint ist.

Besser:

passende HTML-Struktur

plus:

passender visueller Stil.

CSS kann Aussehen von Bedeutung trennen

Ein Element kann semantisch korrekt bleiben und trotzdem eine passende visuelle Rolle erhalten.

Das verhindert, dass Dokumentstruktur für Styling missbraucht wird.

Überschriften sollten logisch aufeinander folgen

H1
↓
H2
↓
H3

Das erleichtert das Verständnis der Struktur.

Nicht jede kleine optische Überschrift braucht eine tiefere Heading-Ebene.

Typografie und SEO

Typografie ist keine direkte SEO-Magie.

Eine schöne Schrift erzeugt kein Ranking.

Aber eine klare Struktur mit sinnvollen Überschriften und gut lesbaren Inhalten unterstützt eine verständliche Seite.

SEO und Nutzerfreundlichkeit treffen sich hier.

Typografie und interne Verlinkung

Links innerhalb langer Wissensartikel sollten:

erkennbar,

aber nicht übermäßig dominant

sein.

Wenn jedes Linkwort knallrot und fett erscheint, zerfällt der Lesefluss.

Eine konsistente, etwas zurückhaltendere Linkdarstellung kann besser funktionieren.

Typografie und KI-generierte Inhalte

Automatisierte Contentproduktion erhöht den Wert eines stabilen Typographiesystems.

Wenn hunderte Artikel veröffentlicht werden:

sollte kein Sprachmodell bestimmen:

welche Schriftgröße,

welche Farbe,

welches Fontgewicht

jeder Absatz bekommt.

Inhalt liefert Semantik

H2
H3
Absatz
Zitat
Code

Das Designsystem entscheidet über die Darstellung.

semantischer Inhalt
↓
Theme
↓
konsistente Typografie

Das ist wesentlich robuster.

KI kann Textlängen trotzdem beeinflussen

Automatisch erzeugte Überschriften können extrem lang sein.

Deshalb muss das Typographiesystem diese Fälle aushalten.

Ein weiterer Grund:

mit realistischen Daten testen.

Ein Headline-Limit kann sinnvoll sein

Nicht ausschließlich aus Designgründen.

Auch redaktionell können präzisere Überschriften besser sein.

Das System kann beispielsweise Warnungen erzeugen, wenn ein Kartentitel außergewöhnlich lang wird.

Typografie darf Content nicht diktieren

Es wäre falsch, eine wichtige Aussage zu kürzen, nur weil eine Card technisch schlecht gebaut ist.

Manchmal sollte die Komponente verbessert werden.

Content und Design müssen gemeinsam funktionieren.

Wie wählt man eine Webschrift aus?

Nicht nur:

Gefällt sie mir?

Sondern mehrere Fragen.

Ist sie gut lesbar?

Besonders bei kleinen Größen und langen Texten.

Gibt es die benötigten Zeichen?

Deutsch.

Sonderzeichen.

Währungen.

Codekontext gegebenenfalls.

Gibt es geeignete Gewichte?

Brauchen wir:

Regular,

Semibold,

Bold?

Sind diese tatsächlich verfügbar?

Funktioniert sie mobil?

Nicht nur auf großem Designmonitor testen.

Wie groß sind die Dateien?

Typografie besitzt Performancekosten.

Welche Lizenz gilt?

Ist Webnutzung erlaubt?

Wie sieht der Fallback aus?

Bricht das Layout beim Wechsel stark?

Passt sie zur Marke?

Nicht jede ausgezeichnete Leseschrift passt zum gewünschten visuellen Charakter.

Funktioniert sie mit der zweiten Schrift?

Wenn überhaupt zwei verwendet werden.

Testseite statt Fontvorschau

Eine Schrift sollte nicht nur anhand eines einzelnen Wortes beurteilt werden.

Besser eine echte Testseite erstellen mit:

H1

H2

H3

langen Absätzen

Links

Buttons

Zahlen

Umlauten

Code

Dann sieht man, wie das System tatsächlich wirkt.

Dieselbe Seite mit mehreren Fontkandidaten

Zum Beispiel:

Variante A
↓
Font A

Variante B
↓
Font B

Variante C
↓
Font C

Jetzt lässt sich sinnvoll vergleichen.

Nicht nur das Logo betrachten

Eine Schrift, die im Logo hervorragend aussieht, muss keine gute Webtextschrift sein.

Logo und UI-Typografie können unterschiedliche Aufgaben besitzen.

Typografie auf echten Geräten testen

Laptop.

Smartphone.

Vielleicht Tablet.

Nicht nur im Designprogramm.

Rendering und Wahrnehmung unterscheiden sich.

Heller und dunkler Hintergrund testen

Wenn die Website Dark Mode besitzt, muss dieselbe Schrift dort ebenfalls funktionieren.

Manche sehr feinen Gewichte verhalten sich optisch anders.

Typografie mit langem Artikel testen

Ein Text mit zwei Absätzen sagt wenig.

Erst bei:

2.000,

3.000,

5.000 Wörtern

wird sichtbar, wie angenehm das Lesen wirklich ist.

Scanbarkeit testen

Nur Überschriften betrachten.

Erkennt man:

die Struktur?

Kann man schnell zwischen Hauptabschnitten unterscheiden?

Das ist besonders bei Wissensartikeln wichtig.

Typografie ist auch Navigationshilfe

Ein Leser kann einen Artikel überfliegen:

H2
↓
H2
↓
H3
↓
H2

und versteht dadurch bereits die Argumentationsstruktur.

Schriftgestaltung unterstützt also Navigation innerhalb des Inhalts.

Typografie sollte über Jahre funktionieren

Modische Displayfonts können kurzfristig spektakulär wirken.

Eine Wissensplattform mit langlebigen Inhalten profitiert möglicherweise stärker von einer zeitlosen typografischen Basis.

Die Marke kann trotzdem über:

Überschriften,

Farben,

Bilder

Persönlichkeit entwickeln.

Relaunch ohne Contentänderung

Ein großer Vorteil sauberer semantischer Struktur:

Die gesamte Website kann später typografisch neu gestaltet werden.

gleicher Inhalt
↓
neues Theme
↓
neue Typografie

Ohne tausende Artikel anzufassen.

Das ist enorm wertvoll.

Typografie sollte zentral versionierbar sein

Designsystem:

Typography v1
↓
Typography v2

Zum Beispiel:

größere Body-Schrift,

ruhigere H2,

andere Heading Font.

Die Änderung erfolgt zentral.

Änderungen sollten im realen Layout getestet werden

Eine neue H2 sieht einzeln schön aus.

Aber vielleicht:

werden Artikel dadurch deutlich länger,

Cards brechen,

Mobile-Ansichten verschieben sich.

Designänderungen wirken auf das gesamte System.

Performance nach Fontwechsel erneut prüfen

Neue Schrift.

Mehr Gewichtungen.

Größere Dateien.

Nun kann sich:

Ladezeit

oder:

Layoutstabilität

verändern.

Design und Technik bleiben verbunden.

Häufige Fehler bei Webtypografie

Einige Probleme tauchen immer wieder auf:

zu kleine Fließtexte

extrem breite Textzeilen

zu geringe Zeilenhöhe

zu viele Schriftfamilien

zu viele Fontgewichte

kaum unterscheidbare H2 und H3

zu schwacher Textkontrast

riesige Überschriften auf Mobilgeräten

unklare Linkdarstellung

zufällige Abstände

Die meisten davon sind keine exotischen Typografieprobleme.

Es sind Grundlagen.

Fehler: Fontwahl vor Informationsstruktur

Stundenlang wird über Schrift A oder B diskutiert.

Aber:

H1,

H2,

Metadaten,

Buttons

besitzen noch keine klare Hierarchie.

Die wichtigere Arbeit kommt zuerst.

Fehler: Alles über Schriftgröße lösen

H1 groß.

H2 kleiner.

Body kleiner.

Das reicht als System nicht immer.

Auch:

Gewicht,

Abstand,

Farbe,

Position

tragen zur Hierarchie bei.

Fehler: Metadaten winzig machen

Sekundär bedeutet nicht:

9-Pixel-Schrift.

Metainformation darf zurücktreten und trotzdem komfortabel lesbar bleiben.

Fehler: Desktoptypografie einfach schrumpfen

Responsive Typografie braucht eigene Überlegungen.

Eine 80-Pixel-H1 wird nicht automatisch durch:

50 %

zur idealen mobilen Überschrift.

Fehler: Schriftgröße aus Platzmangel reduzieren

Wenn vier Cards nebeneinander nur funktionieren, weil Body Text auf 11 Pixel verkleinert wird:

sollten vielleicht drei Cards nebeneinanderstehen.

Layoutproblem.

Nicht Typografieproblem.

Fehler: Fontdateien ohne Bedarf laden

Sechs Gewichte.

Drei Italics.

Zwei Schriftfamilien.

Eine enorme Menge Daten.

Dabei nutzt die Website praktisch:

Regular und Bold.

Das ist unnötig.

Fehler: Font nur nach Marke auswählen

Eine starke Markenfont kann ausgezeichnet für:

Hero,

Logo,

Überschriften

sein.

Aber nicht für:

4.000 Wörter Fließtext.

Einsatzbereiche unterscheiden.

Fehler: Platzhaltertexte testen

Lorem ipsum

passt immer erstaunlich gut.

Echte Sprache nicht.

Deshalb:

reale deutsche Inhalte verwenden.

Ein praktischer Typografie-Workflow

Ein sinnvoller Ablauf kann so aussehen:

Nutzungsart bestimmen
↓
Schriftkandidaten auswählen
↓
Body zuerst testen
↓
Heading-Hierarchie bauen
↓
Zeilenhöhe festlegen
↓
Textbreite prüfen
↓
Responsive Größen definieren
↓
Links, Labels und Metadaten ergänzen
↓
Performance prüfen
↓
reale Seiten testen

Warum Body zuerst?

Bei einer Wissenswebsite ist Fließtext der größte Teil des Inhalts.

Wenn der Body nicht funktioniert:

hilft die schönste H1 wenig.

Deshalb zunächst:

Leseschrift,

Größe,

Zeilenhöhe,

Breite

optimieren.

Danach Überschriften

Nun wird die Hierarchie darauf aufgebaut.

Body
↓
H3
↓
H2
↓
H1

Nicht zwangsläufig mathematisch.

Aber optisch nachvollziehbar.

Danach sekundäre Typografie

Zum Beispiel:

Caption

Metadata

Label

Button

Navigation

Code

Sie sollte aus dem Hauptsystem abgeleitet werden.

Nicht wie ein zweites unabhängiges Design wirken.

Danach Responsive

Kleine Breite.

Mittlere Breite.

Große Breite.

Besonders testen:

mehrzeilige Headings.

Danach Performance

Welche Fonts werden tatsächlich geladen?

Welche Gewichte?

Wie groß sind sie?

Entstehen sichtbare Verschiebungen?

Danach reale Contentseiten

Nicht nur Styleguide.

Startseite.

Hub.

Artikel.

Formular.

Mobile.

Dark Mode, wenn vorhanden.

Erst dann ist Typografie ein System

Nicht einfach:

Wir verwenden Schrift X.

Sondern:

Schriftfamilien
+
Hierarchie
+
Größen
+
Gewichte
+
Zeilenhöhen
+
Abstände
+
responsive Verhalten

Das ist echte Webtypografie.

Was du dir über Typografie im Web merken solltest

Typografie umfasst wesentlich mehr als die Auswahl einer Schriftart.

Ein funktionierendes Webtypographiesystem besteht aus mehreren zusammenhängenden Entscheidungen:

Schriftfamilie
+
Schriftgröße
+
Schriftgewicht
+
Zeilenhöhe
+
Zeilenlänge
+
Abstände
+
Farbe
+
Hierarchie

Die wichtigste Aufgabe lautet:

Text
↓
leicht erfassbar
↓
angenehm lesbar
↓
klar strukturiert

Eine gute Schrift kann schlecht funktionieren, wenn sie:

zu klein,

zu eng,

in einer zu breiten Textspalte

eingesetzt wird.

Umgekehrt kann eine einfache Schrift hervorragend funktionieren, wenn ihre Typografie gut abgestimmt ist.

Die klassische Unterscheidung zwischen:

Serif

und:

Sans Serif

sagt allein noch wenig über Eignung oder Qualität aus.

Beide können im Web hervorragend funktionieren.

Wichtiger sind:

Lesbarkeit,

Charakter,

Zeichenausstattung,

technische Qualität

und der konkrete Einsatzzweck.

Für die meisten Websites reichen:

eine Schriftfamilie

oder:

Heading Font
+
Body Font

vollkommen aus.

Jede weitere Schrift erhöht Komplexität und möglicherweise Ladeaufwand.

Auch bei Fontgewichten gilt:

mehr
≠
besser

Wenn Regular, Semibold und Bold reichen, müssen nicht automatisch acht weitere Schnitte geladen werden.

Die Schriftgröße sollte nicht anhand einer universellen magischen Pixelzahl gewählt werden.

Schriften wirken bei identischen nominellen Größen unterschiedlich.

Entscheidend ist die tatsächliche Wahrnehmung.

Die Zeilenhöhe sorgt dafür, dass Text weder zusammenklebt noch auseinanderfällt.

zu eng
→ anstrengend

zu weit
→ Zusammenhang geht verloren

Die Zeilenlänge ist ebenso wichtig.

zu lang
→ Auge verliert leichter die nächste Zeile

zu kurz
→ zu viele Umbrüche

Deshalb sollte langer Fließtext auf großen Displays nicht automatisch die gesamte Bildschirmbreite nutzen.

Ein breiter Monitor braucht nicht zwingend eine breite Textspalte.

Die Hierarchie entsteht aus definierten Textrollen.

Zum Beispiel:

Page Heading
↓
Section Heading
↓
Subheading
↓
Body
↓
Caption

Diese Rollen sollten als Teil eines Designsystems verstanden werden.

Das ist besser als auf jeder Seite neue Größen zu erfinden.

UI Design liefert dafür das Konzept semantischer Design Tokens.

Zum Beispiel:

heading-page

statt:

font-size-52

Dadurch kann sich die konkrete Größe später verändern, ohne dass sich die Bedeutung des Stils ändert.

Das ist besonders für Responsive Webdesign wertvoll.

Desktop
→ heading-page groß

Mobil
→ heading-page kleiner

Die Hierarchierolle bleibt identisch.

Responsive Typografie sollte allerdings nicht einfach alle Schriften proportional verkleinern.

Body Text muss auf kleinen Displays weiterhin angenehm lesbar bleiben.

Besonders große Displayüberschriften brauchen dagegen oft stärkere Anpassungen.

Auch Typografie und Performance hängen eng zusammen.

mehr Webfonts
+
mehr Gewichte
↓
mehr Ressourcen

Deshalb sollten nur tatsächlich benötigte Fontdateien geladen werden.

Systemfonts können eine sehr performante Alternative darstellen.

Eigene Webfonts bieten dafür mehr Kontrolle über die Markenwirkung.

Ein guter Fallback reduziert Probleme, falls der gewünschte Font noch nicht geladen wurde.

Das kann auch die visuelle Stabilität beeinflussen und damit Berührungspunkte zu Core Web Vitals schaffen.

Für WordPress sollte Typografie möglichst zentral im Theme beziehungsweise Designsystem definiert werden.

Artikel
↓
semantische H1/H2/H3-Struktur
↓
Theme
↓
Darstellung

Nicht:

Artikel A
→ eigene Fontgrößen

Artikel B
→ andere Fontgrößen

Artikel C
→ wieder andere

Dadurch können später hunderte Seiten gleichzeitig typografisch verbessert werden.

Besonders bei Wissensseiten gilt:

Text ist nicht das Material, das zwischen die Designelemente gefüllt wird. Text ist eines der wichtigsten Designelemente selbst.

Eine gute Typografie sorgt dafür, dass lange Inhalte nicht wie eine Wand erscheinen.

Sie erzeugt:

Rhythmus,

Orientierung,

Hierarchie,

Lesekomfort.

Und genau deshalb gehört sie zu den Grundlagen guten Webdesigns.