FONTOM
Un laboratori de tipografia generativa. Dibuixes lletres amb cel·les, les converteixes en una font amb regles i després les compons i les animes.
Una app de navegador on una lletra és només una quadrícula de cel·les i un estil global decideix en què es converteixen. Exporta fonts reals, cartells i bucles animats.
Fet amb
Next.js · React · TypeScript · opentype.js · Clipper2 · Mediabunny
Què és
FONTOM tracta una tipografia com a dades. Una lletra només guarda quines cel·les d'una quadrícula estan enceses, i un estil global decideix en què es converteixen: píxels, bombolles, unions líquides, bisells o un mòdul que dibuixes tu. Mous un control i es redibuixa tot l'alfabet.
Tot funciona al navegador. Sense servidor i sense compte.
Com funciona
Hi ha tres capes. El glif és l'estructura de la lletra. L'estil converteix les cel·les en contorns per a totes les lletres alhora: 12 formes de mòdul, rodonesa, unions, soroll, inclinació i espaiat. La composició és una pila de modificadors (repetir, girar, ona, radial, profunditat…) que converteix un text en cartells i bucles, amb fotogrames clau en una línia de temps.
Mesura les astes, les barres i les cantonades que has dibuixat, així que amb una H i una O n'hi ha prou per construir A–Z, a–z, 0–9 i la puntuació, accents del català i del castellà inclosos. Tot el que és aleatori porta llavor: els mateixos ajustos donen sempre el mateix resultat.
- Next.js (exportació estàtica) · React · TypeScript
- OTF, WOFF i WOFF2 amb opentype.js
- SVG animat, MP4 i fotogrames PNG
Desenvolupament
De la v0.1 a la v0.4 en un dia.
L'editor, la composició generativa, la geometria avançada i l'animació, una versió rere l'altra.
Galeria
