{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "mono-labels-versal",
 "name": "Mono als Label- und Metaschrift (kleine Versalien)",
 "name_en": "Monospace labels / meta typography",
 "kurz": "Projektblatt eines Chemnitzer Architekturbüros, auf dem ein einziges Mono-Token alle Labels trägt: Navigation, Rubriken, Projektdaten, Planbeschriftung, Werkverzeichnis und Visitenkarte.",
 "kategorie": "Typo-Techniken",
 "kategorie_slug": "typo-techniken",
 "kategorie_nr": 15,
 "bau_chat": "C1",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 4,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "technisch",
  "präzise"
 ],
 "technik": [
  "css"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine Monospace-Schrift übernimmt alles, was beschriftet statt erzählt: Navigation, Rubriken, Datum, Zähler, Bildunterschriften, Tabellenköpfe. Sie steht in kleinen Versalien (10 bis 13 px) mit positiver Laufweite. Überschriften und Fließtext bleiben in der Grotesk oder Serif.",
  "warum_es_wirkt": "Mono trennt die Metaebene sichtbar vom Inhalt. Gleich breite Zeichen und Tabellenziffern wirken technisch und genau, wie Planköpfe oder Etiketten. Die Laufweite hält kleine Versalien lesbar und gibt ihnen Ruhe.",
  "wann_einsetzen": "Architektur, Software, Technik, Studios, Archive und Werkverzeichnisse: überall, wo viele kurze Angaben (Nummer, Ort, Jahr, Status) neben dem eigentlichen Inhalt stehen.",
  "wann_nicht": "Für Fließtext, lange Navigationspunkte oder ganze Sätze. Nicht bei warmen, verspielten oder sehr klassischen Marken, wo der technische Ton fremd wirkt. Nicht, wenn schon zwei andere Schriften im Spiel sind und Mono nur eine weitere Stimme wäre.",
  "varianten": [
   "Standard: 11 px, Laufweite +0,1 em, 500 (Clerk)",
   "Klein und weit: 9,5 px, +0,14 em (Warp)",
   "Kräftig für Knöpfe: 12 px, +0,1 em, 600 (Terminal Industries)"
  ],
  "umsetzung": "Ein Label-Token als Custom Properties festlegen (Familie, Größe, Laufweite, Gewicht) und für alle Meta-Elemente eine Klasse nutzen. Werte: font-size .625 bis .8125rem, letter-spacing +.08 bis +.14em, text-transform: uppercase, Gewicht 400 bis 600. Zahlen mit font-variant-numeric: tabular-nums. Gängige Schnitte sind Geist Mono, DM Mono oder Söhne Mono.",
  "mobil": "Die Größe bleibt gleich, unter 10 px wird es auf dem Telefon zu klein. Lange Labelzeilen umbrechen lassen oder kürzen, nicht verkleinern.",
  "reduzierte_bewegung": "Nicht relevant, die Technik hat keine Bewegung.",
  "barrierefreiheit": "text-transform statt Versalien im Quelltext schreiben, damit Screenreader normal vorlesen. Kontrast auch für die leise Labelfarbe prüfen (mindestens 4,5 : 1 bei dieser Größe). Labels nicht unter 10 px setzen und keine Informationen nur über das Label transportieren."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "font-size .625–.8125rem (10–13 px); letter-spacing +.08 bis +.14em",
  "sonstiges": "Mono-Schnitte: Söhne Mono, Geist Mono, DM Mono (Your Majesty)",
  "herkunft": "beobachtet",
  "quelle": "https://clerk.com/ ; https://www.warp.dev/ ; https://www.raycast.com/ ; https://terminal-industries.com/"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Clerk",
   "url": "https://clerk.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (CSS): .tag-1/.tag-2 {font-family var(--font-mono) (Söhne Mono); letter-spacing .1em; uppercase; font-size .6875rem bzw. .625rem; weight 500}.",
   "art": "website"
  },
  {
   "seite": "Warp",
   "url": "https://www.warp.dev/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (CSS): .stack-label {var(--mono); letter-spacing .14em; uppercase; 9.5px}; Mobile-Bar-Buttons .08em, 10px.",
   "art": "website"
  },
  {
   "seite": "Raycast",
   "url": "https://www.raycast.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (CSS): .DBt7hq_caption {font-family Geist Mono; uppercase; letter-spacing .5px; 10px}, .U5mb2W_tag Mono uppercase 14px.",
   "art": "website"
  },
  {
   "seite": "Terminal Industries",
   "url": "https://terminal-industries.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Inline-CSS): Buttons/CTAs in var(--font-mono) (Geist Mono), .75rem, weight 600, letter-spacing .1em, uppercase.",
   "art": "website"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "meta-labels-hud-typografie",
  "scramble-decode"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/",
  "meta": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriften.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): Sehr verbreitet; auch Your Majesty (DM Mono, .05rem) und Zentry (Roboto Mono, .02em) gefunden."
  ],
  "prioritaet_hinweis": "vorläufig gesetzt (Rohdaten ohne Priorität)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Projektblatt eines Chemnitzer Architekturbüros, auf dem ein einziges Mono-Token alle Labels trägt: Navigation, Rubriken, Projektdaten, Planbeschriftung, Werkverzeichnis und Visitenkarte.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "label_standard": "font: 500 .6875rem/1.35 'Geist Mono'; letter-spacing: .1em; text-transform: uppercase (11 px, wie Clerk)",
   "variante_klein": "font-size .59375rem (9,5 px), letter-spacing .14em, 500 (wie Warp)",
   "variante_kraeftig": "font-size .75rem (12 px), letter-spacing .1em, 600 (wie Terminal Industries)",
   "gegenprobe_grotesk": "gleiche Werte in Hanken Grotesk statt Geist Mono",
   "gegenprobe_eng": "Geist Mono 11 px, letter-spacing 0",
   "token": "Custom Properties --l-familie, --l-groesse, --l-laufweite, --l-gewicht am Seitencontainer; jedes Label nutzt nur diese vier",
   "ziffern": "font-variant-numeric: tabular-nums slashed-zero",
   "farben_label": "#231f20 aktiv, #76767a leise; auf #1f2323 rgba(244,245,245,.56)",
   "textschrift": "Hanken Grotesk 450, H1 clamp(2.441rem, 1.4rem + 3vw, 4.4rem) -0.03em, Lead clamp(1.125rem, 1rem + .35vw, 1.3rem) -0.012em / 1.45",
   "uebergang": "font-size und letter-spacing 250ms cubic-bezier(0.1, 0.6, 0.4, 1) (nur Demo-Ebene), Hover 250ms gleiche Kurve",
   "markierung": "Labels zeigen: outline 1px #0022ff, offset 2px, Hintergrund rgba(0,34,255,.05)",
   "vorfuehrung_takt_ms": 2200,
   "farben": "#ffffff Grund · #f3f4f4 Planfläche · #e1e3e3 Linien · #231f20 Text · #76767a Meta · #1f2323 Footer · #0022ff Fokus und Markierung"
  },
  "ausloeser": "klick",
  "touch": "Umschalter per Tippen mit 36 px hohen Knöpfen. Unter 640 px stehen Text und Zeichnung untereinander, die Zeichnung zeigt nur jede zweite Maßzahl und die Höhenkoten ohne Namen, die Liste verliert Ort und Typologie.",
  "reduziert": "Varianten und Markierung wechseln sofort ohne Übergang. Die Technik selbst hat keine Bewegung.",
  "korrekturen": {
   "beschreibung": "Eine Monospace-Schrift übernimmt alles, was beschriftet statt erzählt: Navigation, Rubriken, Datum, Zähler, Bildunterschriften, Tabellenköpfe. Sie steht in kleinen Versalien (10 bis 13 px) mit positiver Laufweite. Überschriften und Fließtext bleiben in der Grotesk oder Serif.",
   "warum_es_wirkt": "Mono trennt die Metaebene sichtbar vom Inhalt. Gleich breite Zeichen und Tabellenziffern wirken technisch und genau, wie Planköpfe oder Etiketten. Die Laufweite hält kleine Versalien lesbar und gibt ihnen Ruhe.",
   "wann_einsetzen": "Architektur, Software, Technik, Studios, Archive und Werkverzeichnisse: überall, wo viele kurze Angaben (Nummer, Ort, Jahr, Status) neben dem eigentlichen Inhalt stehen.",
   "wann_nicht": "Für Fließtext, lange Navigationspunkte oder ganze Sätze. Nicht bei warmen, verspielten oder sehr klassischen Marken, wo der technische Ton fremd wirkt. Nicht, wenn schon zwei andere Schriften im Spiel sind und Mono nur eine weitere Stimme wäre.",
   "varianten": [
    "Standard: 11 px, Laufweite +0,1 em, 500 (Clerk)",
    "Klein und weit: 9,5 px, +0,14 em (Warp)",
    "Kräftig für Knöpfe: 12 px, +0,1 em, 600 (Terminal Industries)"
   ],
   "umsetzung": "Ein Label-Token als Custom Properties festlegen (Familie, Größe, Laufweite, Gewicht) und für alle Meta-Elemente eine Klasse nutzen. Werte: font-size .625 bis .8125rem, letter-spacing +.08 bis +.14em, text-transform: uppercase, Gewicht 400 bis 600. Zahlen mit font-variant-numeric: tabular-nums. Gängige Schnitte sind Geist Mono, DM Mono oder Söhne Mono.",
   "mobil": "Die Größe bleibt gleich, unter 10 px wird es auf dem Telefon zu klein. Lange Labelzeilen umbrechen lassen oder kürzen, nicht verkleinern.",
   "reduzierte_bewegung": "Nicht relevant, die Technik hat keine Bewegung.",
   "barrierefreiheit": "text-transform statt Versalien im Quelltext schreiben, damit Screenreader normal vorlesen. Kontrast auch für die leise Labelfarbe prüfen (mindestens 4,5 : 1 bei dieser Größe). Labels nicht unter 10 px setzen und keine Informationen nur über das Label transportieren."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept architektur-ruhiges-raster, erfundenes Büro Haubold Krenz Architekten in Chemnitz, Projektblatt zur Umnutzung einer Strumpfwirkerei (Südansicht als eigenes SVG mit Achsen, Höhenkoten und Maßketten, Projektdaten, Werkverzeichnis, Visitenkarte). Abweichung vom Rezept: Geist Mono als zweite Familie neben Hanken Grotesk, weil das Muster sie verlangt; die Rezept-Signatur meta-labels-hud-typografie stützt das. Planbeschriftung ist HTML über dem SVG, damit sie das Label-Token in echter px-Größe erbt. Umschalter drei gemessene Varianten plus Gegenproben Grotesk und ohne Laufweite, Knopf Labels zeigen markiert jedes Label. Vorführung: Markierung, Gegenproben, Varianten im Wechsel. Referenzen: stewartpartners.studio, herzogdemeuron.com, big.dk. AD-Review 01.11.2026: Note 5. Zugang 02.11.2026: Fokusring .lbl:focus-visible (2px Blau, Abstand 3px): die transparente Haarlinie von .lbl überschrieb vorher den globalen :focus-visible-Ring bei Navigation und Links."
 }
}