{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "versal-kondensiert-fit-to-width",
 "name": "Kondensierte Versal-Headlines auf volle Breite (fit-to-width)",
 "name_en": "Condensed all-caps fit-to-width headlines",
 "kurz": "Mission eines Bochumer Schwimmvereins in Big Shoulders: jede Versalzeile füllt die volle Breite, über die Schriftgröße je Zeile oder über die Breitenachse von Archivo.",
 "kategorie": "Typo-Techniken",
 "kategorie_slug": "typo-techniken",
 "kategorie_nr": 15,
 "bau_chat": "C1",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "laut"
 ],
 "stimmung_roh": [
  "plakativ",
  "laut",
  "selbstbewusst"
 ],
 "technik": [
  "css"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Headlines in Versalien und kondensierten Schnitten, Zeile für Zeile gestapelt. Jede Zeile füllt die volle Breite, als wäre sie im Blocksatz gesetzt. In Produktion entsteht das über eine Schriftgröße in vw, nicht über JavaScript.",
  "warum_es_wirkt": "Die Headline wird zum Plakat: eine geschlossene Fläche mit harten Kanten links und rechts. Schmale Versalien bringen viele Buchstaben in eine Zeile und bleiben trotzdem riesig. Das wirkt laut, selbstbewusst und sofort lesbar.",
  "wann_einsetzen": "Für eine kurze Botschaft mit Haltung: Mission eines Vereins, Kampagne, Festival, Sport, Marken mit lautem Auftritt, Seitentitel und Wortmarken im Footer.",
  "wann_nicht": "Bei langen oder oft wechselnden Texten, bei ruhigen, leisen Marken und bei mehrsprachigen Seiten, wenn die Zeilen in jeder Sprache neu gemessen werden müssten. Bei Fließtext nie.",
  "varianten": [
   "Größe je Zeile in vw: jede Zeile bekommt eine eigene Schriftgröße (Zentry: Root-Größe .625vw, Titel 10rem = 6.25vw)",
   "Eine Zeile über die volle Breite mit white-space: nowrap (Instrument: font-size 27.69vw)",
   "Breitenachse: alle Zeilen gleich groß, die wdth-Achse einer Variable Font füllt die Breite (Instrument Sans mit 'wdth' 0 als schmalste Breite)",
   "Fester kondensierter Schnitt mit enger Laufweite (Fantasy: Suisse Intl Condensed Bold, line-height .85, letter-spacing -.02em)"
  ],
  "umsetzung": "Schrift laden, jede Zeile als eigenes Element mit white-space: nowrap setzen. Die Breite der Zeile einmal in em messen (Breite bei 100 px geteilt durch 100) und als Faktor eintragen: font-size: calc(100vw / Faktor), bei Polstern calc((100vw - 2 * Rand) / Faktor). In Komponenten 100cqi statt 100vw. Zeilenhöhe .8 bis .85, Laufweite leicht negativ. Für Text aus dem CMS oder die Breitenachse braucht es JavaScript: einmal messen, bei Größenänderung per ResizeObserver neu rechnen.",
  "mobil": "Die Zeilen bleiben bündig, werden aber klein. Für schmale Bildschirme die Zeilen neu aufteilen (z. B. fünf statt drei kürzere Zeilen per Container- oder Media-Query), damit die Headline groß bleibt.",
  "reduzierte_bewegung": "Nicht relevant, die Technik hat keine Bewegung.",
  "barrierefreiheit": "Den ganzen Satz einmal als Text im h1 lassen und die gestapelten Zeilen für Screenreader ausblenden, sonst werden sie als Bruchstücke vorgelesen. Versalien per CSS setzen, nicht im Quelltext. Prüfen, dass Browser-Zoom und eigene Schriftgrößen weiter wirken: reine vw-Größen wachsen beim Zoom nicht mit, ein rem-Anteil in clamp() oder calc() hilft."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "line-height .8–.85; Schriftgröße 6.25vw (Zentry) bzw. 27.7vw (Instrument)",
  "sonstiges": "Breitenbindung über vw-Root-Größe statt JS-Fitting; kein fitty/textFit gefunden",
  "herkunft": "beobachtet",
  "quelle": "https://zentry.com/ ; https://www.instrument.com/"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Zentry",
   "url": "https://zentry.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (entry.4V1T4xck.css): Display-Schrift ZentryScreamer (eng, Versalien) – .textTitlePage/.textTitleBig1 10rem, line-height .8/.82, letter-spacing −.01em, uppercase; html font-size .625vw (ab 769 px) bzw. 2.667vw, d. h. Headlines skalieren mit der Viewportbreite (10rem = 6.25vw).",
   "art": "website"
  },
  {
   "seite": "Instrument",
   "url": "https://www.instrument.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft: .purpose .title2 in Instrument Sans mit font-variation-settings 'wdth' 0 (schmalste Breite), font-size 27.69vw, white-space nowrap – Zeile füllt die Breite.",
   "art": "website"
  },
  {
   "seite": "Fantasy",
   "url": "https://fantasy.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft: @font-face 'condensed' = SuisseIntlCond-Bold; .h1-c 5.5rem, letter-spacing −.02em, line-height .85.",
   "art": "website"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "schrift-hero-viewportbreit"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/typo-techniken/versal-kondensiert-fit-to-width/",
  "meta": "https://cecodesign.de/lab/fundus/typo-techniken/versal-kondensiert-fit-to-width/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/typo-techniken/versal-kondensiert-fit-to-width/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriften.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): Fit-to-width in Produktion über vw-Skalierung, nicht über JS-Messung."
  ],
  "prioritaet_hinweis": "vorläufig gesetzt (Rohdaten ohne Priorität)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Mission eines Bochumer Schwimmvereins in Big Shoulders: jede Versalzeile füllt die volle Breite, über die Schriftgröße je Zeile oder über die Breitenachse von Archivo.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "schrift_groesse": "Big Shoulders 800, text-transform: uppercase, letter-spacing -.01em, line-height .85",
   "groesse_je_zeile": "font-size: calc(100cqi / var(--k)); --k = Breite der Zeile in em bei 800 und -.01em (gemessen: 8,20 · 5,81 · 8,77; schmal 5,12 · 4,21 · 4,49 · 4,28 · 4,29)",
   "container": "container: fit / inline-size auf der h1; im echten Einsatz 100vw bzw. Root-Größe in vw statt 100cqi",
   "zeilenumbruch_schmal": "@container fit (max-width: 480px): fünf statt drei Zeilen, eigene --k-Werte",
   "schrift_breitenachse": "Archivo 800, wdth 62–125 über font-stretch, line-height .85, letter-spacing -.01em",
   "breitenachse_rechnung": "eine Größe für alle Zeilen = Containerbreite / Breite der längsten Zeile bei wdth 62; wdth je Zeile aus 7 gemessenen Stufen (62, 72.5, 83, 93.5, 104, 114.5, 125) linear interpoliert; reicht 125 nicht, füllt zusätzliche Laufweite den Rest; Neuberechnung per ResizeObserver",
   "gegenprobe": "Big Shoulders 800, clamp(2.75rem, 1.6rem + 5cqi, 6rem), line-height .95, letter-spacing .005em (Rezeptwerte)",
   "uebergang": "Variantenwechsel in derselben Familie (Größe je Zeile ↔ ohne Fitting): font-size 800ms cubic-bezier(0.645, 0.045, 0.355, 1); Familienwechsel (Breitenachse): ausblenden 200ms, Größen springen, einblenden 400ms gleiche Kurve; UI 180ms",
   "vorfuehrung": "Rahmen 100 % → 62 % → 100 %, je 1000ms mit cubic-bezier(0.645, 0.045, 0.355, 1), Halt 900ms schmal und 1400ms breit; Variante wechselt jede Runde (4300ms)",
   "farben": "#ffffff Grund · #edf5fa Fläche · #002e6d Headline und Marke · #222520 Text · #ffca0a nur Spenden mit Text #222520 · #007caa Messlinien und Messwerte (Wasser #008fc3)"
  },
  "ausloeser": "ziehen",
  "touch": "Breite per Regler (Griff am Rand ist unter 600 px ausgeblendet), Umschalter per Tippen. Auf dem Telefon ist der Rahmen selbst schmaler als 480 px: die Headline steht in fünf Zeilen, jede wieder bündig.",
  "reduziert": "Kein Einblenden beim Variantenwechsel, keine Größenübergänge. Die Vorführung springt zwischen voller und schmaler Breite, statt zu gleiten. Die Technik selbst hat keine Bewegung.",
  "korrekturen": {
   "beschreibung": "Headlines in Versalien und kondensierten Schnitten, Zeile für Zeile gestapelt. Jede Zeile füllt die volle Breite, als wäre sie im Blocksatz gesetzt. In Produktion entsteht das über eine Schriftgröße in vw, nicht über JavaScript.",
   "warum_es_wirkt": "Die Headline wird zum Plakat: eine geschlossene Fläche mit harten Kanten links und rechts. Schmale Versalien bringen viele Buchstaben in eine Zeile und bleiben trotzdem riesig. Das wirkt laut, selbstbewusst und sofort lesbar.",
   "wann_einsetzen": "Für eine kurze Botschaft mit Haltung: Mission eines Vereins, Kampagne, Festival, Sport, Marken mit lautem Auftritt, Seitentitel und Wortmarken im Footer.",
   "wann_nicht": "Bei langen oder oft wechselnden Texten, bei ruhigen, leisen Marken und bei mehrsprachigen Seiten, wenn die Zeilen in jeder Sprache neu gemessen werden müssten. Bei Fließtext nie.",
   "varianten": [
    "Größe je Zeile in vw: jede Zeile bekommt eine eigene Schriftgröße (Zentry: Root-Größe .625vw, Titel 10rem = 6.25vw)",
    "Eine Zeile über die volle Breite mit white-space: nowrap (Instrument: font-size 27.69vw)",
    "Breitenachse: alle Zeilen gleich groß, die wdth-Achse einer Variable Font füllt die Breite (Instrument Sans mit 'wdth' 0 als schmalste Breite)",
    "Fester kondensierter Schnitt mit enger Laufweite (Fantasy: Suisse Intl Condensed Bold, line-height .85, letter-spacing -.02em)"
   ],
   "umsetzung": "Schrift laden, jede Zeile als eigenes Element mit white-space: nowrap setzen. Die Breite der Zeile einmal in em messen (Breite bei 100 px geteilt durch 100) und als Faktor eintragen: font-size: calc(100vw / Faktor), bei Polstern calc((100vw - 2 * Rand) / Faktor). In Komponenten 100cqi statt 100vw. Zeilenhöhe .8 bis .85, Laufweite leicht negativ. Für Text aus dem CMS oder die Breitenachse braucht es JavaScript: einmal messen, bei Größenänderung per ResizeObserver neu rechnen.",
   "mobil": "Die Zeilen bleiben bündig, werden aber klein. Für schmale Bildschirme die Zeilen neu aufteilen (z. B. fünf statt drei kürzere Zeilen per Container- oder Media-Query), damit die Headline groß bleibt.",
   "reduzierte_bewegung": "Nicht relevant, die Technik hat keine Bewegung.",
   "barrierefreiheit": "Den ganzen Satz einmal als Text im h1 lassen und die gestapelten Zeilen für Screenreader ausblenden, sonst werden sie als Bruchstücke vorgelesen. Versalien per CSS setzen, nicht im Quelltext. Prüfen, dass Browser-Zoom und eigene Schriftgrößen weiter wirken: reine vw-Größen wachsen beim Zoom nicht mit, ein rem-Anteil in clamp() oder calc() hilft."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept verein-nonprofit-wirkung, erfundener Verein Kopfsprung e.V. in Bochum (kostenlose Schwimmkurse für Grundschulkinder): Mission als Versal-Plakat, Lehrschwimmbecken als eigene SVG-Zeichnung, Spenden-Gelb nur an den Spenden-Knöpfen, Wirkungszahlen mit Stand. Rahmen mit Griff und Regler simuliert die Fensterbreite, Lineal und Messwerte zeigen 100cqi und die Werte je Zeile live. Big Shoulders hat keine Breitenachse, deshalb zeigt die Variante Breitenachse die Rezept-Textschrift Archivo (wdth 62–125). Faktoren --k stehen als Startwerte im HTML und werden nach dem Laden der Schrift nachgemessen. Referenzen: zentry.com, instrument.com, fantasy.co, vivaconagua.org. AD-Review 01.11.2026: Note 5 (Fehler behoben: beim Wechsel in die Breitenachse glitt die alte Big-Shoulders-Größe noch 800ms nach und sprengte Zeile 2 über den Rand; Größen gleiten jetzt nur innerhalb derselben Familie). Zugang 02.11.2026: Messfarbe --mess #008fc3 → #007caa (4,7:1), Bildunterschrift über dem Becken mit Verlauf rgba(1,33,79,0→.5) als Lesegrund, Greiffläche des Ziehgriffs unter 860 px schmaler (kein Querscrollen bei 200 %), Zeilen werden bei eigenen Textabständen per ResizeObserver neu gemessen (Fit bleibt bündig statt abgeschnitten), Kontrastmodus-Rahmen für Knöpfe."
 }
}