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`.
Was ist eine typografische Skala?
Es ist ein Satz von Schriftgrößen, die ein festes Verhältnis verbindet: Jede Größe entsteht aus der vorigen mal derselben Zahl. Heraus kommt eine Rangfolge, die geordnet aussieht.
Welches Verhältnis soll ich wählen?
Für Oberflächen funktionieren 1,25 und 1,333 gut und geben Kontrast, ohne zu übertreiben. Der goldene Schnitt von 1,618 erzeugt sehr deutliche Sprünge, die zu Überschriften und Präsentationsseiten passen.
Wie benutze ich die Skala in einem Projekt?
Die CSS-Variablen kommen in das globale Stylesheet und werden in den Regeln mit var aufgerufen. Für Tailwind fügt man den Block mit den Größen in die Konfiguration des Projekts ein.