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'est-ce qu'une échelle typographique?
Une échelle typographique est un ensemble de tailles de texte proportionnellement liées les unes aux autres par un ratio fixe. L'utilisation d'une échelle cohérente crée une harmonie visuelle dans le design.
Quel ratio choisir?
Pour les interfaces numériques, la Perfect Fourth (1,333) et la Major Third (1,250) sont les choix les plus courants: elles offrent un contraste visible sans être excessive. Le Golden Ratio (1,618) crée des contrastes très marqués, idéal pour les titres.
Comment utiliser la sortie CSS?
Copiez les variables CSS dans votre fichier de style global (ex. `app.css`). Puis utilisez-les avec `font-size: var(--text-lg)`. Pour Tailwind, collez la configuration dans le bloc `fontSize` de votre `tailwind.config.js`.