Font : typographie claire et cohérente dans l’app

Publié le 2026-10-11 · Mis à jour le 2026-10-11

Font influence la lisibilité, la hiérarchie, l’identité visuelle, la performance et la localisation d’une application. Ce guide explique comment construire un système typographique cohérent, choisir les polices adaptées, organiser les tailles, gérer le responsive et le multilingue, optimiser le chargement et tester avec du contenu réel.

Construire d’abord un système typographique

Commencez par définir les rôles du texte : titre de page, titre de section, paragraphe, label, bouton, tableau, message d’erreur, légende, nombre et métadonnée. Chaque rôle doit avoir un niveau de hiérarchie et un style réutilisable. Lorsque chaque écran invente sa propre combinaison de taille et de graisse, la lecture devient moins prévisible et la maintenance plus difficile. Un petit ensemble de styles documentés est généralement plus puissant qu’une longue liste d’exceptions locales. Il donne aux designers et aux builders une référence commune pour décider rapidement quel style appliquer.

Séparez hiérarchie et décoration. Un titre doit paraître important grâce à sa taille, son poids, son espace et sa position, pas parce que chaque page utilise une police différente. Transformez les décisions en tokens ou variables : body, small, label, subtitle, section heading, page heading et display. Une modification globale devient alors contrôlable. Si la taille du body doit évoluer ou si le produit ajoute un mode d’accessibilité, le système peut changer de manière cohérente sans reprendre manuellement chaque composant.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Choisir les polices selon leur rôle

Choisissez une police selon les conditions de lecture. Un grand titre marketing peut accepter plus de personnalité qu’un tableau dense, un formulaire ou une documentation longue. Pour le texte courant, privilégiez formes de lettres claires, ponctuation lisible, bonnes graisses, chiffres compréhensibles et rendu stable à petite taille. Testez les caractères réellement utilisés dans l’application. Une famille élégante sur une maquette peut devenir fatigante lorsqu’elle sert des centaines de lignes de données ou des labels très courts.

Limitez le nombre de familles sauf raison forte. Une seule famille avec plusieurs graisses peut souvent couvrir tout le produit, avec éventuellement une seconde famille pour des titres éditoriaux. Chaque famille supplémentaire ajoute complexité visuelle, fichiers, requêtes réseau et maintenance. Si une police de marque est obligatoire, documentez précisément son usage et les situations où une police système plus robuste doit prendre le relais. La cohérence apporte généralement plus de valeur qu’une variété permanente.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Créer une échelle de tailles cohérente

Construisez une échelle plutôt que de choisir chaque taille séparément. Partez d’un body confortable, définissez les textes secondaires plus petits, puis les niveaux de titres. L’important est la relation entre les niveaux. Trop de tailles presque identiques rendent la hiérarchie difficile à percevoir ; des écarts extrêmes donnent une interface bruyante. Une échelle pratique couvre généralement body, small, label, subtitle, section, page title et display avec poids et line-height associés.

La taille ne suffit pas. Graisse, line-height, letter-spacing, couleur et casse modifient aussi la hiérarchie. Un label peut être légèrement plus petit mais plus dense. Un grand titre peut avoir un line-height serré, alors qu’un paragraphe a besoin d’air. Dans les tableaux, des chiffres tabulaires peuvent améliorer l’alignement. Documenter ces choix évite que formulaires, cartes, dashboards et pages marketing développent des règles incompatibles.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Maîtriser espacement et longueur de ligne

La lisibilité dépend fortement de la longueur des lignes. Des lignes trop larges fatiguent l’œil au retour à la ligne ; des colonnes trop étroites provoquent des ruptures constantes. Donnez au contenu long une largeur maximale raisonnable et laissez les éléments d’interface utiliser une largeur adaptée. Le line-height doit distinguer les lignes sans casser la continuité du paragraphe. Sa valeur dépend de la police, de la taille et du script ; elle doit donc être testée avec le contenu réel.

Travaillez aussi le rythme vertical. L’espace au-dessus d’un titre doit souvent marquer une rupture plus forte que l’espace en dessous, afin de montrer ce qui appartient au même groupe. Évitez d’ajouter des marges arbitraires pour corriger chaque écran. Utilisez des tokens d’espacement et des règles de composants. Lorsque taille ou line-height change, réévaluez les espaces voisins afin de conserver une structure stable.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Adapter la typographie au responsive

Le responsive ne doit pas créer un système typographique différent par appareil. Les grands titres peuvent diminuer sur mobile, mais le body doit rester dans une plage confortable. Utilisez des règles fluides ou des breakpoints avec minimum et maximum explicites. Testez de vrais titres longs, car le wrapping modifie hauteur, équilibre et parfois ordre visuel des sections.

Contrôlez également boutons, tabs, labels, navigation et tableaux. Sur petit écran, décidez volontairement si le texte peut se couper, s’enrouler, défiler ou modifier la mise en page. Testez le zoom navigateur et les réglages de texte agrandi du système. Une interface qui fonctionne uniquement à 100 % de zoom n’est pas suffisamment robuste pour un usage général.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Gérer correctement plusieurs langues

Un produit multilingue doit vérifier la couverture des caractères réels. Une police excellente en latin peut manquer de caractères arabes, tchèques ou d’autres scripts et provoquer un fallback inattendu. Ce changement peut modifier largeur, hauteur et graisse. Testez les traductions réelles, pas seulement les placeholders anglais. Certaines langues rendent les boutons, menus et titres nettement plus longs.

Les scripts de droite à gauche demandent une attention spécifique à la direction, l’alignement, la ponctuation, les nombres et le texte mixte. Ne copiez pas automatiquement letter-spacing ou line-height du latin vers toutes les langues. Si plusieurs familles sont utilisées selon le script, choisissez des métriques proches afin de réduire les sauts de mise en page lors du changement de langue.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Optimiser chargement et fallback

Chargez uniquement les graisses et styles réellement utilisés. Télécharger toute une famille augmente inutilement le poids de page. Utilisez des formats modernes adaptés et soyez prudent avec le subsetting : supprimer des caractères peut casser certaines langues plus tard. La stratégie de chargement doit afficher le texte rapidement et limiter le layout shift lorsque la police personnalisée remplace le fallback.

Définissez une pile de fallback lisible et proche des proportions de la police principale. Testez réseau lent, requête bloquée, première visite sans cache et environnement où le service de fonts externe n’est pas disponible. Le self-hosting donne davantage de contrôle, mais apporte aussi responsabilités de fichiers, cache, licence et mises à jour. Mesurez les performances avant de choisir.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Tester et maintenir la typographie

Testez la typographie sur des pages réalistes contenant titres longs, formulaires, tableaux, erreurs, états vides, nombres, traductions et contenu généré par les utilisateurs. Vérifiez clipping, chevauchement, wrapping excessif, contraste faible et hiérarchie incohérente. Une page de démonstration propre ne représente pas la variété du contenu de production.

Maintenez une référence typographique indiquant familles, graisses, tailles, line-height, letter-spacing, usages, fallbacks et stratégie de chargement. Avant d’ajouter un nouveau style, vérifiez si un style existant répond déjà au besoin. Lors du remplacement d’une famille, comparez métriques et wrapping sur plusieurs écrans avant de généraliser. Un système bien entretenu accélère les changements futurs.

Testez aussi le contenu généré par les utilisateurs : noms, adresses, commentaires, données importées et valeurs dynamiques peuvent être bien plus longs que les exemples de maquette. Chaque composant doit avoir un comportement d’overflow défini. Essayez mots très longs, nombres importants, chaînes sans espace et ponctuation mixte, surtout dans tableaux, cartes, badges et headers mobiles.

L’accessibilité ne se limite pas au contraste. Vérifiez zoom, taille de texte système et changements de police par le navigateur. Ne faites pas dépendre le sens uniquement de la graisse ou de la couleur. La hiérarchie doit rester compréhensible même si la police personnalisée échoue ou si un fallback différent est utilisé.

Testez aussi le contenu généré par les utilisateurs : noms, adresses, commentaires, données importées et valeurs dynamiques peuvent être bien plus longs que les exemples de maquette. Chaque composant doit avoir un comportement d’overflow défini. Essayez mots très longs, nombres importants, chaînes sans espace et ponctuation mixte, surtout dans tableaux, cartes, badges et headers mobiles.

L’accessibilité ne se limite pas au contraste. Vérifiez zoom, taille de texte système et changements de police par le navigateur. Ne faites pas dépendre le sens uniquement de la graisse ou de la couleur. La hiérarchie doit rester compréhensible même si la police personnalisée échoue ou si un fallback différent est utilisé.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Questions

Essai gratuit Modèles