Typography Editor

L’editor tipografico offre un ambiente di sviluppo in tempo reale per le proprietà del font e l’output CSS. designer e sviluppatori frontend lo usano per testare scelte di font-family, pesi, dimensioni, interlinea e letter-spacing, confrontando i risultati tra breakpoint. Le input mappe alle regole tipografiche e forniscono un’anteprima fedele, consentendo aggiustamenti precisi prima di integrare la tipografia in un UI di prodotto.

Concettualmente lo strumento converte le selezioni dell’utente in regole CSS standard e in token. Supporta unità px e rem, converte le dimensioni usando una radice di font e genera un blocco CSS più una configurazione JSON strutturata per i design system. Supporto opzionale a font-variation-settings per font variabili.

A chi serve? UI designer, ingegneri frontend e responsabili di contenuti che puntano a una tipografia coerente su più piattaforme. Il valore unico risiede nel determinismo (unita, scale e fallback) e nell’esportabilità, che accorciano il passaggio tra design e implementazione e consentono esperimenti rapidi con scale tipografiche e spacing. Funzionalità principali: gruppi di input per font-family, peso, dimensione, line-height e letter-spacing; supporto opzionale per URL font; anteprima live; esportazione CSS; esportazione token JSON; preset responsive opzionali per breakpoint comuni. Casi d’uso: dashboard prodotto, siti di marketing, pagine prodotto e portali di documentazione.