{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "tabellenziffern",
 "name": "Tabellenziffern für Preis- und Datenblöcke",
 "name_en": "Tabular numerals",
 "kurz": "Kostenseite einer Konstanzer Physiopraxis: Preise, Sprechzeiten und ein Serienrechner mit Tabellenziffern, die Kommas stehen untereinander und die Summe zappelt nicht.",
 "kategorie": "Typo-Techniken",
 "kategorie_slug": "typo-techniken",
 "kategorie_nr": 15,
 "bau_chat": "C1",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "präzise",
  "sachlich"
 ],
 "technik": [
  "css"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Tabellenziffern sind Ziffern mit gleicher Dickte: jede Ziffer nimmt gleich viel Breite ein. Mit font-variant-numeric: tabular-nums stehen Preise, Uhrzeiten und Kennzahlen sauber untereinander, und Zahlen, die sich ändern, verschieben den Text daneben nicht. Mono-Ziffern sind eine gestalterische Variante desselben Prinzips.",
  "warum_es_wirkt": "Gleich breite Ziffern machen Spalten vergleichbar: Komma unter Komma, Stelle unter Stelle. Das Auge liest Größenordnungen auf einen Blick. Bei Zählern, Summen und Uhren bleibt die Zeile ruhig, statt bei jeder Änderung zu springen. Das wirkt genau und vertrauenswürdig.",
  "wann_einsetzen": "Überall, wo Zahlen verglichen werden oder sich ändern: Preislisten, Tarife, Rechner, Warenkorb, Öffnungszeiten, Fahrpläne, Tabellen, Statistiken, Zähler, Countdowns und Diagramm-Legenden.",
  "wann_nicht": "In Fließtext und großen Überschriften wirken Tabellenziffern löchrig, weil die schmale 1 viel Luft um sich hat. Dort bleiben proportionale Ziffern. Schriften ohne tnum-Feature ignorieren die Angabe; dann hilft nur eine andere Schrift oder Mono-Ziffern.",
  "varianten": [
   "tabular-nums allein (Stripe, Zähler und Preise)",
   "lining-nums tabular-nums, dazu slashed-zero für eine eindeutige Null (Linear, Diagramm-Legenden)",
   "Mono-Ziffern als Gestaltungselement: Zahlen bewusst in einer Monospace-Schrift",
   "Gegenprobe proportional-nums für Fließtext und Headlines"
  ],
  "umsetzung": "Allen Zahlen eine Klasse geben und dort font-variant-numeric: lining-nums tabular-nums setzen, am besten über eine Custom Property, damit Zusätze wie slashed-zero nicht den ganzen Wert überschreiben. Preisspalten rechtsbündig mit gleich vielen Nachkommastellen setzen, dann stehen die Kommas untereinander. Vorher prüfen, ob die Schrift das Feature tnum hat (im Browser vergleichen oder mit wakamaifondue.com); font-feature-settings: 'tnum' nur als Rückfall.",
  "mobil": "Gilt unverändert. Auf schmalen Bildschirmen Spalten zusammenlegen, die Zahlenspalte aber rechtsbündig behalten.",
  "reduzierte_bewegung": "Nicht relevant, die Technik hat keine Bewegung. Sie beruhigt sogar Zahlen, die sich ändern.",
  "barrierefreiheit": "Bessere Lesbarkeit für Zahlenvergleiche. Zahlen als echten Text setzen, Tabellen mit th und scope auszeichnen. Ändernde Summen mit aria-live ansagen. Eine Null mit Strich hilft bei Verwechslung mit O."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "font-variant-numeric: tabular-nums (+ lining-nums, slashed-zero bei Linear)",
  "herkunft": "beobachtet",
  "quelle": "https://stripe.com/ ; https://linear.app/"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Stripe",
   "url": "https://stripe.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML + CSS): Hero-Zähler 'Global GDP running on Stripe' mit .tabular-nums--tight; Billing-Grafik '$0.01 per 1,000 units' und Zähler in tabular-nums--tight; weitere Regel font-feature-settings 'tnum' + font-variant-numeric tabular-nums (12 px).",
   "art": "website"
  },
  {
   "seite": "Linear",
   "url": "https://linear.app/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (CSS): Diagramm-Legenden .fFDhtq_key {font-variant-numeric: lining-nums tabular-nums}; Klasse mit 'lining-nums tabular-nums slashed-zero'.",
   "art": "website"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "zahlen-odometer",
  "preis-section-editorial"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/",
  "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriften.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): Auch auf Attio, Cursor, Resend, Vercel u. a. vorhanden – Standard bei Produkt-/SaaS-Seiten."
  ],
  "prioritaet_hinweis": "vorläufig gesetzt (Rohdaten ohne Priorität)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Kostenseite einer Konstanzer Physiopraxis: Preise, Sprechzeiten und ein Serienrechner mit Tabellenziffern, die Kommas stehen untereinander und die Summe zappelt nicht.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "tabellenziffern": "font-variant-numeric: lining-nums tabular-nums (über --ziffern an allen Zahlen, Klasse .z)",
   "gegenprobe": "font-variant-numeric: lining-nums proportional-nums (Standard von Google Sans Flex: 1 = .37em, 0 = .65em breit)",
   "null_mit_strich": "zuschaltbar: --null: slashed-zero, ergänzt den Wert zu 'lining-nums tabular-nums slashed-zero'",
   "mono_ziffern": "Geist Mono 450, font-size .9em, letter-spacing -.03em (Ziffern von Haus aus gleich breit)",
   "preisspalte": "text-align: right, Google Sans Flex 1.1875rem / 500, Währung 400 in Sekundärfarbe, 'ab' .8125rem",
   "summe": "Google Sans Flex clamp(2.6rem, 1.8rem + 2.2vw, 3.6rem) / 1, 500, letter-spacing -.02em, white-space: nowrap",
   "schriften": "Überschrift Hedvig Letters Serif 400, 'opsz' 24, clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem) / 1.06, -.015em; Text Google Sans Flex 1.0625rem / 1.6; Labels Geist Mono 11px versal, .14em",
   "uebergang": "UI 150ms cubic-bezier(0.2, 0, 0.38, 0.9); Hilfslinien und Kommamarken 250ms gleiche Kurve",
   "hilfslinien": "Achse an der Kommaposition der ersten Zeile, je Zeile eine 2 × 9 px Marke unter dem Komma, rot bei mehr als 0,5 px Versatz; Klammer über der Summe mit gemessener Breite",
   "vorfuehrung": "Runde mit 6 programmierten Klicks auf + im Takt 620ms (reduziert 900ms), Fango nach dem dritten Klick an; Ziffernart wechselt jede Runde zwischen proportional und tabellarisch",
   "farben": "#f5f7f7 Grund · #ffffff Seite · #005450 Marke · #00403d Überschrift · #363b3b Text · #596666 Sekundär · #ffc776 Akzent auf Petrol · #d9822b Hilfslinien · #c2412d Versatz",
   "fango": "eigenes Kontrollkästchen 18 px, Rand rgba(238,245,243,.6), angehakt #ffc776 mit Haken in #00403d, 150ms"
  },
  "ausloeser": "klick",
  "touch": "Umschalter, Stepper und Auswahl per Tippen; Stepper-Knöpfe 44 px, Auswahlzeilen mit 12 px Polster. Unter 600 px fällt die Spalte Dauer weg und steht als Unterzeile beim Namen, die Preisspalte bleibt rechtsbündig mit Kommamarken.",
  "reduziert": "Hilfslinien und Marken springen ohne Übergang an die neue Stelle; die Vorführung klickt langsamer (900ms). Die Technik selbst hat keine Bewegung.",
  "korrekturen": {
   "beschreibung": "Tabellenziffern sind Ziffern mit gleicher Dickte: jede Ziffer nimmt gleich viel Breite ein. Mit font-variant-numeric: tabular-nums stehen Preise, Uhrzeiten und Kennzahlen sauber untereinander, und Zahlen, die sich ändern, verschieben den Text daneben nicht. Mono-Ziffern sind eine gestalterische Variante desselben Prinzips.",
   "warum_es_wirkt": "Gleich breite Ziffern machen Spalten vergleichbar: Komma unter Komma, Stelle unter Stelle. Das Auge liest Größenordnungen auf einen Blick. Bei Zählern, Summen und Uhren bleibt die Zeile ruhig, statt bei jeder Änderung zu springen. Das wirkt genau und vertrauenswürdig.",
   "wann_einsetzen": "Überall, wo Zahlen verglichen werden oder sich ändern: Preislisten, Tarife, Rechner, Warenkorb, Öffnungszeiten, Fahrpläne, Tabellen, Statistiken, Zähler, Countdowns und Diagramm-Legenden.",
   "wann_nicht": "In Fließtext und großen Überschriften wirken Tabellenziffern löchrig, weil die schmale 1 viel Luft um sich hat. Dort bleiben proportionale Ziffern. Schriften ohne tnum-Feature ignorieren die Angabe; dann hilft nur eine andere Schrift oder Mono-Ziffern.",
   "varianten": [
    "tabular-nums allein (Stripe, Zähler und Preise)",
    "lining-nums tabular-nums, dazu slashed-zero für eine eindeutige Null (Linear, Diagramm-Legenden)",
    "Mono-Ziffern als Gestaltungselement: Zahlen bewusst in einer Monospace-Schrift",
    "Gegenprobe proportional-nums für Fließtext und Headlines"
   ],
   "umsetzung": "Allen Zahlen eine Klasse geben und dort font-variant-numeric: lining-nums tabular-nums setzen, am besten über eine Custom Property, damit Zusätze wie slashed-zero nicht den ganzen Wert überschreiben. Preisspalten rechtsbündig mit gleich vielen Nachkommastellen setzen, dann stehen die Kommas untereinander. Vorher prüfen, ob die Schrift das Feature tnum hat (im Browser vergleichen oder mit wakamaifondue.com); font-feature-settings: 'tnum' nur als Rückfall.",
   "mobil": "Gilt unverändert. Auf schmalen Bildschirmen Spalten zusammenlegen, die Zahlenspalte aber rechtsbündig behalten.",
   "reduzierte_bewegung": "Nicht relevant, die Technik hat keine Bewegung. Sie beruhigt sogar Zahlen, die sich ändern.",
   "barrierefreiheit": "Bessere Lesbarkeit für Zahlenvergleiche. Zahlen als echten Text setzen, Tabellen mit th und scope auszeichnen. Ändernde Summen mit aria-live ansagen. Eine Null mit Strich hilft bei Verwechslung mit O."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept praxis-gesundheit-ruhig, erfundene Praxis Loretto Physiotherapie in Konstanz. Kostenseite mit Selbstzahler-Preisliste (Alltagssprache, Fachbegriff als Unterzeile), Serienrechner auf Petrol und Sprechzeiten. Google Sans Flex hat proportionale Standardziffern mit tnum, lnum und zero; dadurch ist der Unterschied echt sichtbar. Hilfslinien messen die Kommaposition je Zeile und die Breite der Summe live. Umschalter Proportional, Tabellenziffern, Mono-Ziffern, dazu Null mit Strich. Rezeptschrift Hedvig Letters Serif hat kein tnum und steht deshalb nur in Überschriften. Referenzen: stripe.com, linear.app, hellobetter.de, onemedical.com. AD-Review 01.11.2026: Note 4 (Fango-Kästchen auf Petrol als eigenes Kontrollkästchen gestaltet, Modus-Etikett in der Vorschau größer). Zugang 02.11.2026: Hinweis im Rechner rgba(238,245,243,.66) → .74, Werte-Liste unter 600 px einspaltig (minmax(380px) erzwang Querscrollen), Terminknopf unter 360 px zweizeilig, Kontrastmodus-Rahmen für Knöpfe."
 }
}