Was macht VYBE Typografie?
In der Bewegtbildgrafik ist Schrift oft der Hauptdarsteller. Behandle sie wie Filmmaterial: Sie hat Gewicht, Maßstab, Rhythmus und eine Kamera.
Gebündelte Schriftarten (OFL, in vybe/assets/fonts/, in jedes Projekt kopiert)
| Familie | Charakter | Geeignet für |
|---|---|---|
| Inter (variabel 100–900) | neutral, präzise | Apple-minimal, Corporate, UI, Untertitel |
| Space Grotesk (300–700) | technisch, verspielt | Wissenschaft, Experimente, Tech |
| Fraunces (variable Serife) | warm, literarisch, hoher Kontrast | Kinofilme, Dokumentationen, redaktionell |
| JetBrains Mono (100–800) | Code, Daten | Beschriftungen, Zahlen, Terminal-Look |
| Anton (400, kondensiert) | laut, Poster | Kinetische Typografie, Social-Media-Hooks |
| Orbitron (variabel) | Sci-Fi-Display | Cyberpunk-Titel (nur kurze Wörter) |
Jede benannte Familie benötigt @font-face { src: url("assets/fonts/<file>.woff2") } in der Datei, die sie verwendet (HyperFrames Lint). Eine benutzerdefinierte Markenschriftart: Kopiere die Datei in assets/fonts/ und deklariere sie auf die gleiche Weise; überprüfe, ob ihre Lizenz das Einbetten erlaubt.
Paarungen: Fraunces + Inter (Kinofilm) · Inter + JetBrains Mono (Produkt/Tech) · Space Grotesk + JetBrains Mono (Wissenschaft) · Anton + Space Grotesk (Social/Kinetisch) · Orbitron (nur Titel) + Space Grotesk (alles andere).
Lesbarkeitsregeln für Video (durchgesetzt von den Handwerksaudits hyperframes check)
- Minimale Lesegröße: 2,6 % der kurzen Seite →
2.7cqmin(28px bei 1080p). Fließtext 2,8–3,4cqmin; Überschriften 6–12cqmin; Hero-Wörter 15–34cqmin. - Haltezeit ≈ 0,3 s pro Wort + 0,5 s; eine Abschlusszeile ≥ 2 s.
- ≤ 3,2 on-screen Wörter pro Sekunde über eine Szene hinweg; ≤ ~10 Wörter pro Zeile.
- Kontrast WCAG AA (4,5:1 Fließtext, 3:1 groß). Über Bildmaterial einen Scrim oder Schatten hinzufügen.
- Kein
<br>in Fließtext;max-widthverwenden (z. B.78cqw) und umbrechen lassen. Display-Titel können bewusst mit block<span>s pro Zeile umbrochen werden. - Tracking: große Anzeige straffen (−0,02 bis −0,05em), kleine Versalien-Beschriftungen aufweiten (+0,2 bis +0,5em). Niemals
letter-spacinganimieren (es ruckelt) – Glyphen stattdessen mitxverteilen. - Sicherheitszonen: Vertikales Video hält Lesetext aus den oberen 12 %, unteren 22 % und rechten 14 % fern.
Kinetische Techniken
| Technik | Wie |
|---|---|
| Unschärfe-zu-scharf | Wörter in inline-block Spans, fromTo {opacity:0,y:30,filter:blur(14px)}, Staffelung 0,12–0,16 |
| Slam | Ein Wort pro Takt, scale 2.4 → 1 mit back.out(1.6), Farbfeld wechselt dahinter |
| Maskenaufzug | Zeilenwrapper overflow:hidden, innerer Text yPercent 110 → 0 |
| Aufdeckung von der Mitte | clipPath: inset(0 50% 0 50%) → inset(0) |
| Glyphen-Spreizung | Pro-Buchstabe x-Versätze zur Mitte hin zusammenfallend auf 0 |
| Schreibmaschine | clipPath-Einschnitt mit steps(n)-Easing oder pro-Zeichen Opazitätssets |
| Umriss-Echo | Wort duplizieren mit -webkit-text-stroke, transparente Füllung, versetzte Spur |
| Typ als Kamera | Das gesamte Wortstapel über den Bildrand hinaus skalieren/drehen in die nächste Szene |
| Wortwechsel | Zwei Wörter in einer festen Box stapeln; yPercent das alte raus und das neue rein |
| Hervorhebung | Inline-Block .hl Span skaliert mit back.out oder ein Marker-Balken scaleX 0→1 dahinter |
| Count-up | Tabellenziffern + onUpdate schreibt Math.round(v) |
Untertitel (wortgenau)
vybe audio injiziert <script type="application/json" id="vybe-captions"> Cues ({start, end, text, words:[{text,start,end}]}) und jede VYBE-Vorlage enthält einen Untertitelersteller, der ein Element pro Cue erzeugt und jedes Wort zu seinem transkribierten start aufleuchtet. Stil nach Marke:
- Position innerhalb der Sicherheitszone, oberhalb von Lower-Third-Grafiken, niemals das Motiv überdeckend.
- 3–6 Wörter pro Cue, maximal 2 Zeilen, 3–3,4cqmin, Gewicht 600+, Scrim oder Schatten.
- Hebe das aktive Wort hervor (Opazität 0,45 → 1, oder Akzentfarbe über eine Klasse).
- Social: Großbuchstaben, fett, Pop-Skalierung bei jedem Cue; Kinofilm: Satzfall, dezentes Einblenden.
- Niemals Untertitel mit geschätzten Wortzeitpunkten; Timing auf Zeilenebene muss wie Zeilenebene aussehen.