Generatore Scala Tipografica
Anteprima scala
Codice
:root {
--text-xs: 0.5628rem; /* 9px */
--text-sm: 0.7502rem; /* 12px */
--text-base: 1rem; /* 16px */
--text-lg: 1.333rem; /* 21.33px */
--text-xl: 1.7769rem; /* 28.43px */
--text-2xl: 2.3686rem; /* 37.9px */
--text-3xl: 3.1573rem; /* 50.52px */
--text-4xl: 4.2087rem; /* 67.34px */
--text-5xl: 5.6102rem; /* 89.76px */
--text-6xl: 7.4784rem; /* 119.66px */
}Domande Frequenti
Tutto sulla tipografia e le scale modulari
Cos'è una scala tipografica?
Una scala tipografica è un insieme di dimensioni di testo proporzionalmente correlate tra loro tramite un rapporto fisso (ratio). Usare una scala coerente crea armonia visiva nel design, poiché ogni dimensione è matematicamente correlata alle altre.
Quale ratio scegliere?
Per interfacce digitali, il Perfect Fourth (1.333) e il Major Third (1.250) sono le scelte più comuni: offrono un contrasto visibile senza essere eccessivo. Il Golden Ratio (1.618) crea contrasti molto marcati, ideale per titoli e landing page. Minor Second (1.125) è sottile, per UI molto dense.
Come si usa l'output CSS?
Copia le variabili CSS nel tuo file di stile globale (es. `app.css`). Poi usale con `font-size: var(--text-lg)`. Per Tailwind, incolla la configurazione nel blocco `fontSize` del tuo `tailwind.config.js`.
¿Qué es una escala tipográfica?
Una escala tipográfica es un conjunto de tamaños de texto proporcionales relacionados entre sí mediante un ratio fijo. Usar una escala coherente crea armonía visual en el diseño.
¿Qué ratio elegir?
Para interfaces digitales, Perfect Fourth (1,333) y Major Third (1,250) son las elecciones más comunes: ofrecen un contraste visible sin ser excesivo. El Golden Ratio (1,618) crea contrastes muy marcados, ideal para títulos.
¿Cómo se usa la salida CSS?
Copia las variables CSS en tu archivo de estilo global (ej. `app.css`). Luego úsalas con `font-size: var(--text-lg)`. Para Tailwind, pega la configuración en el bloque `fontSize` de tu `tailwind.config.js`.