Typografie,
Farbe & Lesbarkeit

Die Schrift trägt 100 % deiner Botschaft. Ihre Aufgabe ist nicht, aufzufallen, sondern unsichtbar zu werden — damit der Inhalt durchscheint.

Serif oder Sans-Serif?

Die alte Regel „Serif für Print, Sans für Screen“ ist überholt.

Auf hochauflösenden Displays sind beide gut lesbar. Entscheidender als die Gattung ist die x-Höhe (die Höhe der Kleinbuchstaben): Schriften mit großer x-Höhe werden schneller erkannt und sind in zeitkritischen Situationen klar im Vorteil. Wähle die Gattung nach Tonfall — Serifen wirken redaktionell und vertrauenswürdig, serifenlose Schriften modern und klar.

Schriftgröße: 16 px ist der Boden, nicht das Ziel

16 px ist der Browser-Standard und die von Google empfohlene Mindestgröße für Fließtext; darunter wird Text in Accessibility-Audits beanstandet. Für längere Texte verbessern 18–20 px die Lesbarkeit ohne Nachteil. Lesegeschwindigkeit und Genauigkeit sind im Bereich ~10–14 pt am höchsten.

Schrift-Paarung: zwei Stimmen, nicht fünf

Ein charakterstarker Display-Font für Überschriften, eine ruhige Lesefont für den Fließtext — mehr braucht es selten. Dieser Guide nutzt genau das: Fraunces (Serif, Überschriften) trifft auf Hanken Grotesk (Sans, Fließtext).

• Maximal zwei Schriftfamilien pro Layout — Hierarchie entsteht über Größe, Gewicht und Farbe, nicht über immer neue Fonts.
• Kontrast erzeugen, nicht Konflikt: Eine Serif + eine Sans pairt fast immer gut. Zwei ähnliche Sans-Fonts wirken wie ein Fehler.
• Schriftschnitte nutzen: Eine gute Familie mit Light bis Bold ersetzt drei mittelmäßige Fonts.
• Große x-Höhe bevorzugen für schnelle Erkennbarkeit — besonders bei UI, Beschilderung und kleinen Größen.

Auszeichnungen sind wie Gewürz: eine Prise schärft den Blick, zu viel betäubt ihn. Die Regel für alles in diesem Kapitel — wenn alles betont ist, ist nichts betont.

Fett — die beste Auszeichnung zum Scannen

Menschen lesen online selten Wort für Wort, sie scannen. Fett hebt Schlüsselwörter so heraus, dass das Auge sie beim Überfliegen aufschnappt. Betone deshalb 1–2 tragende Wörter, nicht ganze Sätze.

Kursiv — leise Betonung & Titel

Kursiv eignet sich für Werktitel, Fremdwörter, kurze gedankliche Betonung und Zitate. Es flüstert, wo Fett ruft. Aber: Kursivschrift liest sich auf dem Bildschirm in kleinen Größen schlechter — nie für lange Passagen. Für echtes „Schau hier!“ ist Fett klarer.

Unterstreichen — im Web reserviert für Links

Die wichtigste Regel des Kapitels.

Online bedeutet eine Unterstreichung: anklickbar. Unterstreichst du normalen Text zur Betonung, versuchen Nutzer zu klicken, werden verwirrt — und das Vertrauen leidet. Unterstreichung kappt zudem die Unterlängen (p, g, y) und senkt die Lesbarkeit. Sie ist außerdem ein Relikt der Schreibmaschine, die kein Kursiv konnte.

Großbuchstaben & Marker

GROSSBUCHSTABEN über mehrere Wörter senken die Lesegeschwindigkeit, weil die charakteristische Wortform verloren geht — und sie wirken wie geschrei. Nutze sie nur für sehr kurze Labels oder Akronyme; Kapitälchen mit etwas Laufweite sind die elegantere Variante. Der Highlight-Marker ist eine moderne, freundliche Betonungsform — ebenfalls sparsam einsetzen.

• Fett für Scan-Anker (1–2 Wörter), Kursiv für Titel/feine Betonung, Unterstreichung nur für Links.
• Nie kombinieren: fett + kursiv + farbig + unterstrichen am selben Wort ist Lärm, kein Nachdruck.
• Pro Absatz höchstens eine Hervorhebung — sonst hebt sich nichts mehr ab.

Emoji — wirkungsvoll, aber zielgruppenabhängig

Studien zeigen: Emojis steigern Engagement und Kaufabsicht spürbar — besonders bei der Gen Z und bei Millennials. Entscheidend sind Authentizität und kultureller Kontext: ein passendes Emoji wirkt nahbar, ein aufgesetztes oder veraltetes wirkt peinlich und kann der Marke schaden. Für wen sich Emojis lohnen:

• 1–2 Emojis genügen pro Nachricht — eine Wand aus Emojis wirkt unseriös und übersteuert.
• Ans Ende setzen, nicht mitten in den Satz — und nie ein Wort ersetzen, das die Aussage trägt.
• Barrierefreiheit: Screenreader lesen jeden Emoji-Namen laut vor. Viele Emojis = akustisches Rauschen. Nicht als Aufzählungszeichen missbrauchen.
• Plattform & Kultur prüfen: Darstellung variiert je nach Gerät, und Bedeutungen unterscheiden sich zwischen Kulturen.

Der Abstand zwischen den Zeilen (Durchschuss / line-height) entscheidet, ob das Auge nach dem Zeilenende mühelos die nächste Zeile findet — oder verrutscht.

Faustregel: line-height 1,4–1,6 für Fließtext (1,5 ist der sichere Standard). Überschriften vertragen enger (1,0–1,3), weil sie nur ein, zwei Zeilen lang sind. Wichtig: Je länger die Zeile, desto mehr Durchschuss braucht sie.

• Unitless angeben: line-height: 1.5 statt 24px — so skaliert der Abstand mit der Schriftgröße mit.
• Absätze trennen mit Abstand, nicht mit Einzug und Abstand zugleich — eins von beidem reicht.

Die wohl unterschätzteste Stellschraube. Zu breite Textspalten sind der häufigste Lesbarkeits-Fehler im Web.

Der Idealbereich liegt bei 50–75 Zeichen pro Zeile, mit 66 Zeichen als meistgenanntem Optimum (nach Bringhurst). Anfänger lesen um die 45 Zeichen am besten, geübte Leser bis ~80. Darüber findet das Auge den nächsten Zeilenanfang schlecht — darunter zerhackt es den Lesefluss.

Umbruch fein steuern: text-wrap: balance & pretty

Zwei neuere CSS-Werte lösen zwei alte Ärgernisse ganz ohne manuelle Umbrüche. text-wrap: balance verteilt Überschriften auf gleich lange Zeilen — kein einzelnes Wort hängt mehr allein in der zweiten Zeile. text-wrap: pretty ist für Fließtext gedacht und verhindert „Schusterjungen“, also ein einsames Wort in der letzten Zeile eines Absatzes.

• Reine Aufwertung („progressive enhancement“): Ältere Browser ignorieren den Wert und brechen normal um — nichts geht kaputt, es sieht nur nicht ganz so fein aus.
• balance nur für kurze Blöcke: Browser wenden es aus Aufwandsgründen nur auf wenige Zeilen an (Chromium ≤ 6, Firefox ≤ 10) — ideal für Überschriften, nicht für ganze Absätze.
• Support (Stand Aug. 2026): Beide Werte sind jetzt breit verfügbar — balance und, seit Safari 26, auch pretty laufen in allen großen Browsern (Chrome, Edge, Firefox, Safari). Als progressive Aufwertung ohne Risiko einsetzbar.

Vier Optionen — aber für Fließtext gewinnt fast immer dieselbe: linksbündig.

• Fließtext immer linksbündig (bei LTR-Sprachen) — am lesbarsten, am barrierefreisten.
• Blocksatz meiden im Web: WCAG AAA (1.4.8) verbietet ihn ausdrücklich. Nuance: Mit guter Silbentrennung (hyphens:auto) ist der Nachteil in neueren Studien gering — aber das Risiko lohnt sich selten.
• Eine Ausrichtung pro Block: innerhalb eines Abschnitts nicht mischen.
• Aufzählungen & Icons hängend ausrichten — das schafft einen klaren Lesepfad ohne Zickzack.

Die Mehrheit liest mobil. Gute Schrift wächst stufenlos mit dem Bildschirm mit — statt an festen Bruchstellen zu springen.

Relative Einheiten statt fester Pixel

Gib Größen in rem an, nicht in px. So skaliert alles mit, wenn ein Nutzer seine bevorzugte Textgröße oder den Zoom erhöht — eine zentrale Accessibility-Anforderung. Und niemals den Zoom sperren.

Fließende Größen mit clamp()

Statt drei, vier Breakpoints definierst du eine Spanne aus Minimum, Vorzugswert und Maximum. Die Schrift wächst dann sanft mit der Viewport-Breite:

• 16 px bleibt das Minimum für Fließtext — auch und gerade auf dem Smartphone.
• Zeilenlänge passt sich automatisch an: Auf schmalen Screens ist die volle Breite okay, weil sie ohnehin im Idealbereich liegt. Mit max-width: 66ch bleibt sie auf großen Screens gezähmt.
• Zielgröße: AA-Minimum 24 × 24 px (WCAG 2.5.8), 44 × 44 px als Komfort-/AAA-Wert — Finger sind ungenauer als Mauszeiger.
• Mit echten Inhalten testen, nicht mit Blindtext, und bei 200 % Zoom prüfen.

Variable Fonts: eine Datei, viele Schnitte

Eine variable Schrift steckt alle Strichstärken, Breiten und optischen Größen in eine einzige Datei. Statt vier, fünf einzelne Schnitte (Regular, Medium, Bold …) nachzuladen, lädt der Browser einmalig — das spart Ladezeit und erlaubt stufenlose Zwischenwerte statt fester Sprünge.

Besonders wertvoll für Typografie ist die Achse optische Größe (opsz): Sie passt die Buchstabenform an die Schriftgröße an — feine Serifen und offene Formen im Fließtext, kräftigere Details in großen Headlines. Mit font-optical-sizing:auto geschieht das automatisch. (Diese Vorlage nutzt genau das — die Überschriften-Schrift Fraunces ist variabel und optisch skaliert.)

• Nur die genutzten Achsen einbinden: Lade nicht das volle Spektrum, wenn du nur Gewicht und opsz brauchst — sonst verschenkst du den Performance-Vorteil.
• Nicht überdrehen: Zwischenwerte sind ein Werkzeug, kein Selbstzweck. Zwei, drei klar unterscheidbare Gewichte bleiben lesbarer als ein Dutzend feiner Abstufungen.

Container Queries: am Baustein statt am Viewport

Klassische Media Queries fragen die Bildschirmbreite ab. Container Queries (@container) fragen die Breite des Eltern-Elements ab — eine Karte reagiert dann auf den Platz, den sie tatsächlich hat, egal ob sie im breiten Hauptinhalt oder in einer schmalen Seitenspalte steht. Das macht Komponenten wirklich wiederverwendbar. Seit 2023 in allen modernen Browsern verfügbar.

• Für Bausteine, die überall stehen können — Produktkacheln, Teaser, Widgets — sind Container Queries fast immer die robustere Wahl als Viewport-Breakpoints.
• Die Einheit cqi (1 % der Container-Breite) lässt Schrift relativ zum Baustein fließen — das Container-Pendant zu vw.

Was „aus einem Guss“ wirkt, folgt fast immer einem unsichtbaren System. Drei Systeme bringen sofort Ruhe ins Layout.

Das 8-Punkt-Raster

Lege alle Abstände und Größen auf Vielfache von 8 (mit 4 als Halbschritt). Das beendet das endlose „13 px oder 15 px?“-Raten, schafft optische Konsistenz und passt sauber zu gängigen Bildschirmauflösungen.

Eine Abstands-Skala

Nutze nicht beliebige Werte, sondern eine feste Leiter. So entsteht ein wiedererkennbarer Rhythmus zwischen Elementen:

Eine modulare Schrift-Skala

Statt zufälliger Größen leitest du alle aus einem Verhältnis ab — z. B. dem Faktor 1,25 (eine „große Terz“). Das Ergebnis ist eine harmonische, klar gestufte Hierarchie:

• Gemeinsame Kanten: Elemente an denselben unsichtbaren Linien ausrichten — das wirkt sofort aufgeräumt.
• Als Design-Token speichern (CSS-Variablen) und überall wiederverwenden statt jedes Mal neu zu erfinden.

text-box-trim: optischer Randausgleich

Über und unter jedem Text sitzt unsichtbarer Leerraum aus der Schrift­metrik (Ober- und Unterlängen). Das erschwert exaktes vertikales Ausrichten — etwa eine Überschrift bündig in einer Karte oder einem Button. text-box-trim (früher „leading-trim") schneidet diesen Raum kontrolliert weg, sodass Text an der Versal- bzw. Grundlinie sitzt statt an der Zeilenbox.

• Ersetzt „Magic-Number"-Margins: kein manuelles Nachjustieren negativer Abstände mehr, um Schrift-Leerraum zu kaschieren.
• Support (Aug. 2026): Chrome/Edge ab 133, Safari ab 18.2; Firefox noch nicht — als progressive Aufwertung einsetzen.

Farbe wirkt vor dem Verstand. Ein großer Teil des ersten Eindrucks einer Marke entsteht in Sekunden — und maßgeblich über Farbe.

Farbpsychologie: Bedeutung & Einsatz

Wichtig: Die Wirkung hängt stärker von Kontext & Kultur ab als von einer festen „Bedeutung“.

Kontrast: die nicht verhandelbare Regel

Lesbarkeit ist messbar. WCAG verlangt ein Kontrastverhältnis von ≥ 4,5 : 1 für normalen Text (AA) und ≥ 7 : 1 für AAA. Großer Text (ab ~24 px / 19 px fett) darf bei 3 : 1 liegen.

• Nie Information allein über Farbe transportieren (z. B. „die roten Felder“) — wegen Farbsehschwäche immer ein zweites Signal: Icon, Form, Text.
• Reines Schwarz auf reinem Weiß blendet leicht. Ein sehr dunkles Warmgrau auf gebrochenem Weiß liest sich angenehmer.

Die 60–30–10-Regel

Eine bewährte Aufteilung für ausgewogene Paletten: 60 % dominante (meist neutrale) Grundfarbe, 30 % sekundäre Farbe, 10 % Akzent — reserviert für genau die Elemente, die Aufmerksamkeit verdienen.

Moderne Farb-Werkzeuge: OKLCH, color-mix() & contrast-color()

Der Farbraum OKLCH beschreibt Farben über wahrnehmungs­gleiche Helligkeit, Chroma und Farbton. Der Vorteil: Gleiche L-Werte wirken gleich hell — so lassen sich Paletten und verlässliche Kontraste systematisch ableiten, statt sie zu erraten. color-mix() mischt zwei Farben direkt in CSS (etwa für Hover- oder Tönungsstufen), light-dark() liefert je Farbwert eine Hell-/Dunkel-Variante fürs Theming.

• Kontrast automatisch: contrast-color() gibt zu einer Fläche eine kontrastreiche Textfarbe zurück — hilfreich, ersetzt aber keine bewusste AAA-Prüfung.
• Support (Aug. 2026): OKLCH und color-mix() sind breit verfügbar (Baseline); contrast-color() ist seit Frühjahr 2026 in allen großen Engines neu dabei, light-dark() nahezu flächendeckend.

Dark Mode ist kein simples Umkehren der Helligkeit. Falsch gemacht flimmert und blendet er mehr als der helle Modus.

• Kein reines Schwarz: Nutze ein sehr dunkles Grau (z. B. #16181D). Reines Schwarz mit weißem Text erzeugt grelles Nachflackern.
• Kein reines Weiß für Text: gebrochenes Weiß (#E8E6E1) ist augenfreundlicher.
• Akzentfarben entsättigen/aufhellen: Kräftige Töne „leuchten“ auf dunklem Grund unangenehm. Etwas heller und weniger satt.
• Tiefe über Helligkeit statt Schatten: Höhergelegene Flächen werden im Dark Mode heller, nicht schattierter.
• Kontrast bleibt Pflicht (≥ 4,5 : 1) und die Systemeinstellung respektieren: prefers-color-scheme + manueller Umschalter.

Bilder tragen Tempo, Stimmung und Vertrauen — vorausgesetzt, sie laden schnell und sind für alle zugänglich.

Einheitliche Seitenverhältnisse

Halte dich an wenige feste Formate. Das beruhigt das Layout und verhindert, dass Inhalte beim Laden herumspringen (Layout-Shift / CLS):

Immer Breite & Höhe bzw. aspect-ratio setzen, damit der Platz reserviert ist, bevor das Bild da ist.

Performance & Vertrauen

• Moderne Formate (WebP/AVIF), srcset für passende Auflösungen, loading="lazy" für Bilder unterhalb der Falz.
• Echte Menschen & Produkte schlagen generische Stockfotos — Authentizität schafft Vertrauen, Klischeebilder zerstören es.

Alt-Texte richtig schreiben

Alt-Texte beschreiben Bilder für Screenreader und Suchmaschinen — knapp, konkret, ohne „Bild von…“.

Gestaltung lenkt den Blick. Wer steuert, wohin das Auge zuerst fällt, steuert, was zuerst verstanden — und geklickt — wird.

Der Isolations-Effekt (Von Restorff)

Was sich von seiner Umgebung abhebt, wird erinnert und angeklickt. Ein einziger farbiger Button auf ruhigem Grund zieht den Blick zuverlässig an. Werden alle Elemente bunt, hebt sich nichts mehr ab — und die Conversion sinkt.

Weißraum = wahrgenommener Wert

Großzügiger Leerraum wirkt nicht „leer“, sondern teuer. Luxus- und Premium-Marken umgeben Produkte mit viel Raum; gedrängte Layouts wirken billig und überfordern. Weißraum lenkt zudem den Blick gezielt auf das, was übrig bleibt.

Lesemuster: F & Z

Auf textlastigen Seiten scannt das Auge in einem F-Muster (zwei horizontale Striche oben, dann vertikal links herunter). Auf visuellen Seiten eher im Z-Muster. Platziere das Wichtigste oben links und entlang dieser Pfade — und die zentrale Aktion am Ende des Z.

Vertrauen entsteht durch Konsistenz

• Konsistente Marken­farben steigern die Wiedererkennung deutlich — dieselben Töne überall einsetzen.
• Hierarchie führt: Größe, Gewicht und Farbe sagen dem Auge, was zuerst zählt. Wenn alles gleich wichtig aussieht, ist nichts wichtig.
• Vertraute Muster verkaufen: Warenkorb oben rechts, Primär-Button rechts — Konvention senkt die kognitive Last.
• Kontext & Kultur prüfen: Dieselbe Farbe kann je nach Markt Vertrauen oder Irritation auslösen. Keine universellen Annahmen.

Banner Blindness — Funktion darf nicht wie Deko aussehen

Nutzer blenden systematisch aus, was wie Werbung oder reine Zierde aussieht oder an typischen Werbeplätzen sitzt — erstmals nachgewiesen von Benway & Lane (1998) und seither durch Eye-Tracking der Nielsen Norman Group (1997–2024) wiederholt bestätigt. Das Tückische: Betroffen sind auch echte, wichtige Elemente wie Zusatz-Navigation oder „Quick-Links", sobald sie zu dekorativ gestaltet sind.

Genau hier liegt der Kern der verbreiteten Faustregel „CTA nicht in der CI-Farbe": Nicht die Markenfarbe an sich ist das Problem, sondern fehlender Kontrast und ein Aussehen, das als „Teil des Designs" statt als Aktion gelesen wird. Dominiert die CI-Farbe die Fläche, verschwindet ein gleichfarbiger Button (siehe Isolations-Effekt oben). Hebt sich die Aktion klar ab, darf sie durchaus die Markenfarbe tragen.

• Aktion ≠ Fläche: Primär-Buttons brauchen einen Akzent, der sich vom dominierenden Markenflächen-Ton abhebt — Kontrast schlägt Farbton.
• Navigation wie Navigation gestalten: Zusatz-Navigation nicht als buntes Zier-Band, sondern als klar klickbare, beschriftete Liste — kein Werbe-Look, keine ad-typischen Plätze (z. B. schmale Spalte ganz rechts).
• Wie ein Button aussehen: erhabene Fläche, klare Beschriftung mit Verb, echte Klick-Affordanz — nicht wie ein Slogan oder Grafikelement.
• Nicht in typische Werbezonen legen: Wichtige Links gehören in den Inhalt, nicht in ad-ähnliche Ränder oder Overlays.
• Im Zweifel messen: Klick-Heatmaps, Eye-Tracking oder ein A/B-Test zeigen, ob ein Element tatsächlich wahrgenommen wird — statt darüber zu streiten.

Die kleinen Texte — Buttons, Fehlermeldungen, Leerzustände — verkaufen oft mehr als jede Farbe. Sie sind der Moment, in dem Design spricht.

Buttons: Verb + Nutzen statt „Absenden“

Ein guter Button-Text beschreibt aus Nutzersicht, was als Nächstes passiert. „Absenden“ ist leer; „Kostenlos starten“ benennt Handlung und Gewinn.

Fehlermeldungen: helfen, nicht beschuldigen

Eine gute Fehlermeldung sagt, was passiert ist und wie man es löst — ohne Schuldzuweisung und ohne kryptische Codes.

• Leerzustände sind eine Chance: Erkläre, was hier erscheinen wird, und biete den nächsten Schritt an — statt einer leeren Fläche.
• Eine konsistente Stimme: Lege Tonalität fest (z. B. freundlich-direkt) und halte sie überall. Klar schlägt clever.
• Kürzen: Streiche jedes Wort, das die Aussage nicht trägt. Microcopy lebt von Knappheit.

Ein Element muss aussehen, was es kann — und sichtbar reagieren, sobald man es berührt. Sonst entsteht Unsicherheit.

Die fünf Zustände jedes klickbaren Elements

Plane für Buttons, Links und Eingaben immer alle Zustände — nicht nur den Ruhezustand:

Der Fokus-Ring ist Pflicht

Der sichtbare Rahmen beim Tabben (siehe „Focus“ oben) ist die Lebensader der Tastatur-Navigation und in WCAG 2.4.7 gefordert. Niemals outline: none ohne sichtbaren Ersatz — sonst wird die Seite für viele Menschen unbedienbar.

• Affordanz: Buttons sehen erhaben/klickbar aus, Links sind klar als solche erkennbar. Was klickbar aussieht, muss klickbar sein — und umgekehrt.
• Zielgröße mind. 24 × 24 px (AA, WCAG 2.5.8), 44 × 44 px als AAA-/Komfortwert — und genug Abstand zwischen den Zielen.
• Sofortiges Feedback: Cursor-Wechsel, Hover- und Active-Zustand bestätigen jede Aktion.
• Disabled erklären: Wenn ein Button deaktiviert ist, sollte erkennbar sein, warum — und was zu tun ist.

Bewegung soll kommunizieren, nicht dekorieren. Gute Animation lässt eine Oberfläche schneller wirken — schlechte lässt sie langsamer wirken.

Was professionelle Animation leistet

Sinnvolle Bewegung erfüllt vier Aufgaben — alles andere ist Zierde:

• Feedback geben: Ein Button, der auf den Druck reagiert, ein Loader nach dem Klick — das nimmt die Angst „Hat es funktioniert? Nochmal klicken?“.
• Orientierung schaffen: Wächst ein Dialog aus dem Button, den man geklickt hat, zeichnet das Gehirn eine Landkarte der Hierarchie. Bewegung sagt: wo bin ich, wo komme ich her.
• Blick lenken: Eine dezente Bewegung führt das Auge zum nächsten relevanten Element.
• Wartezeit verkürzen: Skeleton-Screens und Fortschrittsbalken senken die gefühlte Ladezeit, auch wenn die echte gleich bleibt.

Timing — der wichtigste Regler

Zu schnell verwirrt, zu langsam nervt. Bewährte Dauer je nach Größe der Bewegung:

Über ~500 ms wirkt fast alles träge. Nutze ease-out für eintretende Elemente (startet schnell, bremst sanft). Animiere nur transform und opacity — sie laufen auf der GPU mit 60 fps; width, top & Co. erzwingen teures Neu-Layout und ruckeln.

Professionell vs. Überanimation

Die typischen Fehler der Überanimation: alles bewegt sich, Endlos-Schleifen, Scroll-Hijacking und übertriebener Parallax, inkonsistente Dauern quer durchs Produkt — und das Schlimmste: Animationen, die blockieren und den Nutzer warten lassen, bevor er weiterklicken kann.

Scroll-gesteuerte Animationen — ohne JavaScript

Mit animation-timeline: scroll() bzw. view() lassen sich Effekte an die Scroll-Position koppeln — ein Lesefortschritts-Balken, sanftes Einblenden beim Erscheinen, dezenter Parallax — komplett in CSS, ohne Scroll-Listener in JavaScript. Das läuft performanter (im Compositor) und spart Code.

• Fortschritt, nicht Deko: am stärksten für Orientierung (Fortschrittsanzeige, Erscheinen von Inhalten) — nicht als Dauerbewegung.
• Endzustand als Standard: per @supports aufsetzen, damit ältere Browser den fertigen Inhalt sehen (progressive Aufwertung).
• Support (Aug. 2026): in Chrome/Edge und Safari verfügbar, in Firefox stabil noch hinter einem Flag (Interop-2026-Ziel) — also noch nicht voll „Baseline". Und weiterhin gilt prefers-reduced-motion (siehe unten).

Barrierefreiheit: prefers-reduced-motion

Manche Menschen bekommen von Bewegung Schwindel oder Übelkeit (vestibuläre Störungen). Respektiere darum immer die System­einstellung „Bewegung reduzieren“ und biete eine ruhige Alternative — oft reicht ein einfaches Ein-/Ausblenden statt aufwändiger Effekte. Dieser Guide tut genau das bereits.

• Unterbrechbar halten: Animationen dürfen die Oberfläche nie sperren.
• Auf echter Hardware testen: Was am Desktop flüssig ist, ruckelt mobil schnell. Ziel sind 60 fps.
• Konsistente Timings & Easing als Design-Token festhalten — zufällige Werte wirken unprofessionell.

Die Frage ist selten „Pop-up gegen eigene Seite", sondern welche von vier Einbau-Formen zum Formular passt. Ausschlaggebend sind zwei Dinge: wie lang das Formular ist und wie oft es auf der Seite vorkommt.

Ab wann in der Seite, ab wann als Pop-up? Die Feldgrenze

Kurze Formulare (Kontakt, Rückruf: etwa 3–5 Felder) passen problemlos direkt in die Seite — die Hürde ist minimal, ein Pop-up wäre übertrieben. Längere Formulare oder solche über mehrere Schritte profitieren vom konzentrierten, ablenkungsfreien Fokus eines Pop-ups. Aber Vorsicht: Jedes zusätzliche Feld kostet Abschlüsse. Bevor du wegen der Länge auf ein Pop-up ausweichst, prüfe zuerst, ob wirklich alle Felder nötig sind — oft bleibt „direkt in der Seite" dann doch die bessere Wahl.

Mehrere Störer mit dem gleichen Formular-Ziel

Führen mehrere Störer zum selben Formular, ist das keine Frage von richtig oder falsch, sondern eine Abwägung. Da ihr doppelte Felder technisch sauber löst, bleibt es eine reine Frage von Seitenlänge, Klick-Aufwand und Optik. Ein echtes Problem für Screenreader entsteht dabei nicht, solange die Felder sauber ausgezeichnet sind.

Erst die Definition: Pop-up-Müdigkeit beschreibt, dass Menschen mit der Zeit genervt auf Pop-ups reagieren — sie klicken sie reflexartig weg, ohne zu lesen, oder verlassen die Seite ganz. Schuld sind vor allem Pop-ups, die ungefragt erscheinen, den Inhalt verdecken oder immer wieder auftauchen. Der Frust überträgt sich dann leider auch auf gute, hilfreiche Pop-ups.

Nicht Pop-ups an sich ermüden also, sondern die ungebetenen. Drei Fragen entscheiden über gut oder schlecht: Wer löst es aus, wann — und wie oft?

Der Kernunterschied: selbst geöffnet oder aufgezwungen

Drei häufige Varianten im Check

Wie schlagen sich konkrete Beispiele auf der Skala zwischen „selbst geöffnet" und „aufgezwungen"? Hier drei typische Fälle mit ehrlicher Einschätzung — inklusive Nachteile:

Lohnt sich ein Verlassen-Pop-up (Exit-Intent)?

Gemeint ist ein Pop-up, das erscheint, wenn jemand die Seite gerade verlassen will. Ja — es lohnt sich, aber als letzte Chance, nicht als Dauerbeschallung. Auswertungen von Anbietern zeigen im Schnitt etwa 2–5 % Abschlüsse (Wisepops ~3,9 % aus über 1 Mrd. Einblendungen; Popupsmart 2025 ~3,5 % aus über 10.000 Kampagnen). Deutlich höher liegt es beim Warenkorb-Abbruch — also wenn jemand Ware im Warenkorb hat, aber gehen will: Hier meldet eine Anbieter-Auswertung rund 17 % Abschlüsse (Envive/ivyforms), weil die Kaufabsicht schon da ist. Zur Einordnung: Rund 7 von 10 Warenkörben werden überhaupt abgebrochen (Baymard 2025). Entscheidend ist ein starkes, zur Seite passendes Angebot — ein allgemeiner Newsletter-Aufruf funktioniert schlechter. So baust du eines richtig:

• Nur einmal pro Besuch zeigen (das Pop-up merkt sich per Cookie, dass du es gesehen hast) — die wichtigste Regel überhaupt.
• Nicht sofort beim Ankommen: erst, wenn jemand länger da war oder Anzeichen zeigt, die Seite zu verlassen.
• Bestes Angebot, klar formuliert: „Sichere dir deine 15 %" schlägt „Newsletter abonnieren".
• Klein, fürs Smartphone gemacht, leicht zu schließen — großer Schließen-Button im Daumenbereich.
• Nicht stapeln: nicht Begrüßung + Scroll + Verlassen in einem Besuch. Sonst nur noch „wegklicken, wegklicken, weg".

Das „Zurück-Button-Problem" — ein Umsetzungsfehler, kein Naturgesetz

Die klare Antwort: Das ist ein Fehler in der Umsetzung, kein akzeptiertes Verhalten. Auf dem Smartphone gibt es keinen Mauszeiger, deshalb erkennt ein Verlassen-Pop-up die Absicht an Ersatz-Signalen — unter anderem am Zurück-Button. Dass es gefühlt tausendmal aufploppt, hat zwei konkrete Ursachen:

• Es fehlt die Begrenzung auf einmal pro Besuch: Ein sauber gebautes Pop-up merkt sich per Cookie, dass du es gesehen oder geschlossen hast, und zeigt es nur einmal. Taucht es bei jedem Zurück neu auf, fehlt genau dieser Cookie.
• Der Zurück-Button wird missbraucht: Manche Skripte fangen jeden Zurück-Klick ab und verändern dafür den Browser-Verlauf — statt nur dann auszulösen, wenn Zurück die Seite wirklich verlässt. Richtig gebaut erscheint es nur beim tatsächlichen Verlassen, und nur einmal.

Das Design dieser Vorlage erfüllt bereits die strenge AAA-Stufe. Damit das so bleibt, kommt es auf die laufende Pflege der Inhalte an — denn dort schleichen sich Barrieren ein, nicht im fixierten Layout.

Rechtlicher Rahmen: der European Accessibility Act (EAA)

Barrierefreiheit ist seit dem 28. Juni 2025 für viele Anbieter Pflicht, nicht Kür. Der European Accessibility Act (EU-Richtlinie 2019/882) verlangt von Unternehmen, die Verbrauchern in der EU digitale Produkte und Dienste anbieten, ein Mindestniveau an Barrierefreiheit — betroffen sind u. a. Online-Shops, Banking, Ticketing, E-Books und Telekommunikation. Er gilt auch für Anbieter außerhalb der EU, sobald sie den EU-Markt bedienen. 2026 ist das erste volle Jahr, in dem die Mitgliedstaaten aktiv kontrollieren; erste Verfahren laufen bereits.

WCAG-Stand: 2.2 gilt, 3.0 ist im Entwurf

Aktueller, offiziell abgeschlossener Standard ist WCAG 2.2 (seit Oktober 2023) — er umfasst 2.1 vollständig und ergänzt sie. WCAG 3.0 ist ein grundlegend neuer Ansatz (ergebnis- statt kriterienbasiert, mit Punktesystem), liegt aber weiter nur als Arbeitsentwurf vor (zuletzt aktualisiert März 2026); eine verbindliche Empfehlung wird nicht vor Ende der 2020er erwartet. Fazit: Heute nach 2.1/2.2 arbeiten, 3.0 beobachten — noch nichts umbauen.

Neu in WCAG 2.2 — die zusätzlichen Kriterien

WCAG 2.2 ergänzt neun Erfolgskriterien (das alte 4.1.1 „Parsing" entfällt). Für die AA-Pflicht gelten sechs davon; da unser Ziel AAA ist, nehmen wir die drei zugehörigen Verschärfungen gleich mit. Beim Pflegen der Inhalte darauf achten:

• Fokus nicht verdeckt (2.4.11 AA / 2.4.12 AAA): Das aktuell fokussierte Element darf nicht von Sticky-Headern, Cookie-Bannern oder Chat-Widgets überdeckt werden. Für AAA: gar nicht verdeckt, auch nicht teilweise.
• Fokus-Darstellung (2.4.13 AAA): Der Fokus-Ring muss kräftig und kontrastreich sein (umlaufend mind. 2 px, Kontrast ≥ 3 : 1 zum Umfeld). Der Ring dieser Vorlage erfüllt das — nicht entfernen.
• Zielgröße (2.5.8 AA): Klick-/Tippziele mind. 24 × 24 px (Innenabstand zählt mit) oder mit genügend Abstand zu Nachbarzielen. Unser Komfort-/AAA-Wert bleibt 44 × 44 px (2.5.5).
• Ziehbewegungen (2.5.7 AA): Alles per Ziehen Bedienbare (Slider, Sortieren, Karten schieben) braucht eine Einzeltipp-Alternative — z. B. +/–-Buttons oder Auswahllisten.
• Konsistente Hilfe (3.2.6 A): Hilfe-Elemente (Kontakt, FAQ, Chat) auf jeder Seite an derselben Stelle und in gleicher Reihenfolge anbieten.
• Redundante Eingaben (3.3.7 A): Im selben Vorgang nichts zweimal abfragen — Bekanntes vorbelegen oder zur Auswahl anbieten (z. B. „Lieferadresse = Rechnungsadresse").
• Barrierefreie Authentifizierung (3.3.8 AA / 3.3.9 AAA): Kein kognitiver Test als einziger Login-Weg — Einfügen aus Passwort-Managern erlauben, keine Merk-/Rätselaufgaben erzwingen. Für AAA gilt das ohne die Objekt-Erkennungs-Ausnahme.

Mehrere Links hintereinander (Listen, Navigation, Footer)

Der häufigste Pflegefehler. Screenreader-Nutzer lassen sich oft nur die Liste aller Links vorlesen. Heißen dann fünf Links „Mehr erfahren“, ist diese Liste wertlos. Jeder Linktext muss aus sich heraus verständlich sein (WCAG 2.4.9, AAA) — und aufeinanderfolgende Links brauchen eine klare Trennung.

Worauf bei jeder Inhaltspflege zu achten ist

• Überschriften-Hierarchie einhalten: H1 → H2 → H3 ohne Ebenen zu überspringen. Niemals fett formatierter Text als Ersatz für eine echte Überschrift.
• Jedes neue Bild bekommt einen Alt-Text (beschreibend, ohne „Bild von…“); rein dekorative Bilder erhalten ein leeres alt="".
• Echte Listen & Tabellen verwenden (Listen-/Tabellen-Funktion des Editors), nicht mit Bindestrichen oder Leerzeichen „nachbauen“.
• Verständliche Sprache (WCAG 3.1.5, AAA): kurze Sätze, Fachbegriffe erklären, Abkürzungen beim ersten Auftreten ausschreiben.
• Linkziel ankündigen: Öffnet ein Link ein PDF oder neues Fenster, im Text erwähnen („… (PDF)“).
• Videos & Audio brauchen Untertitel bzw. ein Transkript.
• Information nie allein über Farbe transportieren — immer ein zweites Signal (Text, Symbol, Position).

Alle Kennzahlen auf einen Blick — zum Ausdrucken und Danebenpinnen.

Dieser Leitfaden stützt sich auf anerkannte Standards, Fachliteratur und aktuelle Forschung. Es folgen die verwendeten Quellen, die Methodik und der Prüfvermerk.

Standards & Richtlinien

• W3C — Web Content Accessibility Guidelines (WCAG) 2.1 & 2.2, u. a. Erfolgskriterien zu Kontrast (1.4.3/1.4.6), Linkzweck (2.4.9, AAA), Abschnittsüberschriften (2.4.10, AAA), verständlicher Sprache (3.1.5, AAA) und prefers-reduced-motion (2.3.3); neu in 2.2: Fokus nicht verdeckt (2.4.11 AA / 2.4.12 AAA), Fokus-Darstellung (2.4.13 AAA), Ziehbewegungen (2.5.7 AA), Zielgröße 24 × 24 px (2.5.8 AA), konsistente Hilfe (3.2.6 A), redundante Eingaben (3.3.7 A), barrierefreie Authentifizierung (3.3.8 AA / 3.3.9 AAA). w3.org/WAI
• U.S. Web Design System (USWDS) — Design Tokens & Typography Guidance. designsystem.digital.gov
• Google — Material Design 3: Richtlinien zu Motion (Dauer/Easing) und Typografie. m3.material.io

Recht & Barrierefreiheit (Pflicht)

• Europäische Union — European Accessibility Act (Richtlinie (EU) 2019/882), anwendbar seit 28. Juni 2025; Aufsicht 2026 aktiv (u. a. NL/ACM). commission.europa.eu
• EN 301 549 — v3.2.1 verweist auf WCAG 2.1 AA; die für 2026 erwartete v4.1.1 hebt den Maßstab auf WCAG 2.2 AA (sechs zusätzliche Kriterien).
• W3C — WCAG 3.0 Working Draft (Stand März 2026): ergebnisbasierter Ansatz, weiterhin im Entwurf; verbindliche Empfehlung frühestens Ende der 2020er. w3.org/TR/wcag-3.0

Typografie & Lesbarkeit

• Bringhurst, R. — The Elements of Typographic Style. Hartley & Marks (Zeilenlänge 45–75 Zeichen, Maßverhältnisse).
• Nielsen Norman Group (NN/g) — Forschung zu Zeilenlänge, Lesbarkeit sowie F-/Z-Lesemustern. nngroup.com
• Aktuelle Studien zu Schriftgröße, x-Höhe und Lesegeschwindigkeit (2024–2025).

Moderne CSS-Techniken

• MDN Web Docs — Variable fonts guide & font-optical-sizing; CSS container queries und die Einheit cqi. developer.mozilla.org
• Can I use, MDN & WebKit — text-wrap: balance und text-wrap: pretty (mit Safari 26 in allen großen Browsern); text-box-trim (Chrome/Edge 133+, Safari 18.2+); moderne Farbfunktionen oklch(), color-mix(), contrast-color(), light-dark(); scroll-gesteuerte Animationen (animation-timeline, Interop-2026-Ziel). Stand Aug. 2026. caniuse.com · developer.mozilla.org · webkit.org

Farbe, Conversion & Verkaufspsychologie

• Baymard Institute — UX- und E-Commerce-Forschung zu Conversion und Kaufverhalten. baymard.com
• Branchenanalysen zur Conversion-Optimierung (2025–2026). Conversion-Kennzahlen sind als Orientierung zu verstehen (siehe Hinweis unten).
• Benway, J. P. & Lane, D. M. (1998) — Banner Blindness: Web Searchers Often Miss „Obvious" Links. Rice University; bestätigt durch Nielsen Norman Group, Eye-Tracking-Studien 1997–2024. nngroup.com

Emoji & Zielgruppen (Peer-Review)

• Duffett, R. G. & Maraule, M. (2024) — Customer engagement and intention to purchase attitudes of generation Z consumers toward emojis in digital marketing communications. Young Consumers, 25(5), 607–624.
• (2025) — Modeling emoji online marketing on websites among young consumers: the moderation effect of age. Future Business Journal (Springer).
• eMarketer (2026) — Analysen zum Marketing für die Generation Z.

Pop-ups & Formulare

• Google Search Central — Interstitials and dialogs / Avoid intrusive interstitials. Vom Nutzer per Klick geöffnete und rechtlich nötige Pop-ups sind ausgenommen; keine Umleitung auf separate Seiten; Einblendungen klein halten (~15–25 % des Bildschirms). Stand Dez. 2025. developers.google.com/search
• J. Mueller (Google) — Bestätigung, dass per Klick geöffnete Pop-ups und Verlassen-Pop-ups (Exit-Intent) nicht abgewertet werden.
• Wisepops — Popup Benchmark Report (über 1 Mrd. Einblendungen): Verlassen-Pop-ups ~3,9 %, per Klick geöffnete deutlich höher.
• Popupsmart — Popup Benchmark Report 2025 (über 10.000 Kampagnen): Ø-Abschlüsse ~3,5 %.
• Envive / ivyforms — Verlassen-Pop-ups beim Warenkorb-Abbruch ~17 % Abschlüsse; Baymard Institute (2025): Warenkorb-Abbruchrate ~70 %.
• Zum Rendering: Google rendert JavaScript in einem Zeitfenster von wenigen Sekunden (Web Rendering Service) und kann ein per Skript eingeblendetes Pop-up als (Haupt-)Inhalt werten — zeitverzögerte Pop-ups werden dadurch nicht als „verzögert" erkannt (u. a. J. Mueller / SEO-Fachanalysen). Ergänzt durch eigene Auswertungen der brain at work GmbH.

Animation & Motion

• W3C WCAG 2.2 — 2.3.3 Animation from Interactions (AAA) & prefers-reduced-motion.
• Nielsen Norman Group & Material Design — Richtwerte zu Animationsdauer (≈ 120–500 ms), 60 fps und Micro-Interactions.

Methodik

✓ Geprüft & freigegeben

Dieser Design Guide wurde inhaltlich geprüft und für die Weitergabe freigegeben durch die brain at work GmbH. Für Rückfragen, individuelle Anpassungen an eure Marke oder Schulungen zu barrierefreiem Design stehen wir gern zur Verfügung.