Polices sans empattements nettes pour les interfaces d’applications
Familles sans empattements sous licence libre qui restent lisibles dans les boutons, les menus, les tableaux et les écrans de réglages, avec les graisses dont une interface a besoin.
Save changes
Une interface demande plus à un caractère qu’un titre. L’essentiel de son texte est court et petit : libellés de 12 ou 13 pixels, cellules de tableau, lignes d’aide sous un champ. À ces tailles, ce qui compte, ce sont des ouvertures franches dans des lettres comme a, e et s, une hauteur d’x généreuse et des chiffres faciles à distinguer. Un I capital, un l minuscule et le chiffre 1 ne doivent pas se ressembler dans un champ de mot de passe.
La palette de graisses compte presque autant. Un produit a généralement besoin d’une Regular pour le texte courant, d’une Medium ou SemiBold pour les boutons et d’une Bold pour l’emphase, avec assez d’écart entre elles pour se voir d’un coup d’œil. Les familles à axe de graisse variable permettent de choisir des paliers précis plutôt que de se contenter du style nommé le plus proche. L’italique compte moins dans une interface que dans un article : quelques familles sans italique figurent donc ici, signalées comme telles. Si votre produit existe en plusieurs langues, vérifiez la couverture des systèmes d’écriture indiquée à côté de chaque famille avant de vous engager.
-
Inter
Dessinée pour les écrans, avec neuf graisses, des italiques et un axe de taille optique qui ajuste les lettres entre petites et grandes tailles.
-
Roboto
Neuf graisses avec italiques et un axe de chasse : une seule famille couvre tableaux denses, texte courant et grands titres.
-
Figtree
Conçue pour le web et les applications mobiles : sept graisses de Light à Black avec italiques sur un seul axe variable.
-
DM Sans
Lettres géométriques à faible contraste et axe de taille optique de 9 à 40, pour les libellés comme pour les titres.
-
Plus Jakarta Sans
Des contrepoinçons ouverts et des minuscules un peu hautes gardent les petits libellés lisibles ; sept graisses d’ExtraLight à ExtraBold avec italiques.
-
Manrope
Axe de graisse variable d’ExtraLight à ExtraBold, avec cyrillique et grec pour les produits multilingues ; styles droits uniquement.
-
IBM Plex Sans
Sept graisses avec italiques et un axe de chasse qui resserre les lettres pour les panneaux compacts.
-
Source Sans 3
Conçue comme une linéale d’interface : huit graisses d’ExtraLight à Black avec italiques, cyrillique et grec.
-
Work Sans
Réglée pour le texte à l’écran de 14 à 48 pixels, en neuf graisses variables avec italiques.
-
Ubuntu
Conçue pour une interface de bureau, avec un hinting réalisé à la main pour les écrans ; quatre graisses avec italiques.
-
Nunito Sans
Quatre axes variables, dont la taille optique et la hauteur des minuscules, permettent de régler la densité sans changer de famille.
-
Geist
Des minuscules hautes et des contrepoinçons qui restent ouverts même en Black gardent les libellés gras lisibles ; neuf graisses avec italiques et cyrillique.
-
Public Sans
Une linéale neutre conçue pour un système de design gouvernemental, en neuf graisses variables avec italiques.
-
Onest
À mi-chemin entre géométrique et humane, avec des lettres pensées pour rester bien distinctes dans les petits textes de navigation ; de Thin à Black avec cyrillique, styles droits uniquement.
-
Albert Sans
Des panses presque circulaires et des traits d’épaisseur quasi égale, en neuf graisses avec italiques ; latin uniquement, avec les lettres turques et polonaises complètes.
-
Be Vietnam Pro
Destinée aux produits technologiques, avec des diacritiques vietnamiens dessinés en priorité ; neuf graisses avec italiques en fichiers statiques.
-
Hanken Grotesk
Neuf graisses variables avec italiques, réglées pour la signalétique, le livre et les interfaces.
-
Wix Madefor Text
La version pour le texte d’un système typographique de produit, conçue pour les interfaces : cinq graisses avec italiques et cyrillique.
Les exemples chargent un sous-ensemble latin de base de chaque famille. Toutes les familles présentées ici sont sous licence libre ; leur page en indique les conditions et propose les fichiers originaux.
Questions sur polices sans empattements nettes pour les interfaces d’applications
Puis-je embarquer ces polices dans une application commerciale ?
Chaque famille de cette liste est sous licence libre, le plus souvent la SIL Open Font License, qui autorise l’usage dans des produits commerciaux et l’intégration dans des applications. Le texte de la licence accompagne chaque téléchargement ; consultez la page de la famille choisie pour ses conditions exactes.
Une interface doit-elle utiliser une police variable ou des fichiers statiques ?
Un fichier variable fournit toutes les graisses en un seul téléchargement et permet de régler des valeurs intermédiaires, utile quand un design system réclame un 450 ou un 550. Les fichiers statiques restent un bon choix si vous n’utilisez que deux ou trois graisses.
Faut-il de l’italique pour le texte d’interface ?
Rarement. Les interfaces s’appuient sur la graisse et la couleur pour mettre en valeur. L’italique devient utile quand le produit affiche des contenus longs, comme des articles ou de la documentation, dans la même famille.
Comment associer une linéale d’interface à une police de code ?
Plusieurs familles de cette liste ont une cousine à chasse fixe dessinée sur les mêmes proportions. Utiliser cette cousine garde la même hauteur et la même épaisseur de trait entre le texte et le code.