Scala tipografica

scala modulare · type fluido · custom properties

Definisci dimensione minima e massima per ogni livello e ottieni la formula clamp() corretta con anteprima su viewport differenti. Variabili CSS pronte per il foglio di stile del tema.

Parametri scala
Dimensione base 16px
Step sopra la base
Step sotto la base
Root font-size
Formato output
Prefisso variabile
Rapporto (ratio)
Ratio personalizzato
Anteprima font

                                    

                                    

                                        

                                    

                                

                            

                        

                    


                    

                        
La tipografia fluida con CSS clamp() rappresenta l'approccio moderno alla gestione delle dimensioni del testo nei layout responsive: invece di definire font-size per ogni breakpoint, si specifica un range minimo-massimo e il browser interpola linearmente il valore in base alla larghezza del viewport.
Questo generatore ti permette di:
  • Definire dimensioni minima e massima per H1, H2, H3, H4, H5, H6 e testo corpo
  • Calcolare automaticamente la formula clamp() corretta con il coefficiente di scala fluido
  • Visualizzare l'anteprima della scala su diverse larghezze di schermo
  • Esportare le variabili CSS custom pronte per il file di stile del tema
Particolarmente utile nel workflow Figma → WordPress: il designer lavora su un frame desktop fisso, ma il tema deve scalare su mobile. Con una scala generata automaticamente si elimina la necessità di definire ogni valore per ogni breakpoint.
Come usare la scala modulare
  • Scegli il ratio (es. quarta giusta 1,333 o sezione aurea 1,618) in base al ritmo che vuoi tra i livelli.
  • Imposta dimensione base e quanti step sopra/sotto generare.
  • L’output può essere in rem, px, rem con commento px, oppure clamp() già pronto.
  • Copia il blocco :root nella tua foglia di stile o scarica il file .css.
Combinare scala modulare e type fluido aiuta a mantenere gerarchie coerenti su qualsiasi viewport.