Convertisseur de letter-spacing (tracking → CSS)

Convertissez le tracking Photoshop/Illustrator ou l'espacement en % de Figma en valeurs CSS em et px.

830 vues

Trois outils, trois unités

Les applications Adobe mesurent le tracking en millièmes d'em : em CSS = tracking ÷ 1000, donc un tracking de 50 → letter-spacing: 0.05em. Le pourcentage de Figma correspond simplement à em × 100 : 5 % = 0,05em. La valeur en px dépend en plus de la taille de police : 0,05em à 16 px = 0,8 px. Saisissez la valeur affichée par votre fichier de conception ; les autres se mettent à jour.

Préférez la sortie em en CSS — elle s'adapte à la taille de police, si bien que titres et légendes conservent un espacement proportionnel avec une seule règle. Plages typiques : −10 à −30 de tracking pour les grands titres d'affichage, +50 à +200 pour les petites étiquettes en majuscules.

Questions fréquentes

Figma affiche l'espacement en px — que faire ?

C'est alors déjà la valeur CSS en px ; saisissez-la dans le champ px avec la taille de police définie, et lisez l'équivalent em pour un CSS adaptable.

Pourquoi le texte en majuscules a-t-il besoin d'un tracking positif ?

Les capitales sont conçues pour être entourées de minuscules ; composées seules, elles paraissent tassées. +5 % à +15 % (tracking 50-150) est la solution classique pour les libellés tout en majuscules.

Outils similaires