{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "meta-labels-hud-typografie", "name": "Meta-Labels & HUD-Typografie (Mikrotypo als Layout-Ebene)", "name_en": "Meta labels / HUD-style micro typography", "kurz": "Festivalseite eines Linzer Kulturhauses mit zweiter Textebene: fixierte Mono-Labels in den Ecken mit Live-Uhr, Scroll-Prozent und rollendem Abschnittszähler.", "kategorie": "Hero & Section-Layouts", "kategorie_slug": "hero-layouts", "kategorie_nr": 4, "bau_chat": "C2", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "website_belege": 4, "stimmung": [ "ruhig", "präzise" ], "stimmung_roh": [ "technisch", "präzise", "interface", "minimal" ], "technik": [ "css", "vanilla-js", "scroll-driven-css", "intl-datetimeformat" ], "technik_gruppen": [ "css", "js" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Neben der großen Display-Schrift liegt eine zweite, winzige Textebene in Mono oder kleiner Grotesk: Indexnummern (01/), Seitenfortschritt (0 %), Uhrzeit und Ort, Koordinaten, Projektkategorie, Scrollhinweis, Sektionscodes. Die Labels sitzen in den Ecken des Viewports oder an Rasterlinien, oft fixiert. Viele aktualisieren sich live: Zähler, Prozent, Uhr, aktiver Abschnitt. Klammern und Schrägstriche wie [ Tickets ] oder (03) markieren interaktive Elemente.", "warum_es_wirkt": "Der Kontrast zwischen riesiger und winziger Schrift gibt der Seite Präzision und Interface-Charakter. Die Labels ordnen den Raum, ohne Fläche zu verbrauchen, und zeigen, dass die Seite lebt (Uhr, Fortschritt). Viele Award-Seiten nutzen das als Markenzeichen, und es kostet fast nichts.", "wann_einsetzen": "Portfolios, Studios, Tech, Architektur, Kulturhäuser und Festivals: überall, wo ein systematischer Look gewünscht ist. Ergänzt fast jedes andere Muster, besonders sichtbare Raster und viewportbreite Schrift.", "wann_nicht": "Wenn die Labels nur Deko sind und Inhalte verdrängen. Bei warmen, emotionalen Marken, die keinen Interface-Look wollen. Nie für Kerninformationen, die in 11px zu klein wären.", "varianten": [ "Fixierte Ecken-Labels (Ort, Uhrzeit, Fortschritt)", "Indexzähler 01/04 für Abschnitte oder Projekte, hochgestellte Zähler wie Programm(31)", "Labels an Rasterlinien: sichtbare Spalten, Lineal, Koordinaten, Bildlegenden (Fig. 01)", "Eckige Klammern als Button-Sprache", "Mono-Metadatenzeilen in Listen (Datum, Uhrzeit, Raum)" ], "umsetzung": "Labels per position: fixed in die vier Ecken, Abstand zur Kante gleich dem Seitenrand des Rasters, dazu env(safe-area-inset-*). Fortschritt ohne JS: @property --p als , auf :root animiert mit animation-timeline: scroll(root), ausgegeben über counter-reset: p var(--p) und content: counter(p). Ohne scroll()-Unterstützung setzt JS --p. Uhrzeit per Intl.DateTimeFormat mit der timeZone des Hauses. Aktiven Abschnitt per IntersectionObserver an der Mittellinie (rootMargin -50% 0px -50% 0px) erkennen. Schrift 10 bis 12px Mono, versal, letter-spacing 0.02 bis 0.08em, tabular-nums. Mit mix-blend-mode: difference bleiben weiße Labels auf hellen und dunklen Abschnitten lesbar.", "mobil": "Auf ein bis zwei Labels reduzieren, zum Beispiel Marke und Ticket oder Menü, dazu höchstens den Index. Mindestgröße 12px, Tippfläche der Label-Links 44px.", "reduzierte_bewegung": "Live-Zähler, Uhr und Prozent dürfen bleiben. Einlauf- und Roll-Animationen entfallen, keine flackernden Scramble-Effekte.", "barrierefreiheit": "Rein dekorative Labels mit aria-hidden. Live-Uhr und Prozent nicht als aria-live auszeichnen. Navigation in Klammern bleibt echter Link mit Fokusrahmen. Mindestkontrast auch bei kleiner Schrift; bei mix-blend-mode über Bildern und Farbflächen prüfen." }, "messwerte": { "easing": "", "dauer_ms": "", "stagger_ms": "", "distanz": "Abstand zu Viewport-Kante = Seitenrand des Rasters (z. B. 16–24px)", "sonstiges": "Labels 10–12px, uppercase, letter-spacing 0.02–0.08em", "herkunft": "typisch", "quelle": "" }, "kurve": { "bezier": [ 0.215, 0.61, 0.355, 1.0 ], "css": "cubic-bezier(0.215, 0.61, 0.355, 1)", "name": "eigene Kurve", "dauer_ms": null }, "gesehen_bei": [ { "seite": "'kin (by-kin.com)", "url": "https://by-kin.com/", "auszeichnung": "laut hontran.dev Awwwards SOTD + Developer Award, FWA, CSSDA WOTD", "beobachtung": "Selbst abgerufen: Fortschrittsanzeige „0%“, Zähler „01/“, nummerierte Featured Works (01–03), Jahreszahl „2025“ als Label.", "art": "website", "browser_gemessen": true }, { "seite": "Vercel / Geist", "url": "https://vercel.com/design/grid", "auszeichnung": "", "beobachtung": "Blueprint-Stil mit Mono-Schrift (Geist Mono) laut setproduct.", "art": "artikel", "browser_gemessen": true }, { "seite": "K72", "url": "https://k72.ca/", "auszeichnung": "Awwwards Site of the Day, Developer Award, Mobile Excellence; Idéa Gold (laut Locomotive-Case-Study https://locomotive.ca/en/work/k72)", "beobachtung": "Live geprüft (HTML): Uhr im Menü-Footer .c-clock \"MONTREAL_\" + span[data-module-time] mit Live-Uhrzeit.", "art": "website", "browser_gemessen": true }, { "seite": "basement.studio", "url": "https://basement.studio/", "auszeichnung": "", "beobachtung": "Live geprüft (HTML): Navigationslinks mit hochgestellten Zählern (26), 12px/600, Nav-Hintergrund als 2px-Dither-Muster.", "art": "website", "browser_gemessen": true }, { "seite": "Stewart & Partners", "url": "https://www.stewartpartners.studio/", "auszeichnung": "", "beobachtung": "Live geprüft (HTML): Element .local-time mit Ortszeit.", "art": "website" } ], "tutorials": [], "kombinierbar_mit": [ "blueprint-raster-sichtbar", "schrift-hero-viewportbreit", "projektindex-hover-vorschau", "horizontal-scroll-section" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/hero-layouts/meta-labels-hud-typografie/", "meta": "https://cecodesign.de/lab/fundus/hero-layouts/meta-labels-hud-typografie/meta.json", "demo": "https://cecodesign.de/lab/fundus/hero-layouts/meta-labels-hud-typografie/demo" }, "herkunft": { "quelldateien": [ "layouts.json", "patch-belege-3.json" ], "pruefnotizen": [ "patch-belege-3.json: Drei Produktionsbelege; Awwwards-Seite entfernt." ], "kategorie_alt": "Section-Layout" }, "bau": { "status": "fertig", "kurz": "Festivalseite eines Linzer Kulturhauses mit zweiter Textebene: fixierte Mono-Labels in den Ecken mit Live-Uhr, Scroll-Prozent und rollendem Abschnittszähler.", "demo": true, "abhaengigkeiten": [], "werte": { "schrift_label": "IBM Plex Mono 500, 11px (Telefon 12px), versal, letter-spacing 0.06em, line-height 1.4, font-variant-numeric: tabular-nums", "schrift_meta_inhalt": "IBM Plex Mono 400, 0.8125rem/1.45, letter-spacing 0.02em, tabular-nums (Datum, Uhrzeit, Raum in Listen)", "schrift_display": "Schibsted Grotesk 900, clamp(4.25rem, 17.2vw, 16rem), line-height 0.8, letter-spacing -0.045em; Kontrast zu 11px Labels etwa 1:22", "abstand_kante": "20px (Telefon 16px) = Seitenrand des 12-Spalten-Rasters (Telefon 4 Spalten), Spaltenabstand 20px (Telefon 12px), plus env(safe-area-inset-*)", "ecken": "oben links Marke + Ort, oben rechts Navigation in Klammern, unten links Koordinaten + Live-Uhr, unten rechts Abschnittszähler 01/04 + Scroll-Prozent", "farbe_hud": "color #fff + mix-blend-mode: difference (dunkel auf #efede9, hell auf #0b0b0b)", "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", "einlauf_ms": 250, "einlauf_stagger_ms": 60, "einlauf_distanz": "translate 0 105% in einer overflow:hidden-Zeile", "abschnittswechsel_ms": 250, "abschnittswechsel": "altes Label nach -105%, neues von 105% (y), IntersectionObserver rootMargin -50% 0px -50% 0px", "klammer_hover_ms": 150, "klammer_hover_distanz": "je 3px nach außen (nur x)", "variantenwechsel_ms": 300, "fortschritt": "@property --p () + animation-timeline: scroll(root), Ausgabe counter(p, decimal-leading-zero); JS-Ersatz ohne scroll()", "uhr": "Intl.DateTimeFormat('de-AT', { timeZone: 'Europe/Vienna', hour, minute, second, timeZoneName: 'short' }), Takt 1000ms", "countdown": "bis 12.11.2026 20:00 (+01:00), Takt 1000ms", "farben": "#0b0b0b Text, #efede9 Grund, #5c5b58 leise; Sparten Musik #c4421a, Film #b0186b, Kunst #2f7d4a, Performance #3d5f9a", "telefon_tippflaeche": "Klammer-Link 11px 8px Innenabstand, etwa 44px hoch" }, "ausloeser": "scroll", "touch": "Nur zwei Labels: Marke oben links und [ Tickets ] oben rechts (44px Tippfläche); unten rechts je nach Variante Abschnittszähler oder Scroll-Prozent. Uhr, Koordinaten und Lineal entfallen, Labels 12px. Kein Hover; Antippen füllt die Klammer kurz.", "reduziert": "Labels stehen sofort ohne Einlauf, der Abschnittszähler wechselt ohne Rollen, Klammern bewegen sich nicht. Uhr, Countdown und Scroll-Prozent zählen weiter. Das Interferenzbild steht still; die Vorführung springt von Abschnitt zu Abschnitt statt zu scrollen.", "korrekturen": { "beschreibung": "Neben der großen Display-Schrift liegt eine zweite, winzige Textebene in Mono oder kleiner Grotesk: Indexnummern (01/), Seitenfortschritt (0 %), Uhrzeit und Ort, Koordinaten, Projektkategorie, Scrollhinweis, Sektionscodes. Die Labels sitzen in den Ecken des Viewports oder an Rasterlinien, oft fixiert. Viele aktualisieren sich live: Zähler, Prozent, Uhr, aktiver Abschnitt. Klammern und Schrägstriche wie [ Tickets ] oder (03) markieren interaktive Elemente.", "warum_es_wirkt": "Der Kontrast zwischen riesiger und winziger Schrift gibt der Seite Präzision und Interface-Charakter. Die Labels ordnen den Raum, ohne Fläche zu verbrauchen, und zeigen, dass die Seite lebt (Uhr, Fortschritt). Viele Award-Seiten nutzen das als Markenzeichen, und es kostet fast nichts.", "wann_einsetzen": "Portfolios, Studios, Tech, Architektur, Kulturhäuser und Festivals: überall, wo ein systematischer Look gewünscht ist. Ergänzt fast jedes andere Muster, besonders sichtbare Raster und viewportbreite Schrift.", "wann_nicht": "Wenn die Labels nur Deko sind und Inhalte verdrängen. Bei warmen, emotionalen Marken, die keinen Interface-Look wollen. Nie für Kerninformationen, die in 11px zu klein wären.", "varianten": [ "Fixierte Ecken-Labels (Ort, Uhrzeit, Fortschritt)", "Indexzähler 01/04 für Abschnitte oder Projekte, hochgestellte Zähler wie Programm(31)", "Labels an Rasterlinien: sichtbare Spalten, Lineal, Koordinaten, Bildlegenden (Fig. 01)", "Eckige Klammern als Button-Sprache", "Mono-Metadatenzeilen in Listen (Datum, Uhrzeit, Raum)" ], "umsetzung": "Labels per position: fixed in die vier Ecken, Abstand zur Kante gleich dem Seitenrand des Rasters, dazu env(safe-area-inset-*). Fortschritt ohne JS: @property --p als , auf :root animiert mit animation-timeline: scroll(root), ausgegeben über counter-reset: p var(--p) und content: counter(p). Ohne scroll()-Unterstützung setzt JS --p. Uhrzeit per Intl.DateTimeFormat mit der timeZone des Hauses. Aktiven Abschnitt per IntersectionObserver an der Mittellinie (rootMargin -50% 0px -50% 0px) erkennen. Schrift 10 bis 12px Mono, versal, letter-spacing 0.02 bis 0.08em, tabular-nums. Mit mix-blend-mode: difference bleiben weiße Labels auf hellen und dunklen Abschnitten lesbar.", "mobil": "Auf ein bis zwei Labels reduzieren, zum Beispiel Marke und Ticket oder Menü, dazu höchstens den Index. Mindestgröße 12px, Tippfläche der Label-Links 44px.", "reduzierte_bewegung": "Live-Zähler, Uhr und Prozent dürfen bleiben. Einlauf- und Roll-Animationen entfallen, keine flackernden Scramble-Effekte.", "barrierefreiheit": "Rein dekorative Labels mit aria-hidden. Live-Uhr und Prozent nicht als aria-live auszeichnen. Navigation in Klammern bleibt echter Link mit Fokusrahmen. Mindestkontrast auch bei kleiner Schrift; bei mix-blend-mode über Bildern und Farbflächen prüfen." }, "geprueft": "01.11.2026", "notiz": "Welt: Rezept kultur-programm-haltung, erfundenes Haus Werft Urfahr in Linz mit Festival Pegel 26 (Schibsted Grotesk, Atkinson Hyperlegible Next, IBM Plex Mono, Spartenfarben). Die HUD-Ebene liegt fixiert in vier Ecken: Marke, Klammer-Navigation, Koordinaten mit Live-Uhr (Europe/Vienna), Abschnittszähler 01/04 mit Rollwechsel und Scroll-Prozent rein in CSS. Umschalter Ecken, Index, Raster blendet die Ebenen schrittweise zu. Eigene Bildwelt: Interferenzbild aus 48 × 32 Punkten (Canvas) mit live berechnetem Pegel in dBFS, Spektrum als SVG. Dunkler Abschnitt zeigt die Invertierung per mix-blend-mode: difference. Vorführung scrollt selbst durch alle vier Abschnitte. Inspiration (nur Prinzip): Ecken-Labels bei Bailey Wade, Spielplan-Dichte bei Volksbühne und Experimental Jetset. AD-Review 01.11.2026: Note 5. Zugang 02.11.2026: Pause-Knopf „[ Bewegung anhalten ]“ (button, aria-pressed) als HUD-Label rechts über dem Interferenzbild, hält die Zeichenschleife an (gleich wie FUNDUS_DEMO.pause); bei reduzierter Bewegung und in der Vorschau aus; Telefon: eigene Zeile über „Fig. 01“. figure nicht mehr aria-hidden (sonst Knopf darin versteckt), Kinder einzeln aria-hidden. Titel unter 360 px 24vw statt 25vw. Offen: Kontrasttreffer der HUD-Labels sind Fehlalarme der Prüfung (weißer Text mit mix-blend-mode: difference erscheint auf dem hellen Grund fast schwarz); über mittleren Grautönen bleibt der Kontrast des Musters naturgemäß schwach." } }