Styles de texte CSS dans Figma : line-height, letter-spacing et mise en forme par segment

Réponse courte

Les styles de texte CSS correspondent à des propriétés de texte de Figma, mais les modèles diffèrent. L'interligne vaut Auto, des pixels ou un pourcentage de la taille de police dans Figma, alors que CSS accepte normal, un nombre sans unité, une longueur ou un pourcentage. Le letter-spacing ajoute de l'espace à l'espacement par défaut de la police en CSS, et Figma l'applique à un calque entier ou à une sélection. La mise en forme en ligne, comme le gras, les liens et la couleur, devient des segments (runs) distincts à l'intérieur d'un seul calque de texte. Cette page montre comment chaque élément se traduit et quoi vérifier après un import.

Line height : Auto, px et pourcentage dans Figma, quatre formes en CSS

Ce que Figma enregistre

Par défaut, Figma règle l'interligne sur Auto, calculé à partir de l'interligne par défaut de la police. Vous pouvez aussi définir une valeur fixe en pixels (px) ou un pourcentage de la taille de police. Quand vous passez d'une valeur fixe à un pourcentage, Figma convertit la valeur au pixel le plus proche, si bien qu'un aller-retour peut décaler une valeur d'une fraction de pixel.

Le code des plugins voit les mêmes trois options : un LineHeight est { value, unit: "PIXELS" }, { value, unit: "PERCENT" } ou { unit: "AUTO" }, comme le définit la documentation des plugins Figma.

Ce que CSS peut exprimer

La référence MDN sur line-height énumère quatre formes :

Le tableau compare la valeur une fois résolue par le navigateur. Ce n'est pas une promesse sur la façon dont un outil donné convertit.

Pourquoi l'héritage compte

Un nombre sans unité est recalculé sur chaque élément qui l'hérite, à partir de la taille de police de cet élément. Une longueur ou un pourcentage est d'abord transformé en longueur absolue, et les descendants héritent de cette longueur fixe. L'exemple de MDN le rend concret : un h1 de 30px avec line-height: 1.1 obtient 33px, mais le même h1 qui hérite de 1.1em d'un parent de 15px obtient 16.5px.

Deux titres peuvent paraître identiques dans le navigateur et se résoudre pourtant en des nombres différents. Lisez la valeur résolue dans les outils de développement, pas la règle que vous croyez appliquée.

Quoi vérifier

• Comparez l'interligne résolu d'un titre et d'un paragraphe de corps avec la valeur dans Figma.
• Attendez-vous à ce qu'Auto diffère de normal quand la police change, car les deux dépendent de la police.
• Si les nombres concordent mais que les lignes paraissent différentes, vérifiez d'abord la police.

Letter spacing : de l'espace en plus, pas un remplacement

En CSS, letter-spacing précise un espace supplémentaire entre les caractères, en plus de l'espacement par défaut. Le mot-clé normal n'est pas équivalent à 0 : il permet au navigateur d'ajuster l'espacement pour justifier le texte. Les pourcentages sont calculés par rapport à la largeur du caractère espace de la police, et les valeurs négatives sont permises, mais le navigateur peut les limiter.

Deux conséquences comptent dans un fichier de design :

• Les ligatures sont désactivées. Quand letter-spacing n'est pas nul, les navigateurs n'appliquent pas les ligatures facultatives comme liga et clig. Un texte qui affiche une ligature avec 0 peut ne plus l'afficher une fois le tracking défini.
• Les valeurs très négatives font se chevaucher les lettres. MDN avertit que de grandes valeurs négatives peuvent rendre les mots méconnaissables, alors vérifiez à l'œil les titres très serrés.

Figma permet d'ajuster l'espacement des lettres pour un calque de texte entier ou pour une sélection de texte. Son article d'aide donne un repère de conversion : une unité de tracking (1/1000em) équivaut à peu près à 0.001em de letter-spacing en CSS. Si vous sélectionnez du texte avec des espacements différents, Figma met l'espacement à l'échelle de façon proportionnelle.

Pour tester, choisissez une étiquette en majuscules et un paragraphe de corps. Les étiquettes portent souvent un tracking positif, donc un écart apparaît d'abord là.

Un calque de texte, plusieurs segments

Un segment (run) est une suite de caractères qui partagent le même style. CSS crée des segments partout où un élément en ligne change le style : un <strong>, un <a>, un <span style="color: ...">. Dans Figma, un seul calque de texte peut contenir de nombreux segments.

L'API de plugins de Figma expose chaque segment sous la forme d'un StyledTextSegment, avec ses propres fontName, fontSize, fontWeight, textDecoration, textCase, lineHeight, letterSpacing, fills et hyperlink, ainsi que paragraphSpacing. C'est pourquoi un paragraphe peut contenir un mot en gras, une expression liée et un chiffre coloré sans devenir quatre calques.

Valeurs mixtes

Quand les caractères d'un calque ne s'accordent pas sur une propriété, Figma n'a pas de valeur unique à afficher. La documentation des plugins indique qu'il faut toujours considérer qu'une propriété de texte peut avoir des valeurs mixtes, et l'API renvoie la valeur spéciale figma.mixed. Dans l'interface, le champ affiche Mixed. Sélectionnez une plage plus petite pour voir la valeur de chaque segment.

Certaines propriétés s'appliquent aussi à des sélections. La décoration du texte (souligné, barré) et la casse (majuscules, minuscules, capitalisation, petites capitales) peuvent s'appliquer au texte sélectionné, et le changement de casse n'est pas destructif. L'espacement des paragraphes est une valeur en pixels.

Les polices décident de l'effet de vos styles de texte

L'interligne Auto et la largeur des glyphes viennent de la police. Si la police du fichier n'est pas celle de la page, tous les nombres ci-dessus peuvent être justes et le texte peut quand même passer à la ligne autrement. La documentation des plugins de Figma note que les polices manquantes sont très courantes dans les fichiers réels, et qu'une police non chargée n'est pas la même chose qu'une police absente.

Quand un import remplace une police, considérez l'interligne et le letter-spacing comme non vérifiés tant que la police n'est pas corrigée. Dans UnHTML, chaque substitution figure dans le rapport d'import. Pour la mécanique, lisez comment fonctionne la substitution de polices dans Figma, et pour des chiffres, la substitution de polices dans les imports du web vers Figma.

Quoi vérifier après un import

Commencez par le plus grand texte et descendez :

1. Titres. Comparez l'interligne et le letter-spacing résolus avec Figma. Les titres serrés révèlent les deux.
2. Texte de corps. Un line-height sans unité comme 1.6 devrait se lire 160% ou la valeur px équivalente.
3. Étiquettes en majuscules. Vérifiez le tracking et la casse.
4. Segments en ligne. Cliquez dans un paragraphe contenant un lien ou un mot en gras et confirmez que la plage, et non le calque entier, porte le style.
5. Polices. Résolvez d'abord les polices substituées, puis revérifiez les étapes 1 à 3.
6. Retours à la ligne. Un texte qui passe à la ligne autrement pointe le plus souvent vers la largeur ou l'auto layout, comme expliqué dans flexbox devenant auto layout.

En 2026, ce sont les comportements documentés de Figma. UnHTML produit des calques modifiables, pas un clone exact au pixel, donc utilisez cette liste comme une vraie passe de revue.

Conclusion

L'interligne, le letter-spacing et les segments ont chacun un modèle différent en CSS et dans Figma. Comparez la valeur CSS résolue avec la valeur Figma, attendez-vous à ce qu'Auto et normal bougent avec la police, et vérifiez des plages plutôt que des calques entiers. Commencez par les polices, car la plupart des écarts de texte naissent là. Avancez étape par étape : la police, puis l'interligne, puis l'espacement des lettres, puis chaque segment. Vous saurez ainsi tout de suite où un écart est apparu.

Questions fréquentes

Pourquoi l'interligne importé est-il différent de celui de la page ?

Le line-height CSS peut valoir normal, un nombre sans unité, une longueur ou un pourcentage, et Figma enregistre Auto, des pixels ou un pourcentage de la taille de police. Le résultat dépend de la police et de la façon dont la valeur a été héritée sur la page. Comparez la valeur résolue dans les outils de développement avec celle de Figma.

Le letter-spacing se convertit-il un pour un ?

Pas à l'œil. Le letter-spacing CSS est de l'espace ajouté à l'espacement par défaut de la police, souvent écrit en em ou en px. Le conseil de Figma assimile 1/1000em de tracking à 0.001em en CSS. Vérifiez la valeur sur un titre d'essai.

Un calque de texte peut-il contenir des styles différents ?

Oui. Un calque de texte Figma peut porter plusieurs segments, chacun avec sa propre police, sa taille, son interligne, son espacement des lettres, sa décoration et sa couleur. Sélectionnez une plage pour voir ou modifier un seul segment.

Que signifie Mixed dans un champ de texte ?

Cela signifie que les caractères sélectionnés ne partagent pas une seule valeur pour cette propriété. Sélectionnez une plage plus petite pour voir chaque valeur.