Scala Tipografica
Genera una scala tipografica modulare per il tuo design. Scegli la dimensione base e il rapporto per creare dimensioni dei titoli perfettamente proporzionate.
Cos'è una scala tipografica modulare?
Una scala tipografica modulare è un insieme di dimensioni del font che seguono un rapporto matematico costante, come Terza Maggiore (1,25x) o Quarta Giusta (1,333x). Ogni livello da h1 a h6 è proporzionalmente più grande del precedente, creando una tipografia armoniosa e visivamente equilibrata.
Come scegliere il rapporto giusto
Rapporti più piccoli come Minor Second (1,067) creano scale compatte per interfacce dense. Rapporti maggiori come Perfect Fourth (1,333) o Sezione Aurea (1,618) creano contrasti drammatici per siti editoriali. Major Third (1,25) è un valore predefinito sicuro per la maggior parte delle dimensioni dello schermo.
Usare il CSS generato
Il pannello CSS genera proprietà personalizzate in :root (es. --text-h1) e selettori diretti per ogni livello di intestazione. Incollali nel tuo foglio di stile. Usa rem per un dimensionamento accessibile o px per dimensioni fisse.
Scala tipografica e accessibilità
Usare rem invece di px rende la tipografia scalabile con le preferenze di dimensione del font di sistema dell'utente, un aspetto importante dell'accessibilità. WCAG raccomanda che il testo possa essere ridimensionato fino al 200%. Una scala modulare con rem soddisfa automaticamente questo requisito.