Design / Tipografia

Generatore di scala tipografica (scala modulare per CSS e Tailwind)

Genera una scala tipografica modulare a partire da una dimensione base e da un rapporto, come 1,25 o la sezione aurea, visualizza ogni passaggio con il tuo testo e copia le dimensioni come proprietà personalizzate CSS o come configurazione Tailwind fontSize, in rem o px.

Generatore di scala tipografica (scala modulare per CSS e Tailwind): Ogni dimensione corrisponde alla base moltiplicata per il rapporto una volta per ogni passaggio: con 16 px e una terza maggiore, 1,25, i passaggi superiori sono 20, 25, 31,25, 39,06 e 48,83 px, mentre quelli inferiori sono 12,8 e 10,24 px. Le dimensioni sono elencate in px e rem e denominate come le dimensioni del testo di Tailwind, da xs a 4xl. Funziona al 100% localmente nel browser, senza caricare file sul server.

Categoria
Strumenti per sviluppatori
Esecuzioni
Nel browser
Costo
Gratuito · senza registrazione
Disponibilità
Pronto all'uso
Generatore di scala tipograficaElaborazione locale

Funziona interamente nel browser

4xl48,83 px · 3.0518 remThe quick brown fox
3xl39,06 px · 2.4414 remThe quick brown fox
2xl31,25 px · 1.9531 remThe quick brown fox
xl25 px · 1.5625 remThe quick brown fox
lg20 px · 1.25 remThe quick brown fox
base16 px · 1 remThe quick brown fox
sm12,8 px · 0.8 remThe quick brown fox
xs10,24 px · 0.64 remThe quick brown fox
:root {
  --step-5: 3.0518rem;
  --step-4: 2.4414rem;
  --step-3: 1.9531rem;
  --step-2: 1.5625rem;
  --step-1: 1.25rem;
  --step-0: 1rem;
  --step--1: 0.8rem;
  --step--2: 0.64rem;
}

Ogni livello è quello sottostante moltiplicato per il rapporto: con una base di 16 px e un rapporto di 1,25, le dimensioni superiori sono 20, 25 e 31,25 px, mentre quelle inferiori sono 12,8 e 10,24 px. I rapporti piccoli, come 1,125, sono adatti alle interfacce dense; quelli più grandi, come 1,5, danno maggiore contrasto ai titoli. I valori in rem presuppongono una dimensione radice predefinita del browser di 16 px.

Da dove derivano i nomi dei rapporti

I nomi sono intervalli musicali: una quinta giusta ha un rapporto di frequenza di 3 : 2, quindi una scala tipografica basata su 1,5 cresce nella stessa proporzione delle note distanti una quinta. La scala modulare di Tim Brown ha reso popolare questa idea per il web.

Il rapporto aureo, 1,618, produce salti molto ampi; è spiegato nel calcolatore del rapporto aureo.

Arrotondamento

I browser visualizzano dimensioni frazionarie in pixel, quindi 31,25 px va bene così com'è. Se un sistema di design richiede pixel interi, arrotonda ogni passaggio e mantieni i valori rem con quattro decimali, come fa lo strumento; converti gli altri valori con il convertitore da px a rem.

Come usarlo

  1. Inserisci la dimensione base e scegli un rapporto.
  2. Imposta quanti passaggi vuoi salire e scendere, poi visualizzali con il tuo testo.
  3. Copia le variabili CSS o la configurazione Tailwind.

Privacy e limitazioni

Tutto funziona nel browser.

Strumenti correlati

CSS clamp()Convertitore di unità CSSRapporto aureo

Domande frequenti

Quale rapporto dovrei usare?

Le interfacce con molto testo e gli schermi piccoli si adattano a rapporti delicati come 1,125 o 1,2; le pagine editoriali e le landing page possono usare valori da 1,333 a 1,618 per titoli più incisivi.

Perché usare rem?

Le dimensioni in rem seguono l'impostazione della dimensione dei caratteri del browser del lettore, quindi il testo aumenta per chi ha bisogno di visualizzarlo più grande. La conversione presuppone il valore predefinito di 16 px per la radice.

Posso rendere fluide le dimensioni?

Sì: prendi la dimensione minima e massima che vuoi per un passaggio e trasformale in un'espressione clamp() con il generatore CSS clamp.

Strumento gratuito · nel browser esecuzioni · senza account