Convertitore di Spaziatura tra Lettere (Tracking → CSS)
Converti il tracking di Photoshop/Illustrator o la spaziatura in % di Figma in valori CSS em e px.
1.139 visualizzazioni
Anteprima
TYPOGRAPHY SPACING EXAMPLE
Tre Strumenti, Tre Unità
Le app Adobe misurano il tracking in millesimi di em: em CSS = tracking ÷ 1000, quindi tracking 50 → letter-spacing: 0.05em. La percentuale di Figma è semplicemente em × 100: 5% = 0,05em. Il valore in px dipende inoltre dalla dimensione del font: 0,05em a 16 px = 0,8 px, ma lo stesso 0,05em a 48 px diventa 2,4 px. Inserisci il valore che mostra il tuo file di design; gli altri si aggiornano istantaneamente, così non devi mai fare i calcoli a mano quando passi una specifica da Figma a uno sviluppatore. Sketch e XD seguono la stessa logica basata sull'em di CSS, motivo per cui il campo em è di solito il più sicuro su cui standardizzare in una catena di strumenti di design mista.
Cose da Sapere
"Tracking" è un termine ereditato dalle macchine di fotocomposizione degli anni '60-'70, come i fogli a trasferimento a secco Letraset e le prime unità di fotocomposizione, dove regolare la spaziatura tra lettere significava spostare fisicamente i caratteri su una striscia di pellicola o un foglio di trasferimento. Viene spesso confuso con il kerning, ma i due non sono la stessa cosa: il tracking aggiunge una spaziatura uniforme su un'intera selezione di testo, mentre il kerning regola lo spazio tra una sola coppia specifica di lettere — come le forme che si sovrappongono in "AV" o "To" — per correggere uno spazio visivo scomodo che una spaziatura uniforme non può risolvere. In CSS c'è anche un'insidia pratica da conoscere: letter-spacing aggiunge spazio dopo ogni carattere, compreso l'ultimo, per cui un testo centrato o allineato a destra può apparire leggermente sbilanciato a causa di quello spazio finale invisibile di cui nessuno tiene conto. I valori di tracking negativi sono validi tanto quanto quelli positivi e sono comuni nei titoli molto grandi, dove la spaziatura predefinita comincia a sembrare eccessiva una volta che le lettere vengono ingrandite oltre il corpo per cui erano state pensate.
- Titoli display di grandi dimensioni: da −10 a −30 di tracking (stretti per un maggiore impatto visivo)
- Piccole etichette in maiuscolo: da +50 a +200 di tracking (aperti per migliorare la leggibilità)
- Testo del corpo: solitamente lasciato a 0 — la spaziatura predefinita è già calibrata dal type designer
- Loghi e wordmark: spesso regolati manualmente coppia per coppia, oltre ciò che un singolo valore di tracking può ottenere
Domande Frequenti
Figma mostra la spaziatura in px — e allora?
Allora è già il valore CSS in px; inseriscilo nel campo px con la dimensione del font impostata correttamente, e leggi l'equivalente in em per un CSS che si adatta correttamente a dimensioni di testo diverse. Figma in realtà supporta sia le percentuali sia i px per la spaziatura tra lettere a seconda delle impostazioni del file, quindi verifica quale usa il tuo design system prima di passare i valori allo sviluppo.
Perché il testo in maiuscolo ha bisogno di tracking positivo?
Le lettere maiuscole sono disegnate per stare comodamente accanto alle minuscole con i loro ascendenti e discendenti; composte da sole, senza minuscole a bilanciarle, risultano visivamente compresse. Da +5% a +15% (tracking 50-150) è la correzione classica per etichette tutte maiuscole, elementi di navigazione e testi introduttivi (eyebrow text), che apre le forme delle lettere quanto basta per leggerle comodamente a colpo d'occhio.
Qual è la differenza tra tracking e kerning?
Il tracking aggiunge una spaziatura uniforme su tutta una porzione di testo — una parola, una riga o un'intera selezione. Il kerning regola lo spazio tra una sola coppia di lettere adiacenti, come "AV" o "To", dove le forme altrimenti si sovrapporrebbero o lascerebbero uno spazio visivo strano. Anche CSS li gestisce separatamente: letter-spacing controlla il tracking, mentre font-kerning (di solito lasciato su "normal") controlla il kerning per coppia, ricavato dalla tabella di kerning integrata nel font.
Perché il testo centrato appare leggermente sbilanciato con letter-spacing applicato?
CSS letter-spacing aggiunge spazio dopo ogni carattere, incluso l'ultimo — una particolarità della specifica che coglie di sorpresa molti sviluppatori. Su testo centrato o allineato a destra, quello spazio finale invisibile sposta il centro visivo, facendo sembrare il testo leggermente spostato a sinistra rispetto a dove dovrebbe effettivamente stare. Una correzione comune è un piccolo margin-right negativo sull'elemento, all'incirca pari al valore di letter-spacing.
Da dove viene il termine "tracking"?
Risale alle attrezzature di fotocomposizione degli anni '60 e '70 — macchine come i fogli a trasferimento Letraset e le unità di fotocomposizione, dove regolare lo spazio tra i caratteri significava letteralmente spostarli fisicamente lungo una striscia di pellicola o un foglio di trasferimento. Il termine è sopravvissuto attraverso la composizione digitale ed è diventato infine la parola standard per la spaziatura tra lettere in strumenti come Photoshop e Illustrator, molto tempo dopo che le macchine fisiche a cui originariamente si riferiva erano scomparse.
Strumenti Simili
Segnala un Problema
Convertitore di Spaziatura tra Lettere (Tracking → CSS)
Commenti
Ancora nessun commento — scrivi il primo!