Deux critères suffisent pour centrer un bouton. Pas pour choisir une police UI

Un bouton peut recevoir exactement 12px de padding en haut comme en bas et avoir tout de même l'air trop bas. On retire un pixel, on en remet deux ailleurs, puis le composant recommence à pencher dès que la taille du texte change. Le CSS paraît fautif alors que le décalage peut déjà être inscrit dans la fonte.

Yep! Type propose une explication beaucoup moins mystique : regarder la boîte verticale de la fonte et la hauteur de ses minuscules avant de corriger le composant.1

Le billet recommande deux critères pour une police d'interface. D'abord, des métriques verticales où l'espace au-dessus des capitales et celui sous la ligne de base sont équilibrés. Ensuite, une x-height importante, environ 70 à 75 % de la hauteur des capitales, avec 75 % comme cible préférée par l'auteur.1

Ces deux règles transforment un problème visuel flou en quelque chose qu'on peut mesurer, et elles expliquent une partie du confort d'Inter dans les systèmes de design. Elles ne répondent toutefois qu'à la première question : est-ce que cette police tombe proprement dans nos composants ? Une police destinée à un vrai produit en rencontrera plusieurs autres.

Gate 1 : la boîte

Une fonte ne fournit pas seulement le dessin de H, x ou 8. Elle fournit aussi des métriques qui indiquent aux moteurs de rendu quelle hauteur réserver autour de ces dessins.

Si la capitale est visuellement beaucoup plus proche du haut de sa boîte que la baseline ne l'est du bas, un texte peut paraître décentré dans un bouton même lorsque le CSS applique un padding parfaitement symétrique. Yep! Type recommande donc des métriques « cap-centered » : quand on regarde le rectangle de texte, l'air au-dessus de la capitale ressemble à celui qui reste sous la baseline.1

Le test proposé est presque comiquement simple. Dans Figma, mettre le texte à 1000 px, réduire la line-height jusqu'à ce que la boîte rencontre les glyphes, puis regarder si le haut touche les capitales au même moment que le bas atteint la baseline.1 Pas besoin d'un plugin de typographie quantique, ce qui décevra forcément quelqu'un.

Cette règle n'est ni une norme d'accessibilité ni un certificat de « bonne fonte ». Elle sert surtout à supprimer une famille de corrections locales. Sur cinquante boutons, badges, onglets et champs, une boîte qui tombe naturellement juste évite de transporter le même padding-top: 1px dans tout le système.

Gate 2 : la lecture

La x-height mesure la hauteur du x minuscule par rapport à une référence de la fonte. Dans le billet, la comparaison est faite avec la hauteur des capitales : les dix alternatives retenues se situent entre 70 et 75 %.1

À taille CSS identique, une x-height élevée donne plus de présence aux minuscules. Un label en 13 ou 14 px peut ainsi paraître plus grand sans que font-size bouge d'un cran. Beaucoup de grotesques d'interface poussent cette proportion pour cette raison très banale : à petite taille, on lit surtout la masse des minuscules.

La shortlist de Yep! Type peut alors être lue pour ce qu'elle mesure réellement :

Yep! Type décrit aussi les dix familles comme possédant les métriques verticales recherchées.1 Le tableau ne classe donc pas les meilleures alternatives à Inter. Il conserve simplement les fontes qui passent les deux filtres choisis dans le billet.

Il ne faut pas transformer 75 % en nombre magique. Ce qui aide un petit label latin peut devenir trop massif dans un titre, moins agréable sur un texte long ou simplement peu pertinent dans un autre système d'écriture. Graisse, chasse, contraste et taille continuent de déplacer le résultat sous nos yeux.

Inter le reconnaît directement dans sa construction. La famille possède un axe de taille optique allant du texte au display. Sa variante orientée texte utilise notamment une x-height élevée et des détails destinés à maintenir le contraste à petite taille.2 Apple traite le même problème au niveau du système : SF Pro propose des tailles optiques variables et la plateforme peut appliquer automatiquement des comportements adaptés à la taille.4

Autrement dit, la proportion du x est un signal, pas tout le moteur de lisibilité.

Le CSS arrive

Le navigateur commence d'ailleurs à grignoter ce premier problème. Avec text-box-trim et text-box-edge, CSS peut rogner la boîte selon des repères typographiques au lieu d'accepter uniquement les métriques verticales embarquées dans la fonte.7 Un composant web dépend alors un peu moins du hasard d'un rectangle de texte bien élevé dès sa naissance.

Le support bouge vite. Le billet Yep! Type décrivait encore Firefox comme non compatible et avançait environ 79 % de couverture globale.1 Au 26 août 2026, Can I Use affiche environ 84,23 % d'usage global compatible et indique le support Firefox desktop à partir de la version 154.8 MDN classe néanmoins toujours text-box-trim en disponibilité limitée, hors Baseline.7 Firefox Android reste notamment en retard dans le tableau courant de Can I Use.8

Les métriques verticales ne deviennent pas inutiles pour autant. Le navigateur gagne progressivement un moyen de corriger la boîte ; la x-height et les formes des glyphes, elles, restent des propriétés de la fonte.

Gate 3 : les données

C'est ici que l'on quitte la belle rangée de boutons de la maquette.

Un produit finit par afficher des prix, des identifiants, des heures, des versions, des adresses IP, du code et des tableaux pleins de nombres. C'est souvent là qu'une police jusque-là impeccable révèle ses angles morts, parce que le test Hx n'a jamais demandé au 0, au O et au 8 de travailler ensemble.

Inter fournit des chiffres tabulaires, qui gardent une largeur constante et évitent qu'une colonne de nombres gigote lorsque 118 devient 902.2 La famille propose aussi un zéro barré et plusieurs jeux stylistiques destinés à distinguer des glyphes proches.2 Dans une interface dense, la différence entre 0 et O, ou entre 1, l et I, peut compter davantage qu'un demi-point de x-height.

Il faut également regarder les graisses réellement disponibles, les italiques, les variantes numériques et les features OpenType utilisées par le produit. Inter couvre les graisses de 100 à 900, possède une vraie italique et des alternances contextuelles en plus de ses tailles optiques.2

Rien de tout cela ne rend Inter automatiquement supérieur aux dix fontes du tableau. Nous n'avons pas vérifié, famille par famille, leurs jeux de chiffres, toutes leurs fonctions OpenType et leurs offres commerciales. Ce travail produirait surtout un catalogue de licences de fonderies, forme de vie déjà très présente dans les tableurs. Il suffit ici de constater que le test Hx ne couvre pas ces besoins.

Gate 4 : la portée

Le joli bouton Save peut enfin être parfaitement centré et devenir inutile dès que l'écran passe dans une langue que la fonte couvre mal.

Le site actuel d'Inter annonce plus de 2 000 glyphes et 147 langues.2 Sa licence SIL Open Font License 1.1 autorise l'usage, l'étude, la modification et la redistribution sous les conditions de l'OFL.3 Ce couple couverture + licence explique une partie de son confort opérationnel : on peut l'intégrer à un produit, la servir sur le web et la faire évoluer sans négocier une licence par siège de designer ou par volume de pages vues.

Les fontes système montrent une autre manière de résoudre le problème. Apple présente SF Pro comme la fonte système de ses plateformes, avec neuf graisses, quatre largeurs, des tailles optiques variables et plus de 150 langues dans les jeux latin, grec et cyrillique.4 Microsoft décrit Segoe UI comme une famille conçue pour l'écran et Segoe UI Variable comme une évolution utilisant la technologie variable pour améliorer notamment le rendu aux petites tailles.56

SF Pro et Segoe bénéficient ainsi d'une intégration de plateforme qu'une webfont indépendante ne peut pas reproduire à l'identique. Leur disponibilité et leur redistribution suivent en revanche un autre modèle que celui d'une fonte OFL que le produit peut embarquer lui-même.

À ce stade, « remplacer Inter » n'est plus une question de ressemblance. Une application internationale doit essayer ses vrais scripts, observer le fallback lorsqu'un glyphe manque, vérifier les métriques de cette seconde fonte et savoir si les fichiers peuvent légalement voyager sur chaque environnement ciblé.

Le test à quatre lignes

Le billet Yep! Type fournit un excellent premier filtre : il élimine rapidement les fontes qui promettent une collection de corrections manuelles dans les boutons.1 Ses dix alternatives deviennent alors un vrai point de départ, bien plus utile qu'une galerie « fonts like Inter » fondée seulement sur un air de famille.

IRZ ajouterait trois lignes sous le test Hx :

1. écrire 001279 88:11 1Il0O et vérifier les chiffres, les largeurs et les ambiguïtés ;
2. afficher les langues réellement prises en charge par le produit, pas seulement un pangramme anglais ;
3. lire la licence et vérifier comment la fonte sera distribuée dans le web, les apps et les fichiers de design.

Le quatrième contrôle, les petites tailles, traverse les trois autres : tester la fonte là où l'interface l'utilisera vraiment, sur les écrans et moteurs de rendu ciblés, plutôt qu'à 72 px dans une fiche de présentation.

Une maquette permet de choisir des formes ; un produit oblige à choisir un système typographique. C'est probablement une bonne partie de la banalité d'Inter : elle fonctionne dans le bouton, puis continue à enlever des problèmes lorsque l'interface commence à afficher des chiffres, changer de langue et quitter Figma.