Generatore di Scala Tipografica con CSS clamp() Fluido | We.Inc
Genera una scala tipografica modulare da una dimensione base e un rapporto, con valori clamp() fluidi per ogni step, un'anteprima live e variabili CSS o Tailwind da copiare.
Generatore di Scala Tipografica
Una scala tipografica moltiplica ripetutamente una dimensione base del font per uno stesso rapporto, così ogni dimensione dei titoli è in relazione con il testo del corpo. Scegli una base e un rapporto per i telefoni e altri per i desktop; questo generatore trasforma ogni step in un valore clamp() in rem e vw che cresce in modo fluido tra le due larghezze.
Rapporti comuni e a cosa si adattano
Rapporto
Valore
Effetto
Seconda minore
App dense, dashboard
Seconda maggiore
App dense, dashboard
Terza minore
Articoli, pagine marketing
Terza maggiore
Articoli, pagine marketing
Quarta giusta
Articoli, pagine marketing
Quarta aumentata
Poster, landing page d'impatto
Quinta giusta
Poster, landing page d'impatto
Sezione aurea
Poster, landing page d'impatto
La maggior parte degli strumenti per scale tipografiche fornisce un unico insieme fisso di dimensioni. Questo ne fornisce due, una scala per schermi piccoli e una per schermi grandi, e le unisce con clamp(), così pubblichi una sola regola per step invece di una pila di media query.
Perché due rapporti
Un rapporto che sembra generoso su un monitor da 1440 pixel fa andare a capo i titoli su quattro righe su un telefono. Usare un rapporto più stretto sugli schermi piccoli, come 1.2, e uno più ampio su quelli grandi, come 1.25 o 1.333, mantiene i titoli incisivi su desktop e leggibili su mobile.
Gli step sotto lo zero funzionano allo stesso modo al contrario: la base viene divisa per il rapporto, ottenendo dimensioni per didascalie e note in piccolo che restano proporzionate.
Come vengono calcolati i valori clamp()
Per ogni step lo strumento conosce la dimensione alla larghezza piccola e a quella grande. Traccia una retta tra questi due punti: la pendenza diventa la parte in vw e lo scostamento iniziale diventa la parte in rem del valore preferito.
clamp(min, preferred, max) mantiene poi la dimensione al minimo sotto la larghezza piccola e al massimo sopra la larghezza grande. Mescolare rem nel valore preferito è importante: una dimensione solo in vw ignora lo zoom del browser, mentre la parte in rem cresce comunque quando qualcuno ingrandisce.
MDN consiglia che, quando clamp() imposta la dimensione del testo, il massimo sia almeno il doppio del minimo, così il testo può arrivare allo zoom del 200 percento, il livello di ridimensionamento WCAG 1.4.4. Un intervallo fluido moderato da solo non lo soddisfa, quindi prova i tuoi step più grandi con lo zoom del browser al 200 percento.
Imposta la dimensione del font radice (16, a meno che il tuo CSS non cambi la dimensione di html) e le larghezze di viewport stretta e ampia.
Scegli una dimensione base e un rapporto per ciascun estremo. Valori uguali danno una scala fissa; valori diversi ne danno una fluida.
Scegli quanti step sopra e sotto la base ti servono. La maggior parte dei siti ne usa quattro o cinque sopra e uno o due sotto.
Trascina il cursore della larghezza dell'anteprima per vedere ogni step a qualsiasi dimensione di schermo, poi copia le variabili CSS o il blocco theme di Tailwind.
Parti con il testo del corpo tra 16 e 18 pixel; scendere sotto rende faticosa la lettura lunga sui telefoni.
Riduci l'interlinea man mano che la dimensione cresce: circa 1.5 per il testo del corpo e da 1.1 a 1.2 per i titoli grandi dà un aspetto equilibrato.
Raramente servono più di sei step. Se due step sembrano quasi uguali nell'anteprima, eliminane uno.
Dai alle variabili il nome dello step, non dell'elemento (step-3 invece di h2), così il titolo di una card può usare la dimensione di un heading senza creare confusione.
Domande frequenti
Qual è un buon rapporto per una scala tipografica?
Per siti con molto testo, 1.2 (terza minore) o 1.25 (terza maggiore) sono scelte sicure. 1.333 (quarta giusta) si adatta alle pagine marketing con titoli brevi e d'impatto. Rapporti da 1.5 in su creano salti grandi che funzionano per i poster ma producono presto titoli enormi.
La sezione aurea va bene per la tipografia?
Con circa 1.618 è molto ripida: cinque step sopra 16px superano già 170px. Può funzionare per una scala display di due o tre step, ma la maggior parte delle interfacce si legge meglio con un rapporto più piccolo.
Perché usare rem più vw invece di solo vw?
Il testo dimensionato solo in vw non risponde allo zoom del testo del browser, e questo penalizza chi ingrandisce il testo. La parte in rem nel valore preferito mantiene funzionante lo zoom, mentre vw gestisce la crescita fluida tra le larghezze.
Posso usare l'output con Tailwind CSS?
Sì. Tailwind v4 crea una utility text-* da ogni variabile --text-* dentro un blocco @theme, quindi incollando l'output Tailwind ottieni classi come text-step-2 nel tuo markup.
Usare la scala nel tuo CSS
Un esempio pratico: base di 16px a 375px che sale a 18px a 1280px, rapporto 1.2 che sale a 1.25.
Step come custom property
Ogni step è un solo clamp(). Applicali agli elementi, o a classi utility, insieme all'interlinea per ogni step.
Risultato live
Le stesse variabili in una piccola pagina. Modifica il codice per provare altri valori; il riquadro è stretto, quindi vedi l'estremo per schermi piccoli.
Nomi dei rapporti e valori esatti
I nomi musicali derivano dai rapporti di frequenza degli intervalli; ogni valore qui è la frazione esatta arrotondata a tre decimali.
Rapporti con nome
Nome
Frazione
Valore
Cinque step sopra 16px
Seconda minore
Seconda maggiore
Terza minore
Terza maggiore
Quarta giusta
Quarta aumentata
Quinta giusta
Sezione aurea
Crea la tua scala
Imposta una dimensione base e un rapporto per uno schermo piccolo e per uno schermo ampio. Ogni step riceve un valore clamp() che cresce in modo fluido tra le due larghezze, più un'anteprima live e CSS da copiare.
Seconda minore
Seconda maggiore
Terza minore
Terza maggiore
Quarta giusta
Quarta aumentata
Quinta giusta
Sezione aurea
Dimensione del font radice (px)
Larghezza stretta (px)
Larghezza ampia (px)
Step sopra la base (max 8)
Dimensione base alla larghezza stretta (px)
Dimensione base alla larghezza ampia (px)
Rapporto alla larghezza stretta
Rapporto alla larghezza ampia
Step sotto la base (max 4)
Testo di anteprima
Ma la volpe col suo balzo ha raggiunto il quieto Fido