Generatore di scale tipografiche
Type Scale Generator
Costruisce da una dimensione di base e da un rapporto una scala modulare di corpi e spaziature, esportabile come CSS o come token.
Costruisce una scala tipografica modulare a partire da una dimensione di base e da un rapporto, e mostra ogni passo alla sua dimensione reale con accanto i numeri che contano: rem, interlinea, spaziatura fra le lettere e — quello che decide se una dimensione è utilizzabile per il testo corrente — quanti caratteri stanno su una riga alla larghezza di colonna scelta. Dallo stesso rapporto ricava una scala di spaziature, allineata a una griglia da 4px.
Scala
Rapporto: 1.25
Spaziature dallo stesso rapporto
- space-14px
- space-24px
- space-38px
- space-48px
- space-58px
- space-612px
- space-716px
- space-820px
Agganciata a una griglia da 4px — la griglia che quasi ogni design system ha già, e uno spazio di 13px accanto a uno di 12px è solo rumore.
Anteprima
Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!
Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!
Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!
Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!
Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!
Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!
Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!
Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!
Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!
Il verde segna da 45 a 75 caratteri per riga — l’intervallo di Bringhurst per il testo latino, a cui l’hangul, che si scrive con gli spazi, somiglia più di quanto somigli al CJK a larghezza piena.
Esporta
Vuoi che una di queste dimensioni segua il viewport invece di procedere a scatti? Il calcolo delle dimensioni fluide trasforma due di queste in un solo clamp().
Come si usa
Impostare la dimensione di base
La dimensione del testo corrente, quasi sempre 16px. Tutto il resto è questa moltiplicata o divisa per il rapporto, quindi azzeccarla subito evita di dover riscegliere il rapporto più avanti.
Scegliere il rapporto: è questa la decisione
La seconda maggiore (1,125) è il valore predefinito prudente per un’interfaccia: anche otto passi restano in un intervallo sensato. La quarta giusta (1,333) è editoriale: tre passi sopra i 16px sono già 38px. La sezione aurea è famosa ed è troppo ripida per il testo di un’interfaccia. Ogni preset dice a che cosa serve; conviene scegliere in base all’intervallo necessario, non in base al nome.
Decidere quanti passi, e se arrotondare
I passi verso il basso servono per didascalie ed etichette, quelli verso l’alto per i titoli. «Esatto» conserva la geometria e dà pixel frazionari; l’arrotondamento a 1px o 2px dà numeri che una persona riesce a tenere a mente e rompe leggermente il rapporto. L’arrotondamento è la scelta abituale, e il valore esatto resta comunque mostrato accanto a quello arrotondato.
Impostare la larghezza della colonna e leggere i conteggi dei caratteri
Va digitata la larghezza della colonna in cui questo testo sta davvero. La cifra più a destra di ogni riga è il numero di caratteri per riga a quella larghezza, e diventa verde fra 45 e 75, l’intervallo con prove reali alle spalle per il testo corrente. Una dimensione che presa da sola sembra a posto e dà 110 caratteri per riga è la dimensione sbagliata per il corpo del testo.
Esportare i token
Variabili CSS, un blocco di tema Tailwind, SCSS o JSON. La scala delle spaziature esce insieme, così un solo incolla copre entrambe.
Domande frequenti
L’anteprima mostra il font che userò davvero?
No: viene disegnata con il font di questa pagina. Dimensioni, interlinee e spaziature sono reali, ma un carattere tipografico diverso ha un’altezza della x diversa, ed è l’altezza della x a decidere davvero quanto grandi appaiano 16px. L’anteprima va presa come verifica delle proporzioni, e la dimensione di base va confermata nel proprio prodotto.
Conviene usare tutta la scala?
No, e generare undici passi non è una ragione per usarne undici. Alla maggior parte delle interfacce servono quattro o cinque dimensioni. I passi in più esistono per vedere dove va a finire il rapporto e perché una dimensione che serve di rado abbia un valore definito invece di essere inventata sul momento.
Da dove vengono le interlinee e le spaziature fra le lettere?
Da una regola, non dal carattere tipografico scelto: l’interlinea cala al crescere della dimensione, la spaziatura si stringe sui passi grandi e si allarga leggermente su quelli piccoli. È il punto di partenza convenzionale ed è giusto abbastanza spesso da essere utile, ma un carattere condensato o un carattere coreano con blocchi sillabici alti vorranno numeri diversi. Si regola dopo aver guardato.
Perché la scala delle spaziature è allineata a 4px e quella tipografica no?
Perché l’occhio le legge in modo diverso. Un titolo da 17px accanto a uno da 18px è una gerarchia; uno spazio da 13px accanto a uno da 12px è rumore, ed è il tipo di rumore che sopravvive alla revisione e poi viene copiato. Quasi ogni sistema di design ha già una griglia da 4px, quindi la scala delle spaziature la incontra lì.
Può ricevere da
Calcolo delle dimensioni fluide
Fluid Size Calculator
Calcola l’espressione clamp() che fa variare una dimensione con continuità fra due larghezze di viewport.
Abbinamento di font
Font Pairing
Propone coppie di font per titoli e testo prese dagli stack di sistema, le fa vedere con il tuo testo e ti passa il CSS.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Calcolo delle dimensioni fluide
Fluid Size Calculator
Calcola l’espressione clamp() che fa variare una dimensione con continuità fra due larghezze di viewport.
Estrattore di token CSS
CSS Token Extractor
Tira fuori da un foglio di stile colori, spaziature, raggi e caratteri e propone un insieme di proprietà personalizzate.
Abbinamento di font
Font Pairing
Propone coppie di font per titoli e testo prese dagli stack di sistema, le fa vedere con il tuo testo e ti passa il CSS.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.