{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "headline-laufweite-zeilenabstand",
 "name": "Enge Laufweite und Zeilenabstand bei riesigen Headlines",
 "name_en": "Tight tracking and leading for display headlines",
 "kurz": "Große Headlines brauchen engere Laufweite und knapperen Zeilenabstand: je größer die Schrift, desto stärker, als Formel an die Größe gekoppelt.",
 "kategorie": "Typo-Techniken",
 "kategorie_slug": "typo-techniken",
 "kategorie_nr": 15,
 "bau_chat": "C1",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 4,
 "stimmung": [
  "editorial",
  "laut"
 ],
 "stimmung_roh": [
  "selbstbewusst",
  "editorial",
  "modern"
 ],
 "technik": [
  "css"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Große Headlines mit negativer Laufweite (-0.03 bis -0.05em) und einem Zeilenabstand von 0.82 bis 0.95. Je größer die Schrift, desto enger Laufweite und Zeilenabstand.",
  "warum_es_wirkt": "Schriften sind für Lesegrößen zugerichtet. In Displaygröße wirken dieselben Abstände wie Löcher, die Zeilen fallen auseinander. Eng geführt wird die Headline zu einer geschlossenen Form und liest sich wie ein Wort-Bild.",
  "wann_einsetzen": "Aufmacher, Exposé- und Projekttitel, Kampagnen-Headlines, alle Headlines ab etwa 4rem.",
  "wann_nicht": "Fließtext und kleine Überschriften (dort bleibt die Laufweite nahe 0). Lange Headlines mit vielen Ober- und Unterlängen, die bei 0.85 kollidieren. Schriften, die schon eng zugerichtet sind.",
  "varianten": [
   "Feste Werte für die größte Stufe, z. B. -0.04em und 0.9 (Fantasy) oder -0.04em und 0.85 (Studio Dumbar)",
   "An die Größe gekoppelt: Laufweite und Zeilenhöhe als Formel über eine Größenvariable",
   "Versal-Grotesk mit 0.85 und -0.04em (Build in Amsterdam)",
   "Sehr groß ab etwa 28vw mit -0.05em und 0.83 (Instrument)"
  ],
  "umsetzung": "Die Größe als Zahl in einer Variable führen (--g in rem) und daraus font-size, letter-spacing und line-height rechnen: font-size calc(var(--g) * 1rem); letter-spacing calc((-0.005 - (var(--g) - 2.25) * 0.004828) * 1em); line-height calc(1.08 - (var(--g) - 2.25) * 0.02483). Je Überschriftenstufe oder Breakpoint nur --g setzen. Laufweite immer in em angeben, damit sie mitwächst. Ober- und Unterlängen der konkreten Wörter prüfen, bevor man unter 0.9 geht.",
  "mobil": "Die Formel lockert Laufweite und Zeilenabstand bei kleineren Größen von selbst. Eine feste -0.04em wäre auf dem Telefon zu eng.",
  "reduzierte_bewegung": "Nicht relevant, das Muster bewegt sich nicht. Animierte Wechsel der Werte entfallen bei reduzierter Bewegung.",
  "barrierefreiheit": "Laufweite nur bei großen Größen verengen; Buchstaben dürfen sich nicht berühren. Text als echten Text setzen, nicht als Bild. Die Headline bleibt ein <h1>, Zeilen nur per display: block trennen, nicht mit <br> in einzelne Überschriften zerlegen."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "letter-spacing −.04 bis −.05em; line-height .82–.9",
  "sonstiges": "bei 9.5rem bzw. ~28vw",
  "herkunft": "beobachtet",
  "quelle": "https://fantasy.co/ ; https://studiodumbar.com/ ; https://www.buildinamsterdam.com/ ; https://www.instrument.com/"
 },
 "kurve": {
  "bezier": [
   0.165,
   0.84,
   0.44,
   1.0
  ],
  "css": "cubic-bezier(0.165, 0.84, 0.44, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 900
 },
 "gesehen_bei": [
  {
   "seite": "Fantasy",
   "url": "https://fantasy.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Inline-CSS): .h1 {font-size 9.5rem; letter-spacing −.04em; line-height .9}; .h1-c (Condensed) 5.5rem, −.02em, .85.",
   "art": "website"
  },
  {
   "seite": "Studio Dumbar",
   "url": "https://studiodumbar.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (main.css): .mega-title {letter-spacing −.04em; line-height .85}.",
   "art": "website"
  },
  {
   "seite": "Build in Amsterdam",
   "url": "https://www.buildinamsterdam.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (styled-components im HTML): NHaasGroteskDSPro 70 px → 100 px, line-height .85, letter-spacing −.04em, uppercase.",
   "art": "website"
  },
  {
   "seite": "Instrument",
   "url": "https://www.instrument.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft: .purpose .title1/.title2 ≈ 28vw mit letter-spacing −.05em und line-height .826/.833.",
   "art": "website"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "schrift-hero-viewportbreit",
  "split-mask-reveal"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/",
  "meta": "https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriften.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): Vier Belege; Werte bestätigen die typische Spanne."
  ],
  "prioritaet_hinweis": "vorläufig gesetzt (Rohdaten ohne Priorität)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Große Headlines brauchen engere Laufweite und knapperen Zeilenabstand: je größer die Schrift, desto stärker, als Formel an die Größe gekoppelt.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "schrift": "Libre Caslon Display 400, Farbe #02385C",
   "groesse": "--g in rem; Start clamp(2.75rem, 2.45rem + 8.84vw, 12rem), Regler 2.25 bis 12rem",
   "letter_spacing_gleitend": "calc((-0.005 - (var(--g) - 2.25) * 0.004828) * 1em): -0.005em bei 2.25rem, -0.040em bei 9.5rem, -0.052em bei 12rem",
   "line_height_gleitend": "calc(1.08 - (var(--g) - 2.25) * 0.02483): 1.08 bei 2.25rem, 0.90 bei 9.5rem, 0.84 bei 12rem",
   "leiter": "2.25rem -0.005em 1.08 · 3.5rem -0.011em 1.05 · 5.5rem -0.021em 1.00 · 7.5rem -0.030em 0.95 · 9.5rem -0.040em 0.90 · 12rem -0.052em 0.84",
   "fest": "letter-spacing -0.04em, line-height 0.9 bei jeder Größe (Fantasy .h1)",
   "standard": "letter-spacing 0, line-height 1.2 (Vergleich)",
   "einzug_zeile_2": "0.9em (unter 600 px 0.5em)",
   "easing": "cubic-bezier(0.165, 0.84, 0.44, 1)",
   "dauer_ms": "900 (Wechsel von Laufweite, Zeilenhöhe, Größe), 200 (Hover), 1100 (Bild-Aufdeckung)",
   "bild": "clip-path inset(0 0 100% 0) zu inset(0), scale 1.06 zu 1, 1100 ms",
   "farben": "#FCFAF5 Grund, #EFE8DF Sand, #02385C Marke, #313131 Text, #B5B2AF Meta, #B85A0C nur CTA (vorher #ED7F1A, für Weiß 4,7:1 abgedunkelt)"
  },
  "ausloeser": "klick",
  "touch": "Satzart per Tippen, Größe per Schieberegler; Kurzbeschriftung der Knöpfe unter 600 px. Messlinien bleiben, die Beschriftung des Zeilenabstands entfällt auf schmalen Schirmen.",
  "reduziert": "Wechsel von Laufweite, Zeilenhöhe und Größe ohne Übergang, Vorführung springt statt zu gleiten; die Zeichnung erscheint ohne Aufdeckung.",
  "korrekturen": {
   "name": "Enge Laufweite und Zeilenabstand bei riesigen Headlines",
   "beschreibung": "Große Headlines mit negativer Laufweite (-0.03 bis -0.05em) und einem Zeilenabstand von 0.82 bis 0.95. Je größer die Schrift, desto enger Laufweite und Zeilenabstand.",
   "warum_es_wirkt": "Schriften sind für Lesegrößen zugerichtet. In Displaygröße wirken dieselben Abstände wie Löcher, die Zeilen fallen auseinander. Eng geführt wird die Headline zu einer geschlossenen Form und liest sich wie ein Wort-Bild.",
   "wann_einsetzen": "Aufmacher, Exposé- und Projekttitel, Kampagnen-Headlines, alle Headlines ab etwa 4rem.",
   "wann_nicht": "Fließtext und kleine Überschriften (dort bleibt die Laufweite nahe 0). Lange Headlines mit vielen Ober- und Unterlängen, die bei 0.85 kollidieren. Schriften, die schon eng zugerichtet sind.",
   "varianten": [
    "Feste Werte für die größte Stufe, z. B. -0.04em und 0.9 (Fantasy) oder -0.04em und 0.85 (Studio Dumbar)",
    "An die Größe gekoppelt: Laufweite und Zeilenhöhe als Formel über eine Größenvariable",
    "Versal-Grotesk mit 0.85 und -0.04em (Build in Amsterdam)",
    "Sehr groß ab etwa 28vw mit -0.05em und 0.83 (Instrument)"
   ],
   "umsetzung": "Die Größe als Zahl in einer Variable führen (--g in rem) und daraus font-size, letter-spacing und line-height rechnen: font-size calc(var(--g) * 1rem); letter-spacing calc((-0.005 - (var(--g) - 2.25) * 0.004828) * 1em); line-height calc(1.08 - (var(--g) - 2.25) * 0.02483). Je Überschriftenstufe oder Breakpoint nur --g setzen. Laufweite immer in em angeben, damit sie mitwächst. Ober- und Unterlängen der konkreten Wörter prüfen, bevor man unter 0.9 geht.",
   "mobil": "Die Formel lockert Laufweite und Zeilenabstand bei kleineren Größen von selbst. Eine feste -0.04em wäre auf dem Telefon zu eng.",
   "reduzierte_bewegung": "Nicht relevant, das Muster bewegt sich nicht. Animierte Wechsel der Werte entfallen bei reduzierter Bewegung.",
   "barrierefreiheit": "Laufweite nur bei großen Größen verengen; Buchstaben dürfen sich nicht berühren. Text als echten Text setzen, nicht als Bild. Die Headline bleibt ein <h1>, Zeilen nur per display: block trennen, nicht mit <br> in einzelne Überschriften zerlegen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept immobilien-diskret-hochwertig, Exposé der erfundenen Hallgarten Immobilien aus Wiesbaden (Stadtvilla im Nerotal; Libre Caslon Display, Hanken Grotesk, Sand und Nachtblau, Orange nur am CTA, eigene SVG-Zeichnung statt Foto). Umschalter Standard / Fest / Folgt der Größe und Größenregler; Messlinien zeigen Grundlinien, Versalhöhe, Zeilenabstand, Lücke und Wortbreite live. Die Formel verbindet den Rezeptwert (-0.005em, 1.08 bei 2.25rem) mit den gemessenen Werten von Fantasy (-0.04em, 0.9 bei 9.5rem) und landet bei 12rem nahe Instrument (-0.05em, 0.83). Das Rezept deckelt h1 bei 4.5rem; hier geht es um den Aufmacher darüber. Referenzen: fantasy.co, studiodumbar.com, buildinamsterdam.com, instrument.com, engelvoelkers.com. AD-Review 01.11.2026: Note 5. Zugang 02.11.2026: CTA-Orange #ed7f1a → #b85a0c (Weiß 4,7:1), Hover #a4500a. --leise Alpha .62 → .7 (4,9:1 auf #fcfaf5). Bis 360 px Kopf, CTA und Größenregler schmaler, damit bei 320 px nichts quer scrollt. Kontrastmodus: Knöpfe mit Rahmen ButtonText."
 }
}