Scala tipografica e font fluido (clamp)
Scegli la dimensione base e il rapporto per lo smartphone e per il computer. Lo strumento genera le dimensioni da h1 al testo piccolo, con clamp() perché il font cresca in modo graduale tra i due schermi.
Come si usaDimensioni dei font in armonia
Disponibile in: 
Scala tipografica e font fluido (clamp): a cosa serve
Scegli la dimensione base e il rapporto (dalla seconda minore al rapporto aureo) per lo smartphone e per il computer, e le larghezze di schermo di ciascuno. Lo strumento calcola le dimensioni di h1, h2, h3, h4, h5, testo e piccolo sui due schermi e costruisce il clamp() di ciascuna, in rem.
L’anteprima mostra il tuo testo in ogni dimensione, su smartphone o computer, e il CSS esce con variabili pronte.
Come si usa
- Scegli base e rapporto per smartphone e computer.
- Controlla l’anteprima di ogni livello.
- Copia le variabili CSS.
Quando usarlo
- Definire le dimensioni dei font di un nuovo sito.
- Titoli che si adattano allo smartphone senza media query.
- Creare la tipografia di un design system.
Domande frequenti
Cos’è una scala tipografica?
È una sequenza di dimensioni in cui ognuna è la precedente moltiplicata per lo stesso rapporto, come 1,25 (terza maggiore). I titoli risultano proporzionati tra loro e il sito appare più ordinato rispetto a dimensioni scelte a caso.
Come funziona clamp()?
clamp(minimo, preferito, massimo) fa crescere il font con la larghezza dello schermo (il valore preferito usa vw) senza superare i limiti. Così un titolo ha una dimensione sullo smartphone e un’altra sul computer, senza media query.
Perché usare rem?
In rem, le dimensioni rispettano l’impostazione della dimensione del font del browser dell’utente, importante per chi ingrandisce il testo per leggere meglio. Lo strumento usa 1rem = 16px.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.