Zo is KAPITAAL gebouwd

Een type-specimen waar het lettertype niet wordt getoond maar bespeeld. Geen 3D, geen canvas, geen framework: alles op deze site is HTML, CSS en een variabel font. De hele demo weegt minder dan een enkele foto.

Het font

KAPITAAL is een specimen rond Anybody van Etcetera Type Company, een open-source variabel lettertype met twee assen: gewicht (100 tot 900) en breedte (50 tot 150 procent). Eén woff2-bestand van 57 kB bevat alle achtduizend combinaties.

De interacties

• Hero: de muispositie wordt via een kleine lerp-loop vertaald naar font-variation-settings. Horizontaal stuurt breedte, verticaal gewicht. De uitlezing toont live de exacte aswaarden.
• As-secties: de scrollpositie van elke sectie stuurt de as van het demowoord. Scrollen is hier letterlijk aan het font draaien.
• Glyph-grid: alle tekens in een raster met harde 2px-randen; hover zet een cel in kobalt en duwt de glyph naar maximale breedte en gewicht.
• Type-tester: een textarea plus drie sliders en een cursief-schakelaar, direct gekoppeld aan de font-eigenschappen.

Het ontwerp

• Swiss-specimen traditie, punk uitgevoerd: 3px zwarte lijnen, blokken die van papier naar inkt wisselen, een marquee in signaalrood.
• Palet: papier #FAFAF7, inkt #0B0B0C, signaalrood #FF2B06, kobalt #1727F0.
• Eén font voor alles, van wordmark tot voetnoot. Een foundry hoort zijn eigen letter te dragen.
• prefers-reduced-motion stopt de marquee en de hero-lerp.

Credit

Site 03 van 25 in de Vormula demo-reeks. Concept, code en copy: Claude (Fable 5), in opdracht van Vormula Studio.