FONTOM
Un laboratorio de tipografía generativa. Dibujas letras con celdas, las conviertes en una fuente con reglas y luego las compones y animas.
Una app de navegador en la que una letra es solo una cuadrícula de celdas y un estilo global decide en qué se convierten. Exporta fuentes reales, carteles y bucles animados.
Hecho con
Next.js · React · TypeScript · opentype.js · Clipper2 · Mediabunny
Qué es
FONTOM trata una tipografía como datos. Una letra solo guarda qué celdas de una cuadrícula están encendidas, y un estilo global decide en qué se convierten: píxeles, burbujas, uniones líquidas, biseles o un módulo que dibujas tú. Mueves un control y se redibuja todo el alfabeto.
Todo funciona en el navegador. Sin servidor y sin cuenta.
Cómo funciona
Hay tres capas. El glifo es la estructura de la letra. El estilo convierte las celdas en contornos para todas las letras a la vez: 12 formas de módulo, redondez, uniones, ruido, inclinación y espaciado. La composición es una pila de modificadores (repetir, girar, onda, radial, profundidad…) que convierte un texto en carteles y bucles, con fotogramas clave en una línea de tiempo.
Mide los astiles, las barras y las esquinas que has dibujado, así que con una H y una O basta para construir A–Z, a–z, 0–9 y la puntuación, acentos del castellano y del catalán incluidos. Todo lo aleatorio lleva semilla: los mismos ajustes dan siempre el mismo resultado.
- Next.js (exportación estática) · React · TypeScript
- OTF, WOFF y WOFF2 con opentype.js
- SVG animado, MP4 y fotogramas PNG
Desarrollo
De la v0.1 a la v0.4 en un día.
El editor, la composición generativa, la geometría avanzada y la animación, una versión tras otra.
Galería
