Convertisseur de letter-spacing (tracking → CSS)
Convertissez le tracking Photoshop/Illustrator ou l'espacement en % de Figma en valeurs CSS em et px.
1 137 vues
Aperçu
TYPOGRAPHY SPACING EXAMPLE
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, mais ce même 0,05em à 48 px devient 2,4 px. Saisissez la valeur qu'affiche votre fichier de conception ; les autres se mettent à jour instantanément, si bien que vous n'avez jamais besoin de faire le calcul à la main en transmettant une spécification de Figma à un développeur. Sketch et XD suivent la même logique basée sur l'em que CSS, ce qui explique pourquoi le champ em est généralement le plus sûr pour standardiser dans une chaîne d'outils de conception mixte.
Bon à savoir
« Tracking » est un terme hérité des machines de photocomposition des années 1960-70, comme les planches de transfert à sec Letraset et les premiers photocomposeurs, où ajuster l'espacement des lettres consistait à déplacer physiquement la position des caractères sur une bande de film ou une feuille de transfert. On le confond souvent avec le kerning, mais les deux ne sont pas identiques : le tracking ajoute un espacement égal sur toute une sélection de texte, tandis que le kerning ajuste l'espace entre une seule paire de lettres précise — comme les formes qui se chevauchent dans « AV » ou « To » — pour corriger un vide visuel gênant qu'un espacement uniforme ne peut pas résoudre. En CSS, il existe aussi un piège pratique à connaître : letter-spacing ajoute de l'espace après chaque caractère, y compris le tout dernier, si bien qu'un texte centré ou aligné à droite peut sembler légèrement déséquilibré à cause de cet espace final invisible dont personne ne tient compte. Les valeurs de tracking négatives sont tout aussi valides que les positives et sont courantes sur les très grands titres, où l'espacement par défaut commence à paraître lâche dès que les lettres sont agrandies au-delà de leur corps d'origine.
- Grands titres d'affichage : −10 à −30 de tracking (resserré pour l'impact visuel)
- Petites étiquettes en majuscules : +50 à +200 de tracking (ouvert pour la lisibilité)
- Texte courant : généralement laissé à 0 — l'espacement par défaut est déjà réglé par le concepteur de la police
- Logotypes et signatures de marque : souvent ajustés lettre par lettre, au-delà de ce qu'une seule valeur de tracking peut atteindre
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 correctement, et lisez l'équivalent em pour un CSS qui s'adapte bien entre différentes tailles de texte. Figma prend en fait en charge à la fois le pourcentage et le px pour l'espacement des lettres selon les réglages du fichier, donc vérifiez lequel utilise votre système de conception avant de transmettre les valeurs au développement.
Pourquoi le texte en majuscules a-t-il besoin d'un tracking positif ?
Les capitales sont dessinées pour cohabiter confortablement avec des minuscules ayant hampes et jambages ; composées seules, sans minuscules pour les équilibrer, elles paraissent visuellement tassées. +5 % à +15 % (tracking 50-150) est la solution classique pour les étiquettes tout en majuscules, les éléments de navigation et les textes d'accroche, ouvrant suffisamment les formes des lettres pour une lecture confortable au premier coup d'œil.
Quelle est la différence entre tracking et kerning ?
Le tracking ajoute un espacement uniforme sur toute une portion de texte — un mot, une ligne ou une sélection entière. Le kerning ajuste l'espace entre une seule paire de lettres adjacentes, comme « AV » ou « To », dont les formes se chevaucheraient sinon ou laisseraient un vide visuel étrange. CSS les traite aussi séparément : letter-spacing contrôle le tracking, tandis que font-kerning (généralement laissé sur « normal ») contrôle le kerning par paire, tiré de la table de kerning intégrée à la police elle-même.
Pourquoi un texte centré paraît-il légèrement décalé avec letter-spacing appliqué ?
Le letter-spacing en CSS ajoute de l'espace après chaque caractère, y compris le dernier — une particularité de la spécification qui surprend beaucoup de développeurs. Sur un texte centré ou aligné à droite, cet espace final invisible déplace le centre visuel, donnant l'impression que le texte est poussé légèrement vers la gauche par rapport à sa position réelle. Une correction courante consiste à appliquer une petite marge négative (margin-right) sur l'élément, à peu près égale à la valeur du letter-spacing.
D'où vient le terme « tracking » ?
Il remonte aux équipements de photocomposition des années 1960-70 — des machines comme les planches de transfert Letraset et les unités de photocomposition, où ajuster l'espace entre les caractères signifiait littéralement déplacer physiquement leur trajet (« track ») sur une bande de film ou une feuille de transfert. Le terme a survécu à la composition numérique et est finalement devenu le mot standard pour l'espacement des lettres dans des outils comme Photoshop et Illustrator, bien après la disparition des machines physiques qu'il décrivait à l'origine.
Outils similaires
Signaler un problème
Convertisseur de letter-spacing (tracking → CSS)
Commentaires
Pas encore de commentaires — soyez le premier à en écrire un !