{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "initial-letter-initialen",
 "name": "Echte Initialen mit initial-letter",
 "name_en": "Drop caps with CSS initial-letter",
 "kurz": "Eine echte Initiale, die der Browser selbst auf das Zeilenraster setzt: oben bündig mit der Versalhöhe, unten auf der Grundlinie der dritten Zeile.",
 "kategorie": "Typo-Techniken",
 "kategorie_slug": "typo-techniken",
 "kategorie_nr": 15,
 "bau_chat": "C1",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "editorial",
  "luxuriös"
 ],
 "stimmung_roh": [
  "editorial",
  "hochwertig",
  "elegant",
  "ruhig"
 ],
 "technik": [
  "css"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Der erste Buchstabe eines Artikels wird über ::first-letter gewählt und mit initial-letter auf eine genaue Zahl von Textzeilen vergrößert. Der Browser setzt die Initiale oben auf die Versalhöhe der ersten Zeile und unten auf die Grundlinie der letzten. initial-letter: 3 ist drei Zeilen hoch und drei tief; initial-letter: 3 1 ist erhaben und sinkt nur eine Zeile ein.",
  "warum_es_wirkt": "Ein klassisches Buch- und Magazinsignal: Die Initiale markiert den Einstieg in einen langen Text und gibt Editorial-Seiten Rhythmus und Handwerk. Mit initial-letter sitzt sie ohne Nachjustieren auf dem Zeilenraster.",
  "wann_einsetzen": "Long-Reads, Insights und Fachbeiträge, Fallstudien, Essays, Journal- und Magazin-Layouts, erzählende Über-uns-Texte.",
  "wann_nicht": "Kurze Teaser, Listen, UI-Texte. Absätze, die mit Zitat, Zahl oder Link beginnen. Mehr als eine Initiale pro Seite.",
  "varianten": [
   "Eingesenkt über 3 bis 4 Zeilen (initial-letter: 3)",
   "Erhaben (initial-letter: 3 1)",
   "Serif-Initiale in Grotesk-Text, in Markenfarbe",
   "Initiale auf farbiger Fläche",
   "Mit Kapitälchen in der ersten Zeile (::first-line, font-variant-caps)"
  ],
  "umsetzung": "article p:first-of-type::first-letter { font-family: var(--serif); color: var(--marke); margin-inline-end: .1em } und in @supports (initial-letter: 3) or (-webkit-initial-letter: 3) { … { -webkit-initial-letter: 3; initial-letter: 3 } }. Ohne Unterstützung bleibt nur der farbige Serif-Buchstabe in normaler Größe. Bewusst kein float-Rückfall, der leicht verrutscht. Für schmale Spalten per Container Query auf 2 reduzieren. Browserstand laut MDN (31.10.2026): Chrome und Edge ab 110 teilweise, Safari nur mit -webkit-Präfix, Firefox nicht.",
  "mobil": "Auf schmalen Spalten auf 2 Zeilen reduzieren (Container oder Media Query), damit neben der Initiale noch Wörter Platz haben.",
  "reduzierte_bewegung": "Nicht relevant, das Muster bewegt sich nicht.",
  "barrierefreiheit": "Der Buchstabe bleibt Teil des Wortes im DOM; Screenreader lesen das Wort normal, ein eigenes <span> mit aria-hidden ist nicht nötig. Kontrast der Initialfarbe prüfen."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "initial-letter 3 (Standard) bis 4 Zeilen; Abstand rechts 0.05–0.15em",
  "sonstiges": "Browser: Chrome/Edge 110 (teilweise), Safari nur -webkit-initial-letter, Firefox nicht unterstützt (MDN BCD, 31.10.2026)",
  "herkunft": "typisch",
  "quelle": "https://developer.chrome.com/blog/control-your-drop-caps-with-css-initial-letter"
 },
 "kurve": {
  "bezier": [
   0.4,
   0.0,
   0.22,
   1.0
  ],
  "css": "cubic-bezier(0.4, 0, 0.22, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 125
 },
 "gesehen_bei": [
  {
   "seite": "Chrome for Developers – Control your drop caps with CSS initial-letter",
   "url": "https://developer.chrome.com/blog/control-your-drop-caps-with-css-initial-letter",
   "auszeichnung": "",
   "beobachtung": "Einführung zu Chrome 110 mit Syntax (Größe, Absenkung) und Beispielen.",
   "art": "artikel"
  },
  {
   "seite": "Big, Beautiful Dropcaps with CSS initial-letter (demosthenes.info)",
   "url": "https://demosthenes.info/blog/961/Big-Beautiful-Dropcaps-with-CSS-initial-letter",
   "auszeichnung": "",
   "beobachtung": "Tutorial zu responsiven echten Initialen mit initial-letter.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Chrome for Developers – Control your drop caps with CSS initial-letter",
   "url": "https://developer.chrome.com/blog/control-your-drop-caps-with-css-initial-letter"
  },
  {
   "titel": "MDN – initial-letter",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter"
  }
 ],
 "kombinierbar_mit": [
  "editorial-magazin-layout",
  "lesesatz-text-wrap",
  "serif-grotesk-duotone",
  "optische-groessen-opsz",
  "case-study-geruest"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/typo-techniken/initial-letter-initialen/",
  "meta": "https://cecodesign.de/lab/fundus/typo-techniken/initial-letter-initialen/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/typo-techniken/initial-letter-initialen/demo"
 },
 "herkunft": {
  "quelldateien": [
   "patch-luecken-b.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine echte Initiale, die der Browser selbst auf das Zeilenraster setzt: oben bündig mit der Versalhöhe, unten auf der Grundlinie der dritten Zeile.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "selektor": ".beitrag p:first-of-type::first-letter (in der Demo .erster::first-letter)",
   "eingesenkt": "initial-letter: 3 (mit -webkit-initial-letter: 3)",
   "erhaben": "initial-letter: 3 1",
   "mit_flaeche": "initial-letter: 3; background #1E1E50; color #F9F8F8; padding .1em .16em .08em; margin-inline-end .16em",
   "schmale_spalte": "@container (max-width: 26rem): initial-letter 2 bzw. 2 1",
   "initiale": "Newsreader 400, font-optical-sizing auto, color #1E1E50, margin-inline-end .1em",
   "lauftext": "Schibsted Grotesk 400, 1.0625rem, line-height 1.6, max-width 65ch, hyphens auto",
   "kapitaelchen": "::first-line { font-variant-caps: all-small-caps; letter-spacing: .05em }",
   "rueckfall": "@supports not: nur Newsreader und Markenfarbe, normale Größe, kein float",
   "easing": "cubic-bezier(0.4, 0, 0.22, 1)",
   "dauer_ms": "125 (Ausblenden beim Wechsel, Farbe, Unterstreichung), 250 (Einblenden, Zeilenraster)",
   "farben": "#F9F8F8 Grund, #EFEBEB Fläche, #D2CDC7 Linien, #1E1E50 Marke, #212529 Text, #8E7C6D Meta, #00BEE6 Links und Fokus"
  },
  "ausloeser": "klick",
  "touch": "Alle Schalter per Tippen. Auf dem Telefon greift die Container Query: die Initiale ist nur zwei Zeilen tief, damit neben ihr genug Wörter Platz haben.",
  "reduziert": "Wechsel zwischen den Varianten ohne Aus- und Einblenden; das Zeilenraster springt sofort.",
  "korrekturen": {
   "name": "Echte Initialen mit initial-letter",
   "beschreibung": "Der erste Buchstabe eines Artikels wird über ::first-letter gewählt und mit initial-letter auf eine genaue Zahl von Textzeilen vergrößert. Der Browser setzt die Initiale oben auf die Versalhöhe der ersten Zeile und unten auf die Grundlinie der letzten. initial-letter: 3 ist drei Zeilen hoch und drei tief; initial-letter: 3 1 ist erhaben und sinkt nur eine Zeile ein.",
   "warum_es_wirkt": "Ein klassisches Buch- und Magazinsignal: Die Initiale markiert den Einstieg in einen langen Text und gibt Editorial-Seiten Rhythmus und Handwerk. Mit initial-letter sitzt sie ohne Nachjustieren auf dem Zeilenraster.",
   "wann_einsetzen": "Long-Reads, Insights und Fachbeiträge, Fallstudien, Essays, Journal- und Magazin-Layouts, erzählende Über-uns-Texte.",
   "wann_nicht": "Kurze Teaser, Listen, UI-Texte. Absätze, die mit Zitat, Zahl oder Link beginnen. Mehr als eine Initiale pro Seite.",
   "varianten": [
    "Eingesenkt über 3 bis 4 Zeilen (initial-letter: 3)",
    "Erhaben (initial-letter: 3 1)",
    "Serif-Initiale in Grotesk-Text, in Markenfarbe",
    "Initiale auf farbiger Fläche",
    "Mit Kapitälchen in der ersten Zeile (::first-line, font-variant-caps)"
   ],
   "umsetzung": "article p:first-of-type::first-letter { font-family: var(--serif); color: var(--marke); margin-inline-end: .1em } und in @supports (initial-letter: 3) or (-webkit-initial-letter: 3) { … { -webkit-initial-letter: 3; initial-letter: 3 } }. Ohne Unterstützung bleibt nur der farbige Serif-Buchstabe in normaler Größe. Bewusst kein float-Rückfall, der leicht verrutscht. Für schmale Spalten per Container Query auf 2 reduzieren. Browserstand laut MDN (31.10.2026): Chrome und Edge ab 110 teilweise, Safari nur mit -webkit-Präfix, Firefox nicht.",
   "mobil": "Auf schmalen Spalten auf 2 Zeilen reduzieren (Container oder Media Query), damit neben der Initiale noch Wörter Platz haben.",
   "reduzierte_bewegung": "Nicht relevant, das Muster bewegt sich nicht.",
   "barrierefreiheit": "Der Buchstabe bleibt Teil des Wortes im DOM; Screenreader lesen das Wort normal, ein eigenes <span> mit aria-hidden ist nicht nötig. Kontrast der Initialfarbe prüfen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kanzlei-beratung-souveraen (Signatur des Rezepts), Insight-Beitrag der erfundenen Kanzlei Brandes Hagemeister aus Lübeck zur Unternehmensnachfolge; Newsreader für Überschriften, Zitat und Initiale, Schibsted Grotesk für den Text, Nachtblau auf warmem Grau. Umschalter Eingesenkt / Erhaben / Mit Fläche, Schalter für Kapitälchen, simulierten Rückfall und Zeilenraster (Grundlinien und Versalhöhe live gemessen, die Initialzeilen nummeriert). Beobachtung im Headless-Chromium: die erhabene Initiale (3 1) erscheint sichtbar kleiner als die eingesenkte; passt zur nur teilweisen Unterstützung in Chrome. Referenzen: developer.chrome.com, developer.mozilla.org, demosthenes.info, oppenhoff.eu, slaughterandmay.com. AD-Review 01.11.2026: Note 4. Unterzeile der Marke bricht auf dem Telefon nicht mehr um. Zugang 02.11.2026: --meta #8e7c6d → #73645a (≥ 4,8:1 auch auf der Karte #efebeb); Zeilenraster-Ziffern und -Etikett #0b8fae → #087894; Werte-Raster minmax(min(320px, 100%), 1fr), unter 380 px Markenzusatz und Umschalter umbrechend (kein Querscrollen bei 320 px); Kontrastmodus-Rahmen für Knöpfe."
 }
}