Polices variables : piloter les axes depuis les styles React Native

Plusieurs variations dans un même fichier de police

La documentation Text Style Props sur la branche next (nouvelle fenêtre) décrit fontVariationSettings. La propriété permet de préciser les axes d’une police variable, avec une forme objet telle que { wght: 500 } ou une chaîne inspirée de CSS. Les axes courants incluent le poids (wght), la largeur (wdth) et la taille optique (opsz). Leur présence dépend du fichier de police chargé.

L’intérêt est de conserver une même famille tout en ajustant plus finement son dessin. Un titre condensé et un libellé de bouton peuvent employer des valeurs différentes sans imposer une collection de fichiers pour chaque combinaison. Cela ne rend pas tous les axes disponibles dans toutes les fontes : un axe absent ne devient pas réel parce qu’il figure dans le style.

La mesure du texte reste une contrainte de mise en page

Modifier la largeur ou le poids peut déplacer les retours à la ligne. Dans un onglet, un badge ou un bouton à largeur limitée, la typographie change donc aussi la géométrie. Un écran qui repose sur une hauteur de texte fixe peut tronquer un contenu après une simple variation d’axe.

Un usage raisonnable consiste à définir quelques valeurs de design explicites — texte courant, titre, accent — puis à observer leurs dimensions avec les langues de l’application et l’agrandissement du texte. Une interpolation continue peut être intéressante pour une interaction, mais elle mérite une intention visuelle claire.

Au 23 septembre, le lien pointe vers les docs next. Pour une application sur une version stable antérieure, la présence de cette page ne suffit pas à garantir que le style existe dans le binaire installé. Cette distinction évite de transformer une expérimentation typographique en dépendance implicite à une version de React Native.