{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "zoom-und-textabstand-robust", "name": "Zoom- und textabstandfestes Layout", "name_en": "Layout robust to 200 % zoom, 320 px reflow and text spacing", "kurz": "Eine Manufaktur-Seite mit Riesen-Wortmarke und Schrift-Hero, die erhöhte Textabstände und 320 px Breite ohne Abschneiden hält; daneben zeigt eine anfällige Fassung, was sonst bricht.", "kategorie": "Zugang & Robustheit", "kategorie_slug": "zugang", "kategorie_nr": 17, "bau_chat": "E", "prioritaet": "E", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "website_belege": 0, "stimmung": [ "ruhig", "präzise" ], "stimmung_roh": [ "robust", "präzise", "ruhig" ], "technik": [ "css", "container-queries", "clamp", "svg", "vanilla-js" ], "technik_gruppen": [ "css", "js", "canvas" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Ein Layout mit Riesen-Wortmarke und großem Schrift-Hero, das 200 % Zoom, 320 CSS-Pixel Breite und erhöhte Textabstände aushält, ohne dass Text abgeschnitten wird, sich überlappt oder waagerecht gescrollt werden muss. Die Wortmarke ist ein SVG-Logo, das sich an die Breite anpasst. Der Hero-Titel ist echter Text mit clamp(), dessen Höchstwert höchstens das 2,5-Fache des Mindestwerts beträgt. Kein Element hat eine feste Höhe für Text, nichts mit Text hat overflow: hidden, Raster brechen über Container-Abfragen um, lange deutsche Wörter trennen.", "warum_es_wirkt": "Große Schrift-Heros sind die anfälligste Stelle einer Award-Seite: vw-Schrift wächst beim Zoomen nicht mit, feste Höhen schneiden Text ab, sobald jemand Zeilen- oder Buchstabenabstand erhöht. Wer das von Anfang an einplant, behält die Wirkung und schließt niemanden aus, der vergrößert oder eigene Lesestile nutzt.", "wann_einsetzen": "Bei jedem Layout mit sehr großer Schrift, Wortmarken, Kacheln mit Text, Preis- und Datentabellen, festen Kopfzeilen und Karten gleicher Höhe. Besonders für Rezepte mit Schrift-Heros (Luxus, Kultur, Kreativ) und für ältere Zielgruppen.", "wann_nicht": "Nicht als Ausrede für kleine, vorsichtige Typografie: die Wirkung bleibt, nur die Technik ändert sich. Echte zweidimensionale Inhalte wie Datentabellen, Karten oder Diagramme dürfen laut WCAG 1.4.10 waagerecht scrollen, der Rest der Seite nicht.", "varianten": [ "Wortmarke als SVG mit viewBox (Logo, passt sich jeder Breite an)", "Hero-Titel mit clamp(rem, rem + vw, rem), Verhältnis Höchst- zu Mindestwert höchstens 2,5", "Technische Daten als Definitionsliste, die unter einer Container-Breite einspaltig wird", "Fester Kopf nur, wenn genug Höhe da ist (@media (min-height: …))", "Prüfschalter „Textabstände erhöhen“ als Lesezeichen-Skript oder Entwicklungs-Klasse" ], "umsetzung": "Wortmarke als SVG-Logo mit viewBox und textLength (oder als Pfad); Logos sind von 1.4.5 ausgenommen, Titel und Fließtext bleiben echter Text. Titel mit clamp() und rem-Anteil, Verhältnis Höchst- zu Mindestwert höchstens 2,5; vw oder cqi nie allein. Container-Abfragen statt nur Medienabfragen: dann bricht dasselbe Layout in schmalen Spalten und bei 320 px gleich um, und die 320-px-Prüfung lässt sich in einem Rahmen zeigen. Keine festen Höhen und kein overflow: hidden für Text, stattdessen min-block-size und padding; white-space: nowrap höchstens für ein kurzes Wort. Technische Daten als dl, unter 30rem einspaltig. Lange Wörter mit overflow-wrap: anywhere und hyphens: auto. Fester Kopf nur bei @media (min-height: 32rem). Prüfen mit Browser-Zoom 200 % und 400 % bei 1280 px, Fensterbreite 320 px und dem Textabstand-Lesezeichen (Werte siehe werte.textabstand_pruefung).", "mobil": "Das Telefon ist der Normalfall dieses Musters: 320 px entsprechen einem kleinen Telefon oder 400 % Zoom am Laptop. Container-Abfragen sorgen dafür, dass dasselbe Layout in schmalen Spalten genauso umbricht.", "reduzierte_bewegung": "Nicht betroffen. Umschalten der Prüfzustände ohne Übergang.", "barrierefreiheit": "1.4.4 Textgröße ändern (AA): Text lässt sich auf 200 % vergrößern; fluide Größen mit rem-Anteil und Verhältnis höchstens 2,5. 1.4.10 Umbruch (AA): bei 320 CSS-Pixeln kein waagerechtes Scrollen außer bei echten 2D-Inhalten. 1.4.12 Textabstand (AA): Zeilenhöhe 1,5, Absatzabstand 2, Buchstabenabstand 0,12, Wortabstand 0,16 ohne Abschneiden oder Überlappen. 1.4.5 Bilder von Text (AA): Logos und Wortmarken sind ausgenommen, Fließtext und Titel bleiben echter Text. 2.4.11 Fokus nicht verdeckt (AA): fester Kopf nur bei genug Höhe. 1.3.1 Info und Beziehungen (A): technische Daten als dl, nicht als gestylte divs." }, "messwerte": { "easing": "cubic-bezier(0.1, 0.6, 0.4, 1)", "dauer_ms": "250", "stagger_ms": "", "distanz": "", "sonstiges": "Kurve und Dauer aus dem Rezept luxus-manufaktur-stille (NOMOS --trans-func-default, --trans-time-sm); Prüfwerte aus WCAG 1.4.10 und 1.4.12, Faktor 2,5 aus Smashing Magazine", "herkunft": "eigene Festlegung", "quelle": "Rezept luxus-manufaktur-stille (bewegung)" }, "kurve": { "bezier": [ 0.1, 0.6, 0.4, 1.0 ], "css": "cubic-bezier(0.1, 0.6, 0.4, 1)", "name": "eigene Kurve", "dauer_ms": 250 }, "gesehen_bei": [ { "seite": "W3C: Understanding SC 1.4.12 Text Spacing", "url": "https://www.w3.org/WAI/WCAG22/Understanding/text-spacing", "auszeichnung": "", "beobachtung": "Werte: Zeilenhöhe mindestens 1,5-fach, Absatzabstand 2-fach, Buchstabenabstand 0,12-fach, Wortabstand 0,16-fach der Schriftgröße, ohne Verlust von Inhalt oder Funktion. Abgeschnittener und überlappender Text sind Fehler; Auslassungspunkte nur mit Weg zum vollen Text.", "art": "artikel" }, { "seite": "W3C: Understanding SC 1.4.10 Reflow", "url": "https://www.w3.org/WAI/WCAG22/Understanding/reflow", "auszeichnung": "", "beobachtung": "Senkrecht scrollende Inhalte müssen bei 320 CSS-Pixeln Breite ohne zweidimensionales Scrollen funktionieren; das entspricht 1280 px bei 400 % Zoom. Ausnahmen nur für Teile, die zweidimensionales Layout brauchen (Datentabellen, Karten, Diagramme).", "art": "artikel" }, { "seite": "Smashing Magazine: Addressing Accessibility Concerns With Using Fluid Type (Maxwell Barvian)", "url": "https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/", "auszeichnung": "", "beobachtung": "Fluide Schrift mit clamp() besteht WCAG 1.4.4 in modernen Browsern, wenn der Höchstwert höchstens das 2,5-Fache des Mindestwerts ist.", "art": "artikel" }, { "seite": "W3C Technique F110 (Focus Not Obscured)", "url": "https://www.w3.org/WAI/WCAG22/Techniques/failures/F110.html", "auszeichnung": "", "beobachtung": "Feste Kopf- oder Fußzeilen, die so hoch sind, dass sie das fokussierte Element ganz verdecken, verletzen 2.4.11. Betrifft vor allem gezoomte Ansichten.", "art": "artikel" } ], "tutorials": [ { "titel": "W3C: Understanding SC 1.4.12 Text Spacing", "url": "https://www.w3.org/WAI/WCAG22/Understanding/text-spacing" }, { "titel": "W3C: Understanding SC 1.4.10 Reflow", "url": "https://www.w3.org/WAI/WCAG22/Understanding/reflow" }, { "titel": "Smashing Magazine: Addressing Accessibility Concerns With Using Fluid Type", "url": "https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/" } ], "kombinierbar_mit": [ "schrift-hero-viewportbreit", "fluide-typo-clamp-cqi", "footer-cta-riesen-wortmarke", "hide-on-scroll-header", "zahlen-fakten-section", "versal-kondensiert-fit-to-width" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/", "meta": "https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/meta.json", "demo": "https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/demo" }, "herkunft": { "quelldateien": [ "DEF-Recherche 01.11.2026" ], "pruefnotizen": [ "Quellen am 01.11.2026 per WebFetch geprüft (W3C Understanding 1.4.10 und 1.4.12, F110, Smashing Magazine).", "Kein Produktionsbeleg einer Award-Seite; Belege sind Normtext und Fachartikel.", "Die 320-px-Simulation der Demo nutzt Container-Abfragen; echter Zoom bleibt im Browser zu prüfen." ] }, "bau": { "status": "fertig", "kurz": "Eine Manufaktur-Seite mit Riesen-Wortmarke und Schrift-Hero, die erhöhte Textabstände und 320 px Breite ohne Abschneiden hält; daneben zeigt eine anfällige Fassung, was sonst bricht.", "demo": true, "abhaengigkeiten": [], "werte": { "titel": "font-size: clamp(2.5rem, 1.6rem + 4.5cqi, 5.5rem); line-height 1.05; Verhältnis Höchst- zu Mindestwert 2,2 (Regel: höchstens 2,5)", "unterzeilen": "h2 clamp(2rem, 1.4rem + 2.6cqi, 3.5rem) (1,75), Fließtext 0.9375rem / 1.47", "wortmarke": ": passt bei jeder Breite, Buchstabenabstand wird ausgeglichen", "umbruch": "container: seite / inline-size; @container (inline-size < 62rem) Karten einspaltig, min-block-size frei; (< 48rem) Hero und Produkt einspaltig; (< 30rem) Daten-dl einspaltig, Kopf-Zeichen eigene Zeile", "lange_woerter": "overflow-wrap: anywhere; hyphens: auto (lang=\"de\")", "hoehen": "keine height für Text; Karten min-block-size: 12rem; Knöpfe min-height: 48px + padding 12px 22px; Links min-height: 44px", "textabstand_pruefung": "* { line-height: 1.5 !important; letter-spacing: .12em !important; word-spacing: .16em !important } p { margin-bottom: 2em !important }", "schmal_pruefung": "Rahmen 320 px Inhalt (+ 2 × 8 px Gerätekante), Bildlaufleiste ausgeblendet", "fehlererkennung": "Element mit Text und overflow hidden/clip, dessen scrollHeight oder scrollWidth die Client-Größe um mehr als 2 px übersteigt; Querscrollen, wenn scrollWidth > clientWidth + 1", "anfaellige_fassung": "Wortmarke als Text 21cqi nowrap; h1 9cqi, height 2.1em, overflow hidden; Knopf height 48px, nowrap, overflow hidden; Karten height 13rem, overflow hidden; dl 9rem 12rem fest, dd nowrap; Navigation nowrap", "easing": "cubic-bezier(0.1, 0.6, 0.4, 1) (NOMOS, Rezept luxus-manufaktur-stille)", "dauer_ms": 250, "farben": "Anthrazit #23282f, Weiß, Fläche #f4f4f2, Meta-Text #5f656d (statt #8b9097, das auf Weiß nur 3,3 : 1 erreicht), Messing #a88a5a nur Linie und Fokus", "schriften": "Bodoni Moda opsz (Wortmarke, Titel), Instrument Sans 600 Versal +0.08em (Labels), Instrument Sans (Text)" }, "ausloeser": "klick", "touch": "Auf dem Telefon ist das Fenster selbst schmal: die Seite bricht über dieselben Container-Abfragen um. Die Simulation ist dort unnötig, der Vergleich stapelt beide Fassungen untereinander.", "reduziert": "Kein Unterschied in der Prüfung; Hover- und Schalterübergänge entfallen.", "korrekturen": { "umsetzung": "Wortmarke als SVG-Logo mit viewBox und textLength (oder als Pfad); Logos sind von 1.4.5 ausgenommen, Titel und Fließtext bleiben echter Text. Titel mit clamp() und rem-Anteil, Verhältnis Höchst- zu Mindestwert höchstens 2,5; vw oder cqi nie allein. Container-Abfragen statt nur Medienabfragen: dann bricht dasselbe Layout in schmalen Spalten und bei 320 px gleich um, und die 320-px-Prüfung lässt sich in einem Rahmen zeigen. Keine festen Höhen und kein overflow: hidden für Text, stattdessen min-block-size und padding; white-space: nowrap höchstens für ein kurzes Wort. Technische Daten als dl, unter 30rem einspaltig. Lange Wörter mit overflow-wrap: anywhere und hyphens: auto. Fester Kopf nur bei @media (min-height: 32rem). Prüfen mit Browser-Zoom 200 % und 400 % bei 1280 px, Fensterbreite 320 px und dem Textabstand-Lesezeichen (Werte siehe werte.textabstand_pruefung)." }, "geprueft": "02.11.2026", "notiz": "Welt: Rezept luxus-manufaktur-stille, erfundene Uhrenmanufaktur Vernik aus Villach mit Modell Dobratsch. Eigene SVG-Uhr (10:10, gebläute Zeiger, kleine Sekunde) und SVG-Wortmarke in Bodoni Moda. Die Vorführung erhöht die Textabstände, schaltet auf 320 px und stellt die anfällige Fassung als inerten, aria-hidden Klon daneben: dort markiert die Prüfung abgeschnittene Stellen rot schraffiert und meldet Querscrollen, die robuste Fassung bleibt bei null. Echter Browser-Zoom lässt sich in einer Demo nicht auslösen; 320 px entsprechen 400 % Zoom bei 1280 px und sind damit der strengere Fall. Quellen: w3.org (Understanding 1.4.10, 1.4.12, F110), smashingmagazine.com. AD-Review 02.11.2026: Note 4. Nachgebessert: Pult war 300 × 330 px groß und lag über dem Hero-Text; jetzt eine schmale Leiste in der klebenden Zustandszeile (drei Schalter, Kriterien im title), unter 1000 px eigene Zeile darüber, auf dem Telefon unten." } }