Typografie

Bevor du dich in die Details der Schriftarten und -größen stürzt, stelle sicher, dass du die bestehenden Vorgaben deines Corporate Designs kennst und berücksichtigst.

• CD-Richtlinien prüfen: Informiere dich über die im Corporate Design festgelegten Hausschriften, Farbpaletten und allgemeinen Gestaltungsprinzipien. Diese bilden den Rahmen für deine Typografie-Richtlinien.

• Abstimmung mit Stakeholdern: Halte Rücksprache mit den für das Corporate Design verantwortlichen Personen (z.B. Marketing, Brand Management), um sicherzustellen, dass die neuen Lesbarkeitsrichtlinien optimal in die Markenidentität integriert werden und diese stärken.

• Priorität Lesbarkeit: Im Falle von Zielkonflikten zwischen CD-Vorgaben und den Anforderungen an maximale Lesbarkeit und Barrierefreiheit sollte die Lesbarkeit priorisiert werden. Solche Abweichungen sind jedoch immer in enger Abstimmung zu klären und zu dokumentieren.

Nachdem du die Weichen gestellt und die Anforderungen des Corporate Designs klar hast, geht’s ans Eingemachte:

Nicht jede Schrift ist für den Bildschirm geeignet.

• Setze auf bewährte Web-Schriften: Nutze serifenlose Schriften (Sans-Serif) wie Open Sans, Lato, Montserrat oder Roboto. Sie gelten auf Bildschirmen als besonders gut lesbar.

• Vermeide verschnörkelte oder sehr schmale Schriften: Dekorative oder stark komprimierte Schriftarten (Condensed) sind für Fließtext tabu.

• Prüfe den Zeichensatz: Stelle sicher, dass die Schriftart alle benötigten Zeichen unterstützt (z. B. Umlaute, Sonderzeichen, das €-Symbol).

Du hast die passende Schriftart gefunden? Perfekt! Dann musst du sie jetzt optimal in Szene setzen und für alle Lesebedürfnisse anpassen.

Zu kleiner Text ist eine der größten Barrieren. Aber du siehst schon … was ist „zu klein“? Und wann ist es „groß genug“? Orientiere dich einfach an folgende Maßgaben:

• Mindestgröße für Fließtext: Lege eine Basisschriftgröße von mindestens 16px für normalen Text fest. Dies ist die Standardeinstellung in den meisten Browsern und ein guter Ausgangspunkt.

• Nutze relative Einheiten: Definiere alle Schriftgrößen im CSS mit relativen Einheiten wie rem . Das stellt sicher, dass Nutzer:innen den Text im Browser problemlos vergrößern können, ohne dass dein Layout zerbricht (Anforderung von WCAG 1.4.4).

• Schaffe eine klare Hierarchie: Definiere eine sichtbare und logische Abstufung der Größen für Überschriften (H1 > H2 > H3 etc.), damit die Seitenstruktur auf den ersten Blick erkennbar ist.

Falls du dich jetzt fragst, was in Gottes Namen rem sein soll:

rem ist eine Maßeinheit, mit der du zum Beispiel sagen kannst, wie groß etwas sein soll – z. B. Schrift, Abstände oder Kästen .

Statt zu sagen „Das soll 16 Pixel groß sein“, sagst du:

css

font-size : 1rem ;

Und das bedeutet:

„So groß wie die Standardschriftgröße der Seite.“

In den meisten Fällen ist das 16 Pixel. Also ist:

• 1rem = 16 Pixel

• 2rem = 32 Pixel

• 0.5rem = 8 Pixel usw.

Warum?

Weil du dann alles automatisch mitvergrößern kannst, wenn jemand z. B. im Browser die Schriftgröße ändert.

Abstände sind genauso wichtig wie die Buchstaben selbst. Sie geben dem Text Luft zum Atmen. Auch hier gibt ein paar einfache Regeln, die dafür sorgen, dass dein Text maximal lesbar ist:

• Zeilenabstand (line-height): Setze den Zeilenabstand auf mindestens das 1,5-fache der Schriftgröße . Das verhindert, dass die Zeilen aneinanderkleben.

• Absatzabstand (margin-bottom): Sorge für einen deutlichen Abstand zwischen Absätzen, der größer ist als der Zeilenabstand (Empfehlung: mindestens das 2-fache der Schriftgröße).

• Vermeide Blocksatz (text-align: justify): Blocksatz erzeugt unregelmäßige Wortabstände („Löcher im Text“), die den Lesefluss stören. Nutze stattdessen linksbündigen Flattersatz.

Nachdem du den Text intern durch passende Abstände strukturiert hast, musst du nun auch die äußere Form der Textblöcke optimieren. Denn selbst der luftigste Text wird unleserlich, wenn er zu breit ist:

Niemand liest gerne Text, der sich über die gesamte Bildschirmbreite erstreckt. Um diese Barriere zu beseitigen, kannst du dich an folgende Maßgaben zur Zeilenlänge und -breite orientieren:

• Ideale Zeilenlänge: Begrenze die Breite von Textblöcken auf ca. 50–75 Zeichen pro Zeile . Das erleichtert dem Auge das Springen zur nächsten Zeile.

• Kurze Absätze: Gliedere deine Inhalte in kurze Absätze von maximal 4–5 Zeilen. Nutze Zwischenüberschriften und Listen, um den Text weiter aufzulockern (Du kennst das ja bereits aus SOP 13).

Das war´s! Du solltest jetzt einen barrierefreien und maximalen lesbaren Text haben.

Aber natürlich ist es damit noch nicht zu Ende. Wir machen das nicht nur, um unsere User:innen glücklich zu machen, sondern auch den Gesetzgeber.

Und darum müssen wir zum Schluss noch dokumentieren.

Du hast mit dieser SOP fast jeden Aspekt berücksichtigt – schreibe deine Entscheidung nun in eine Typographie-Richtlinie nieder.

Stelle sicher, dass die neuen Regeln von allen verstanden und angewendet werden.

• Dokumentiere alles in deinem Design-System oder Styleguide. Gib klare Beispiele für jede Regel an.

• Speichere deine Dokumentation in deinem Barrierefreiheits-Ordner ab

• Stelle Code-Snippets bereit, die Entwickler:innen direkt verwenden können (z. B. p { font-size: 1rem; line-height: 1.6; }).

• Definiere die Regeln als Teil deiner „Definition of Done“: Kein neues Design-Element oder keine neue Seite geht live, ohne dass die Typografie-Richtlinien geprüft wurden.