{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "optische-groessen-opsz",
 "name": "Optische Größen nutzen (opsz-Achse)",
 "name_en": "Optical sizing",
 "kurz": "Neuheitenseite einer Hanauer Uhrenmanufaktur in einer einzigen Bodoni Moda: Titel mit Haarstrichen, Gravur auf dem Zifferblatt robust, gesteuert über die opsz-Achse.",
 "kategorie": "Typo-Techniken",
 "kategorie_slug": "typo-techniken",
 "kategorie_nr": 15,
 "bau_chat": "C1",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "ruhig",
  "editorial",
  "luxuriös"
 ],
 "stimmung_roh": [
  "editorial",
  "fein",
  "hochwertig"
 ],
 "technik": [
  "css"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Variable Schriften mit opsz-Achse haben für jede Größe einen eigenen Zuschnitt. Groß werden Haarstriche feiner und Abstände enger, klein werden Striche kräftiger, Punzen offener und die Laufweite weiter. Mit font-optical-sizing: auto wählt der Browser die passende Stufe selbst.",
  "warum_es_wirkt": "Eine einzige Schrift sieht in jeder Größe richtig aus: der Titel elegant und kontrastreich, der Fließtext robust und lesbar. So kann eine kontrastreiche Serif wie Bodoni auch klein eingesetzt werden, ohne dass Haarstriche wegbrechen.",
  "wann_einsetzen": "Editorial, Luxus, Kultur und Marken mit einer Serif, die vom großen Titel bis zur Fußnote reicht. Besonders bei Didonen und feinen Serifen wie Bodoni Moda, Fraunces, Newsreader oder Literata.",
  "wann_nicht": "Bei Schriften ohne opsz-Achse bringt es nichts. Bei Groteskschriften mit geringem Strichkontrast ist der Unterschied kaum sichtbar. Wer jeden Kilobyte zählt, sollte prüfen, ob die größere Variable-Datei sich lohnt.",
  "varianten": [
   "Automatisch: font-optical-sizing: auto (Clagnut, Linear)",
   "Feste Stufen je Größe der Skala, etwa Display 'opsz' 96 und Text 'opsz' 12 (Undercase)",
   "Zusatzachsen wie SOFT, WONK oder GRAD als Markensignatur (Undercase mit Fraunces)",
   "Alle Achsen gebündelt in einer Custom Property (Linear: --font-variations)"
  ],
  "umsetzung": "Variable Schrift mit opsz-Achse laden. Für die Automatik genügt font-optical-sizing: auto, das ist in den meisten Browsern schon Standard. Für feste Werte font-variation-settings: 'opsz' 96 nutzen. Weil font-variation-settings nicht kaskadiert und jede Regel alle Achsen ersetzt, alle Achsen gemeinsam in einer Custom Property führen (z. B. --font-variations: 'opsz' 96, 'wght' 400).",
  "mobil": "Mit der Automatik passt sich opsz von selbst an die kleineren Größen an. Feste Stufen gelten unabhängig von der Bildschirmbreite und müssen bei stark schrumpfenden Titeln eventuell angepasst werden.",
  "reduzierte_bewegung": "Nicht relevant, die Technik hat keine Bewegung.",
  "barrierefreiheit": "Optische Größen verbessern die Lesbarkeit kleiner Texte. Trotzdem Kontrast prüfen und Fließtext nicht unter 16 px setzen. Bei Vergrößerung über transform (Lupe, Zoom-Effekte) bleibt die kleine Stufe stehen."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Automatik: font-optical-sizing: auto (Clagnut, Linear über 'opsz' auto). Feinsteuerung: Display 'opsz' 70–144, Text 'opsz' 9–14 (Undercase/Fraunces); Zusatzachsen wie SOFT/WONK (Fraunces) oder GRAD nur über font-variation-settings – dabei alle Achsen gemeinsam in einer Custom Property führen, weil font-variation-settings nicht kaskadiert",
  "herkunft": "beobachtet",
  "quelle": "https://undercase.xyz/assets/css/main.min.css; https://static.linear.app/web/_next/static/css/BU_3mCEf.css"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Linear",
   "url": "https://linear.app/",
   "auszeichnung": "",
   "beobachtung": "Global --font-variations: 'opsz' auto; font-variation-settings: var(--font-variations); einzelne Utility-Klasse mit font-variation-settings: 'opsz' 28 (static.linear.app/…/BU_3mCEf.css).",
   "art": "website"
  },
  {
   "seite": "Undercase Type",
   "url": "https://undercase.xyz/",
   "auszeichnung": "",
   "beobachtung": "Fraunces mit gezielten opsz-Werten je Größe: Hero 'opsz' 144, 'wght' 500, 'SOFT' 0, 'WONK' 1; Navbar-Marke 'opsz' 70, 'wght' 600, 'SOFT' 16; Fließtext/Labels 'opsz' 9 (Inline-Style + assets/css/main.min.css).",
   "art": "website"
  },
  {
   "seite": "Clagnut (Richard Rutter)",
   "url": "https://clagnut.com/",
   "auszeichnung": "",
   "beobachtung": "body { font-optical-sizing: auto } im Default-Stylesheet (css/all.css).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN – font-optical-sizing",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing"
  }
 ],
 "kombinierbar_mit": [
  "editorial-magazin-layout"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/",
  "meta": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriften.json",
   "patch-luecken-b.json"
  ],
  "pruefnotizen": [
   "patch-luecken-b.json: Deckt den Auftrag ‚Variable-Font-Feinsteuerung (opsz)‘ ab (keine neue Dublette). Vorschlag für varianten: 1) font-optical-sizing: auto, 2) feste opsz-Werte je Stufe der Skala, 3) Zusatzachsen (SOFT, WONK, GRAD) als Marken-Signatur, 4) Achsen-Bündel als Custom Property (--font-variations) wie bei Linear. Animierte Achsen bleiben in variable-font-axes."
  ],
  "prioritaet_hinweis": "vorläufig gesetzt (Rohdaten ohne Priorität)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Neuheitenseite einer Hanauer Uhrenmanufaktur in einer einzigen Bodoni Moda: Titel mit Haarstrichen, Gravur auf dem Zifferblatt robust, gesteuert über die opsz-Achse.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "schrift": "Bodoni Moda, variabel (opsz 6–96, wght 400–900), normal und Italic; Labels Instrument Sans 500, .75rem, versal, letter-spacing .08em",
   "variante_automatisch": "font-optical-sizing: auto (Browser setzt opsz = Schriftgröße in px, begrenzt auf 6–96)",
   "variante_feste_stufen": "font-variation-settings: var(--font-variations); Display 'opsz' 96 'wght' 400 · Marke 48 / 500 · Vorspann und Zitat 32 / 400 · Ziffern 24 / 500 · Text 12 / 400 · Angaben und Gravur 6 / 500",
   "gegenprobe_text": "font-optical-sizing: none (Standardwert der Datei, opsz 11 überall)",
   "gegenprobe_display": "font-variation-settings: 'opsz' 96 überall",
   "groessen": "Titel clamp(3rem, 8.2vw, 7.25rem) / 1.0, -0.01em · Vorspann kursiv clamp(1.25rem, 2vw, 1.625rem) / 1.3 · Zitat clamp(1.75rem, 3.1vw, 2.75rem) / 1.12 · Text 1rem / 1.5 · Angaben 11px / 1.5 tabular-nums · Ziffern 8cqi · Gravur 2.3cqi, letter-spacing .3em",
   "lupe": "Kopie des Zifferblatts mit transform: scale(2.4); transform ändert die berechnete Schriftgröße nicht, die Lupe zeigt also die echte kleine opsz-Stufe",
   "uebergang_demo": "font-variation-settings per Web Animations 500ms cubic-bezier(0.1, 0.6, 0.4, 1); UI 150ms gleiche Kurve",
   "vorfuehrung_takt_ms": 2600,
   "farben": "#23282f Anthrazit · #ffffff Grund · #f4f4f2 Produktfläche · #676c73 Meta · #d9dadb Linien · #a88a5a Messing nur Linie und Messwerte (Messwerte auf Hell #84683c)"
  },
  "ausloeser": "klick",
  "touch": "Umschalter per Tippen mit 36 px hohen Knöpfen. Unter 720 px steht die Uhr unter dem Text, die Navigation ist ausgeblendet; die Messwerte an den Texten bleiben sichtbar.",
  "reduziert": "Varianten wechseln sofort ohne Achsen-Übergang, die Messwerte blitzen nicht auf. Die Technik selbst hat keine Bewegung.",
  "korrekturen": {
   "beschreibung": "Variable Schriften mit opsz-Achse haben für jede Größe einen eigenen Zuschnitt. Groß werden Haarstriche feiner und Abstände enger, klein werden Striche kräftiger, Punzen offener und die Laufweite weiter. Mit font-optical-sizing: auto wählt der Browser die passende Stufe selbst.",
   "warum_es_wirkt": "Eine einzige Schrift sieht in jeder Größe richtig aus: der Titel elegant und kontrastreich, der Fließtext robust und lesbar. So kann eine kontrastreiche Serif wie Bodoni auch klein eingesetzt werden, ohne dass Haarstriche wegbrechen.",
   "wann_einsetzen": "Editorial, Luxus, Kultur und Marken mit einer Serif, die vom großen Titel bis zur Fußnote reicht. Besonders bei Didonen und feinen Serifen wie Bodoni Moda, Fraunces, Newsreader oder Literata.",
   "wann_nicht": "Bei Schriften ohne opsz-Achse bringt es nichts. Bei Groteskschriften mit geringem Strichkontrast ist der Unterschied kaum sichtbar. Wer jeden Kilobyte zählt, sollte prüfen, ob die größere Variable-Datei sich lohnt.",
   "varianten": [
    "Automatisch: font-optical-sizing: auto (Clagnut, Linear)",
    "Feste Stufen je Größe der Skala, etwa Display 'opsz' 96 und Text 'opsz' 12 (Undercase)",
    "Zusatzachsen wie SOFT, WONK oder GRAD als Markensignatur (Undercase mit Fraunces)",
    "Alle Achsen gebündelt in einer Custom Property (Linear: --font-variations)"
   ],
   "umsetzung": "Variable Schrift mit opsz-Achse laden. Für die Automatik genügt font-optical-sizing: auto, das ist in den meisten Browsern schon Standard. Für feste Werte font-variation-settings: 'opsz' 96 nutzen. Weil font-variation-settings nicht kaskadiert und jede Regel alle Achsen ersetzt, alle Achsen gemeinsam in einer Custom Property führen (z. B. --font-variations: 'opsz' 96, 'wght' 400).",
   "mobil": "Mit der Automatik passt sich opsz von selbst an die kleineren Größen an. Feste Stufen gelten unabhängig von der Bildschirmbreite und müssen bei stark schrumpfenden Titeln eventuell angepasst werden.",
   "reduzierte_bewegung": "Nicht relevant, die Technik hat keine Bewegung.",
   "barrierefreiheit": "Optische Größen verbessern die Lesbarkeit kleiner Texte. Trotzdem Kontrast prüfen und Fließtext nicht unter 16 px setzen. Bei Vergrößerung über transform (Lupe, Zoom-Effekte) bleibt die kleine Stufe stehen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept luxus-manufaktur-stille, erfundene Uhrenmanufaktur Wendemuth in Hanau (Neuheit Belvedere Mondphase: Anthrazit und Weiß im Wechsel, Uhr als eigene CSS/SVG-Zeichnung, Werkstatt-Zitat, Datentabelle mit Tabellenziffern). Angefangene Demo fertiggebaut: Stadt auf Hanau umgestellt, Lupe auf 2,4-fach verkleinert, damit die Gravur ganz hineinpasst, Vorschau entschlackt. Bodoni Moda trägt hier bewusst auch Text und Angaben, damit die kleinen Stufen sichtbar werden; im Rezept steht dafür Instrument Sans. Umschalter Automatisch und Feste Stufen, Gegenproben opsz 11 und opsz 96 überall; Messmarken zeigen px und opsz je Element live. Referenzen: alange-soehne.com, h-moser.com, messika.com. AD-Review 01.11.2026: Note 5. Zugang 02.11.2026: --meta #8b9097 → #676c73 (5,3:1); Messwerte auf Weiß und Produktfläche in #84683c (Token --messing-text, 4,7:1), auf Anthrazit bleibt #a88a5a; Kontrastmodus-Rahmen für Knöpfe."
 }
}