À propos de ce cours
Cette leçon présente la typographie d'interface : les familles de caractères (serif, sans serif, monospace, décorative, manuscrite), l'anatomie d'un caractère (ligne de base, hauteur d'x, graisse, interlignage), la construction d'une échelle typographique à partir d'une base et d'un rapport, les règles de lisibilité à l'écran (16 px, interlignage 1,5, 45 à 75 caractères par ligne, alignement à gauche) et l'association de polices. Elle insiste sur les licences (SIL OFL) et propose trois activités, dont le choix de la typographie de CantineCampus.
| Durée | Niveau | Prérequis | À la fin de la leçon |
|---|---|---|---|
| 1 heure (cours et 3 activités) | Débutant, chapitre « Les éléments graphiques et la charte graphique » | La signification des couleurs et des formes | Vous savez choisir une police d'interface, construire une échelle typographique et rendre un texte lisible |
-
Objectifs
- Connaître les familles de caractères et ce qu'elles expriment.
- Utiliser le vocabulaire de la typographie : graisse, hauteur d'x, interlignage, chasse.
- Construire une échelle typographique et une hiérarchie claire.
- Appliquer les règles de lisibilité à l'écran.
- Associer des polices et vérifier leur licence.
-
Police, fonte, famille
- La typographie est l'art de choisir et d'agencer les caractères pour rendre un texte lisible et expressif.
- Une famille (ou police) regroupe tous les styles d'un même dessin : Inter, Roboto, Lora…
- Une fonte est un style précis de cette famille : Inter SemiBold, Inter Italic.
- Dans une application, 95 % de l'interface est du texte : titres, boutons, libellés, prix, messages. Le choix typographique pèse donc autant que la palette.
-
Les grandes familles de caractères
- Avec empattements (serif): de petites extensions terminent les traits. Classique, littéraire, institutionnel.
- Sans empattements (sans serif): des traits nets. Neutre, moderne, très lisible à l'écran ; c'est le choix par défaut des interfaces.
- À chasse fixe (monospace): tous les caractères ont la même largeur. Pour le code, ou des chiffres à aligner.
- Décorative (display): une forte personnalité, pour un gros titre ou un logo, jamais pour du texte courant.
- Manuscrite (script): imite l'écriture à la main. À réserver à une signature ou à un mot.
-
L'anatomie d'un caractère
- La ligne de base: la ligne sur laquelle reposent les lettres.
- La hauteur d'x: la hauteur des minuscules sans jambage (x, a, e). Plus elle est grande, plus le texte se lit bien en petite taille.
- Les ascendantes (b, d, h) et descendantes (g, p, q) : les parties qui dépassent au-dessus et en dessous.
- La graisse: l'épaisseur du trait, de Thin (100) à Black (900). Regular vaut 400 et Bold 700.
- La chasse: la largeur d'un caractère. L'approche (letter-spacing) : l'espace entre les lettres.
- L'interlignage (line-height) : la distance entre deux lignes de texte.
-
Une échelle typographique
- Une interface n'a besoin que de cinq ou six tailles. Les choisir au hasard (15, 17, 22, 27 px…) donne une hiérarchie floue.
- On part d'une taille de base (16 px pour le corps de texte sur mobile) et on multiplie par un rapport constant : 1,2 (discret), 1,25 (équilibré), 1,333 (contrasté).
- Avec une base de 16 px et un rapport de 1,25 : légende 13 px, corps 16 px, titre de carte 20 px, sous-titre 25 px, titre de section 31 px, titre d'écran 39 px.
- La hiérarchie vient aussi de la graisse et de la couleur: un titre de carte en 20 px gras se distingue mieux qu'un titre en 22 px normal.
- Dans Figma, chaque niveau devient un style de texte nommé (« H1 », « Corps », « Légende ») : on ne règle plus la taille à la main.
🍽 Exemple : CantineCampus
- CantineCampus utilise une base de 16 px et un rapport de 1,25.
- Le nom du plat est en 16 px SemiBold, le prix en 16 px Bold vert, la date en 13 px gris : trois informations, trois niveaux, sans changer de police.
-
Rendre un texte lisible
- Taille: 16 px minimum pour le corps de texte sur mobile ; jamais moins de 12 px, même pour une légende.
- Interlignage: entre 1,4 et 1,6 fois la taille pour un paragraphe ; plus serré (1,1 à 1,3) pour un titre.
- Longueur de ligne: 45 à 75 caractères. Au-delà, l'œil se perd en revenant à la ligne.
- Alignement: à gauche. Le texte justifié crée des « rivières » d'espaces ; le centré se lit mal au-delà de deux lignes.
- Casse: pas de paragraphe en majuscules ; elles se lisent plus lentement et semblent « crier ». On les réserve à un court libellé.
- Contraste: au moins 4,5 : 1 entre le texte et le fond (leçon précédente).
-
Associer des polices
- Une seule famille, en trois graisses (400, 600, 700), suffit à la plupart des applications. C'est le choix le plus sûr.
- Pour associer deux polices, cherchez un contraste net: une serif pour les titres et une sans serif pour le texte, par exemple.
- Ne dépassez pas deux familles: au-delà, elles se concurrencent et l'interface paraît désordonnée.
- Vérifiez que la police contient tous les caractères utiles : accents (é, è, ç, œ), symbole de l'euro, chiffres lisibles.
💡 À savoir
- Une police a une licence, comme une image. Les polices sous licence SIL Open Font License (OFL), très nombreuses sur Google Fonts, sont utilisables gratuitement dans une application, même commerciale.
- Une police téléchargée sur un site « de polices gratuites » est souvent gratuite seulement pour un usage personnel : lisez la licence avant de l'intégrer.
- Les polices système (San Francisco sur iOS, Roboto sur Android) sont toujours disponibles et très lisibles : c'est un bon choix par défaut.
-
Activités
Activité 1Reconnaître les familles · ⏱ 10 min
- Sur Google Fonts, trouvez deux polices de chaque famille : serif, sans serif, monospace, display.
- Pour chacune, notez sa licence et trois mots qui décrivent sa personnalité.
📁 Résultat attendu : un tableau de huit polices : famille, nom, licence, personnalité.
Activité 2Construire une échelle · ⏱ 15 min
- Calculez les six tailles d'une échelle de base 16 px avec un rapport de 1,2, puis de 1,333.
- Dans Figma, créez les styles de texte d'une des deux échelles (nom, taille, graisse, interlignage).
- Appliquez-les à l'écran « Panier » du prototype et comparez avec l'autre échelle.
📁 Résultat attendu : les deux échelles calculées et l'écran « Panier » avec les styles de texte appliqués.
Activité 3Choisir la typographie de CantineCampus · ⏱ 20 min
- Choisissez une ou deux polices libres qui expriment les mots-clés de CantineCampus.
- Vérifiez les accents, le symbole € et la lisibilité des chiffres (prix, heures) à 13 px.
- Rédigez trois lignes de justification : personnalité, lisibilité, licence.
📁 Résultat attendu : le choix de police justifié et une capture de test à 13, 16 et 31 px.
-
Erreurs fréquentes
| Symptôme | Cause | Solution |
|---|---|---|
| Dix tailles de texte différentes | Pas d'échelle | Une base et un rapport ; des styles de texte nommés |
| Texte de 12 px pour les descriptions | On veut « tout faire tenir » | 16 px minimum ; réduire le texte plutôt que la taille |
| Titres en police décorative illisible | Police choisie pour le logo | Garder la police décorative pour le logo seulement |
| Paragraphe justifié avec de grands trous | Justification à l'écran | Aligner à gauche |
| Police payante découverte à la livraison | Licence non vérifiée | Polices OFL ou système ; licence notée dans la charte |
-
Bilan
- La typographie porte l'essentiel de l'interface : son choix pèse autant que celui des couleurs.
- Pour une application, une sans serif à grande hauteur d'x est le choix par défaut.
- Une échelle (une base, un rapport) donne une hiérarchie claire avec cinq ou six tailles.
- La lisibilité se règle : 16 px, interlignage 1,5, 45 à 75 caractères, alignement à gauche.
- Deux familles au maximum, et toujours une licence vérifiée.
La meilleure typographie d'interface est celle qu'on ne remarque pas : on lit le message, pas la police.