Tipografía VYBE
En gráficos en movimiento, el tipo suele ser el actor principal. Trátalo como metraje: tiene peso, escala, ritmo y una cámara.
Fuentes incluidas (OFL, en vybe/assets/fonts/, copiadas en cada proyecto)
| Familia | Carácter | Ideal para |
|---|---|---|
| Inter (variable 100–900) | neutral, preciso | estilo apple-minimal, corporativo, UI, subtítulos |
| Space Grotesk (300–700) | técnico, peculiar | científico, experimental, tecnología |
| Fraunces (serif variable) | cálido, literario, alto contraste | cinematográfico, documental, editorial |
| JetBrains Mono (100–800) | código, datos | etiquetas, números, apariencia de terminal |
| Anton (400, condensada) | llamativa, póster | tipografía cinética, ganchos para redes sociales |
| Orbitron (variable) | display sci-fi | títulos cyberpunk (solo palabras cortas) |
Cada familia nombrada necesita @font-face { src: url("assets/fonts/<archivo>.woff2") } en el archivo que la use (regla de HyperFrames). Para una fuente de marca de usuario: copia el archivo en assets/fonts/ y declárala de la misma manera; verifica que su licencia permita incrustación.
Combinaciones: Fraunces + Inter (cinematográfico) · Inter + JetBrains Mono (producto/tecnología) · Space Grotesk + JetBrains Mono (ciencia) · Anton + Space Grotesk (social/cinético) · Orbitron (solo títulos) + Space Grotesk (todo lo demás).
Reglas de legibilidad para video (aplicadas por las auditorías de hyperframes check)
- Tamaño mínimo de lectura: 2.6% del lado corto →
2.7cqmin(28 px en 1080p). Cuerpo 2.8–3.4cqmin; titulares 6–12cqmin; palabras héroe 15–34cqmin. - Tiempo de permanencia ≈ 0.3 s por palabra + 0.5 s; una línea final ≥ 2 s.
- ≤ 3.2 palabras en pantalla por segundo en una escena; ≤ ~10 palabras por línea.
- Contraste WCAG AA (4.5:1 cuerpo, 3:1 grande). Sobre imágenes, añade un filtro o sombra.
- Sin
<br>en el cuerpo del texto; usamax-width(ej.78cqw) y deja que fluya. Los títulos de presentación pueden romperse deliberadamente con bloques<span>por línea. - Tracking: aprieta en display grande (−0.02 a −0.05em), abre espacio en etiquetas en mayúscula pequeña (+0.2 a +0.5em). Nunca animar
letter-spacing(se corta) — esparce los glifos conx. - Zonas seguras: el video vertical mantiene el texto legible fuera del 12% superior, 22% inferior y 14% derecho.
Técnicas cinéticas
| Técnica | Cómo |
|---|---|
| De desenfoque a nitidez | palabras en spans inline-block, fromTo {opacity:0,y:30,filter:blur(14px)}, escalonar 0.12–0.16 |
| Slam | una palabra por golpe, scale 2.4 → 1 con back.out(1.6), el campo de color cambia detrás |
| Elevación con máscara | contenedor de línea overflow:hidden, texto interno yPercent 110 → 0 |
| Revelado desde el centro | clipPath: inset(0 50% 0 50%) → inset(0) |
| Propagación de glifos | desplazamientos x por letra hacia el centro colapsando a 0 |
| Máquina de escribir | clipPath con ease de steps(n), o conjuntos de opacidad por carácter |
| Eco de contorno | duplicar palabra con -webkit-text-stroke, relleno transparente, estela desplazada |
| Tipo como cámara | escalar/rotar la pila completa de palabras más allá del fotograma hacia la siguiente escena |
| Intercambio de palabras | apilar dos palabras en un cuadro fijo; sacar la vieja y entrar la nueva con yPercent |
| Resaltado | span inline-block .hl escala con back.out o una barra marcadora scaleX 0→1 detrás |
| Conteo ascendente | tabular-nums + onUpdate escribiendo Math.round(v) |
Subtítulos (sincronizados por palabra)
vybe audio inyecta <script type="application/json" id="vybe-captions"> con señales ({start, end, text, words:[{text,start,end}]}) y cada plantilla VYBE contiene un constructor de subtítulos que crea un elemento por señal e ilumina cada palabra en su start transcrito. Estilo según la marca:
- Posición dentro de la zona segura, sobre gráficos de tercio inferior, sin cubrir nunca al sujeto.
- 3–6 palabras por señal, máximo 2 líneas, 3–3.4cqmin, peso 600+, filtro o sombra.
- Resalta la palabra activa (opacidad 0.45 → 1, o color de acento mediante una clase).
- Redes sociales: mayúsculas, negrita, escala pop en cada señal; cinematográfico: minúscula oracional, fundido sutil.
- Nunca subtitular con tiempos de palabra estimados; la sincronización a nivel de línea debe verse como tal.