{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "lesesatz-text-wrap",
 "name": "Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty",
 "name_en": "Readable measure with text-wrap balance/pretty",
 "kurz": "Lauftext auf 64ch, 17–19px und 1.6 Zeilenhöhe begrenzt; Headlines mit text-wrap: balance, Absätze mit text-wrap: pretty. Die Demo misst live mit.",
 "kategorie": "Typo-Techniken",
 "kategorie_slug": "typo-techniken",
 "kategorie_nr": 15,
 "bau_chat": "C1",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 6,
 "stimmung": [
  "ruhig",
  "editorial"
 ],
 "stimmung_roh": [
  "ruhig",
  "lesbar"
 ],
 "technik": [
  "css"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Lesesatz für lange Texte: Der Lauftext läuft höchstens 55–70ch breit, in 17–19px mit einer Zeilenhöhe von 1.5–1.7. Headlines und Bildunterschriften bekommen text-wrap: balance, Absätze text-wrap: pretty.",
  "warum_es_wirkt": "Bei 55–70 Zeichen findet das Auge den Anfang der nächsten Zeile mühelos. Längere Zeilen ermüden, kürzere zerhacken den Satz. balance verteilt die Wörter einer Headline auf gleich lange Zeilen, statt ein einzelnes Wort in die letzte Zeile zu schieben. pretty sorgt in Absätzen dafür, dass die letzte Zeile nicht aus einem einzelnen kurzen Wort besteht. Der Text wirkt ruhig und gesetzt, ohne dass jemand von Hand umbrechen muss.",
  "wann_einsetzen": "Überall, wo gelesen wird: Artikel, Journal, Fallstudien, Produktbeschreibungen, Über-uns-Seiten. balance für kurze Blöcke bis etwa 4–6 Zeilen wie Headlines, Vorspann, Bildunterschriften und Teaser. pretty für alle Absätze. Gehört in jeden Reset bzw. jedes Basis-Stylesheet.",
  "wann_nicht": "Nicht für Code, Tabellen, Formulare oder Daten, die exakt so umbrechen sollen. balance nicht auf lange Absätze, dort ist es wirkungslos und kostet Rechenzeit. Kein starres Maß für Bildschirmtexte wie Navigation oder Labels.",
  "varianten": [
   "Roh: Text läuft über die volle Spaltenbreite, normaler Umbruch",
   "Nur Maß: max-width 64ch, aber normaler Umbruch (text-wrap: wrap)",
   "Lesesatz: max-width 64ch plus balance für Headline, Vorspann und Bildunterschrift, pretty für Absätze"
  ],
  "umsetzung": "Lauftext-Container mit max-width in ch (55–70ch, hier 64ch), font-size per clamp() zwischen 17 und 19px, line-height 1.5–1.7 (hier 1.6). Basisregeln: h1, h2, h3, figcaption { text-wrap: balance } und p { text-wrap: pretty }. Headlines bekommen eine eigene, schmalere max-width in ch. Browser: balance ab Chrome 114, Safari 17.5, Firefox 124. pretty ab Chrome 117 und Safari 26; Firefox bricht normal um, ohne Schaden.",
  "mobil": "Auf dem Telefon ist die Spalte schmaler als das Maß, dann bestimmt der Bildschirm die Zeilenlänge (rund 35–45 Zeichen). balance und pretty wirken hier am stärksten, weil kurze Zeilen schnell einzelne Wörter abhängen. Für lange deutsche Komposita hyphens: auto mit lang=\"de\" setzen.",
  "reduzierte_bewegung": "Nicht relevant, das Muster hat keine Bewegung.",
  "barrierefreiheit": "Ein begrenztes Maß und großzügige Zeilenhöhe helfen allen Lesenden, besonders bei Leseschwäche. Maß in ch bzw. rem angeben, damit es mit der Schriftvergrößerung mitwächst. text-wrap ändert nur den Umbruch, nicht den Text: Screenreader und Kopieren bleiben unberührt. Keine manuellen <br> für den Umbruch."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "max-width 55–70ch; font-size 17–19px; line-height 1.5–1.7 (Clagnut 1.5em; Stripe-Beschreibungen max-width 608px, Hero 36ch)",
  "sonstiges": "Produktionsmuster: Headlines/Captions text-wrap: balance, Absätze text-wrap: pretty. Browser (MDN BCD 31.10.2026): balance Chrome 130 (Kurzform ab 114), Safari 17.5, Firefox 124; pretty Chrome 130 (Kurzform ab 117), Safari 26, Firefox nicht – fällt dort folgenlos auf normalen Umbruch zurück",
  "herkunft": "beobachtet",
  "quelle": "https://clagnut.com/css/all.css; https://www.joshwcomeau.com/_next/static/css/5f479326fc7a6aa8.css"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Clagnut (Richard Rutter)",
   "url": "https://clagnut.com/",
   "auszeichnung": "",
   "beobachtung": "body { text-wrap: pretty; font-optical-sizing: auto; line-height: 1.5em } und h1, figcaption, caption { text-wrap: balance } (css/all.css).",
   "art": "website"
  },
  {
   "seite": "Josh W. Comeau",
   "url": "https://www.joshwcomeau.com/",
   "auszeichnung": "",
   "beobachtung": "Reset: h2–h6, p { text-wrap: pretty } und h1 { text-wrap: balance } (_next/static/css/5f479326fc7a6aa8.css).",
   "art": "website"
  },
  {
   "seite": "Linear",
   "url": "https://linear.app/",
   "auszeichnung": "",
   "beobachtung": "Titelstile mit text-wrap: balance bzw. pretty, auf ≤1280px teils text-wrap: initial; Benefit-Texte balance mit max-width 368px (Inline-CSS, static.linear.app/…/BlGFcVAC.css).",
   "art": "website"
  },
  {
   "seite": "Stripe",
   "url": "https://stripe.com/",
   "auszeichnung": "",
   "beobachtung": "Section-Titel und -Beschreibungen durchgängig text-wrap: pretty mit max-width 504–712px bzw. 608px für Beschreibungen; Hero-Titel max-width 36ch (b.stripecdn.com/…/e4746273d30fe790.css, a86126a5a6c78d53.css).",
   "art": "website"
  },
  {
   "seite": "CSS Wizardry",
   "url": "https://www.csswizardry.com/",
   "auszeichnung": "",
   "beobachtung": "h1–h6 { text-wrap: balance }, p { text-wrap: pretty } (Inline-CSS).",
   "art": "website"
  },
  {
   "seite": "Raycast",
   "url": "https://www.raycast.com/",
   "auszeichnung": "",
   "beobachtung": "Sektionstitel und -beschreibungen text-wrap: balance, Fließtexte in Kacheln text-wrap: pretty mit max-width 450–500px (CSS-Chunks 1kl3ivnf311rq.css, 18h-121dvt2r8.css).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN – text-wrap-style",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap-style"
  },
  {
   "titel": "Clagnut – Introducing TODS, a typographic and OpenType default stylesheet",
   "url": "https://clagnut.com/blog/2433/"
  }
 ],
 "kombinierbar_mit": [
  "editorial-magazin-layout"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/",
  "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriften.json",
   "patch-luecken-b.json"
  ],
  "pruefnotizen": [
   "patch-luecken-b.json: Jetzt mit 6 Produktionsbelegen; text-wrap ist 2026 Standard in Resets und Design-Systemen. Auftrag ‚text-wrap balance/pretty als eigener Eintrag‘ durch diesen bestehenden Eintrag abgedeckt (Dublette vermieden). warum_es_wirkt/wann_einsetzen/wann_nicht sind noch leer – Vorschlag: balance nur für ≤ 4–6 Zeilen (Headlines, Captions), pretty für Absätze (verhindert Hurenkinder), nicht für Code/Tabellen."
  ],
  "prioritaet_hinweis": "31.10.2026: B → A laut patch-luecken-b.json (Jetzt mit 6 Produktionsbelegen; text-wrap ist 2026 Standard in Resets und Design-Systemen. Auftrag ‚text-wrap balance/pretty als eigener Eintrag‘ durch diesen bestehenden Eintrag abgedeckt (Dublette v)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Lauftext auf 64ch, 17–19px und 1.6 Zeilenhöhe begrenzt; Headlines mit text-wrap: balance, Absätze mit text-wrap: pretty. Die Demo misst live mit.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "mass": "max-width: 64ch (Lauftext und Lineal)",
   "schriftgroesse": "clamp(17px, 16px + .25vw, 19px)",
   "zeilenhoehe": "1.6",
   "text_wrap_kopf": "h1, Vorspann, figcaption: text-wrap: balance",
   "text_wrap_absatz": "p: text-wrap: pretty",
   "max_breite_h1": "18ch (Schrift clamp(42px, 5.4vw, 84px), line-height 1)",
   "max_breite_vorspann": "40ch (Schrift clamp(19px, 1.55vw, 23px), line-height 1.4)",
   "max_breite_bildunterschrift": "46ch (14px / 1.45)",
   "absatz_einzug": "1.4em ab dem zweiten Absatz",
   "silbentrennung": "hyphens: auto ab max-width 640px (lang=\"de\")",
   "schriften": "Lauftext Source Serif 4 400, Headline Instrument Serif 400 + Italic, Vorspann Instrument Sans, Labels Geist Mono 11px versal 0.14em",
   "uebergang_mass_demo": "max-width 1200ms cubic-bezier(0.16, 1, 0.3, 1), nur zum Zeigen zwischen den Satzarten",
   "ui": "150ms cubic-bezier(0.16, 1, 0.3, 1)",
   "schwelle_kurze_schlusszeile": "letzte Zeile endet vor 20 % der Blockbreite",
   "zielbereich_zeichen": "55–75 Zeichen je Zeile, bei schmalem Bildschirm ab 32",
   "vorfuehrung": "Lesesatz 3800ms → Roh 2600ms → Nur Maß 2600ms, Schleife"
  },
  "ausloeser": "klick",
  "touch": "Gleiche Satzarten per Tippen, größere Schalter. Auf 390px greift das Maß nicht (Spalte schmaler als 64ch), Anzeige „64ch → 100%“, Ø 40 Zeichen; Silbentrennung per hyphens: auto.",
  "reduziert": "Kein Breitenübergang: Maß und Umbruch springen sofort. Die Vorführung wechselt weiter die Satzarten, ohne Bewegung.",
  "korrekturen": {
   "beschreibung": "Lesesatz für lange Texte: Der Lauftext läuft höchstens 55–70ch breit, in 17–19px mit einer Zeilenhöhe von 1.5–1.7. Headlines und Bildunterschriften bekommen text-wrap: balance, Absätze text-wrap: pretty.",
   "warum_es_wirkt": "Bei 55–70 Zeichen findet das Auge den Anfang der nächsten Zeile mühelos. Längere Zeilen ermüden, kürzere zerhacken den Satz. balance verteilt die Wörter einer Headline auf gleich lange Zeilen, statt ein einzelnes Wort in die letzte Zeile zu schieben. pretty sorgt in Absätzen dafür, dass die letzte Zeile nicht aus einem einzelnen kurzen Wort besteht. Der Text wirkt ruhig und gesetzt, ohne dass jemand von Hand umbrechen muss.",
   "wann_einsetzen": "Überall, wo gelesen wird: Artikel, Journal, Fallstudien, Produktbeschreibungen, Über-uns-Seiten. balance für kurze Blöcke bis etwa 4–6 Zeilen wie Headlines, Vorspann, Bildunterschriften und Teaser. pretty für alle Absätze. Gehört in jeden Reset bzw. jedes Basis-Stylesheet.",
   "wann_nicht": "Nicht für Code, Tabellen, Formulare oder Daten, die exakt so umbrechen sollen. balance nicht auf lange Absätze, dort ist es wirkungslos und kostet Rechenzeit. Kein starres Maß für Bildschirmtexte wie Navigation oder Labels.",
   "varianten": [
    "Roh: Text läuft über die volle Spaltenbreite, normaler Umbruch",
    "Nur Maß: max-width 64ch, aber normaler Umbruch (text-wrap: wrap)",
    "Lesesatz: max-width 64ch plus balance für Headline, Vorspann und Bildunterschrift, pretty für Absätze"
   ],
   "umsetzung": "Lauftext-Container mit max-width in ch (55–70ch, hier 64ch), font-size per clamp() zwischen 17 und 19px, line-height 1.5–1.7 (hier 1.6). Basisregeln: h1, h2, h3, figcaption { text-wrap: balance } und p { text-wrap: pretty }. Headlines bekommen eine eigene, schmalere max-width in ch. Browser: balance ab Chrome 114, Safari 17.5, Firefox 124. pretty ab Chrome 117 und Safari 26; Firefox bricht normal um, ohne Schaden.",
   "mobil": "Auf dem Telefon ist die Spalte schmaler als das Maß, dann bestimmt der Bildschirm die Zeilenlänge (rund 35–45 Zeichen). balance und pretty wirken hier am stärksten, weil kurze Zeilen schnell einzelne Wörter abhängen. Für lange deutsche Komposita hyphens: auto mit lang=\"de\" setzen.",
   "reduzierte_bewegung": "Nicht relevant, das Muster hat keine Bewegung.",
   "barrierefreiheit": "Ein begrenztes Maß und großzügige Zeilenhöhe helfen allen Lesenden, besonders bei Leseschwäche. Maß in ch bzw. rem angeben, damit es mit der Schriftvergrößerung mitwächst. text-wrap ändert nur den Umbruch, nicht den Text: Screenreader und Kopieren bleiben unberührt. Keine manuellen <br> für den Umbruch."
  },
  "geprueft": "31.10.2026",
  "notiz": "Journal-Artikel eines erfundenen Studios über das Zeichen der Buchhandlung Eselsohr. Umschalter Roh / Nur Maß / Lesesatz; die Messleiste zählt live Zeichen je Zeile, Spanne und kurze Schlusszeilen (per Range-Vermessung), markiert kurze Schlusszeilen mit der CSS Custom Highlight API und zeigt ein Zeilenprofil des ersten Absatzes. Lineal zeigt das Maß auf der vollen Spaltenbreite. Der Breitenübergang dient nur der Demo. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise Alpha .56 auf .64 (5:1), --akzent Petrol #2F7F78 auf #2B746D (4,7:1 für kleine Labels), Knopfrahmen im Kontrastmodus."
 }
}