Taille de police mobile : pourquoi le texte courant n'est pas en 12px et quelles tailles utiliser
Le texte courant sur mobile fait 17 pt sur iOS et 16 sp sur Android. Douze, c'est une légende et 11 est le plancher. Mettez les champs à 16 px pour que Safari ne zoome pas, et laissez le texte grandir. Les 11 tailles iOS incluses.
Le texte courant sur un téléphone n'est pas en 12 px. La taille par défaut du corps de texte chez Apple est de 17 points, et celle de Material est de 16. Douze, c'est une légende, et un écran composé en légendes est un écran devant lequel on plisse les yeux. Voici les quatre règles et la liste complète des tailles iOS pour les appliquer.
Pourquoi le 12 px revient sans cesse
Les maquettes sont dessinées sur un grand écran, avec le design zoomé pour tenir. À cette distance, le 12 paraît net et le 17 paraît criard. Les tailles sont donc choisies selon leur propreté dans le cadre, et le cadre n'est pas le téléphone.
Ensuite, le téléphone est tenu à bout de bras, en plein soleil, par quelqu'un qui marche. Le même 12 px devient petit, éblouissant et instable. Net dans le fichier, fatigant dans la main.
La solution : arrêter de choisir les tailles à l'œil. Les deux plateformes publient une échelle typographique, et ses tailles ont été testées sur de vrais appareils à de vraies distances de lecture. Prenez vos chiffres là.
Règle 1 : le texte courant à 17
Texte à 12 pt
17 pt, Body iOS
Sur iPhone, le style Body par défaut fait 17 pt avec 22 pt d'interligne. Sur Android, le Body Large de Material fait 16 sp avec 24 sp d'interligne. Sur le web, la valeur par défaut du navigateur est 16 px. Trois plateformes, trois unités différentes, une seule réponse : le texte courant vit entre 16 et 17.
C'est le texte long qui exige le plus de cette règle. Un libellé d'une ligne peut être petit et s'en sortir. Un paragraphe que quelqu'un doit lire jusqu'au bout, non. Si l'écran contient un paragraphe, il doit être à la taille du corps de texte, et la ligne en plus qu'il crée est le prix pour être lu.
Règle 2 : rien sous 11
Le 12 n'est pas interdit. Il a un nom : Caption 1. Il est fait pour les petits caractères sous une photo ou un horodatage, du texte qu'on a le droit de manquer. Le texte courant n'est pas cela.
Onze est le plancher. Caption 2 sur iOS fait 11 pt, et c'est le plus petit style de texte qu'Apple propose. Le plus petit style de Material, Label Small, fait aussi 11 sp. Quand les deux plateformes s'arrêtent au même nombre, un design qui descend en dessous écrit un texte qu'aucun des deux systèmes n'écrirait.
Utilisez les petits styles uniquement pour l'information secondaire : horodatages, unités, mentions légales, la minuscule étiquette sous une icône d'onglet. Si c'est une information sur laquelle quelqu'un doit agir, ce n'est pas une légende.
Règle 3 : les champs à 16
Champ à 15 px
Champ à 16 px
C'est une règle web, et elle surprend car rien dans le champ ne semble anormal. Safari iOS zoome sur un champ de texte quand sa taille de police est inférieure à 16 px. À 16 px ou plus, il ne le fait pas. Le zoom ne s'annule pas tout seul : il faut pincer pour dézoomer avant de voir le reste du formulaire.
La solution tient en une ligne de CSS, et elle ne doit pas être « désactiver le zoom » dans la balise viewport. Bloquer le zoom retire un outil à ceux qui en ont besoin. Réglez plutôt la taille de texte du champ.
Règle 4 : laissez-le grandir
Hauteur fixe
Les lignes passent à la ligne
Votre 17 est un point de départ, pas une promesse. Les gens augmentent leur taille de texte dans les Réglages, et iOS leur permet d'aller bien au-delà de la valeur par défaut, dans ses tailles d'accessibilité, où Body atteint 28 pt au premier cran et 53 pt au maximum. Les utilisateurs Android font de même avec l'échelle de police.
Testez vos écrans aux plus grandes tailles avant de les livrer. Cherchez trois choses : du texte coupé par des points de suspension, du texte qui chevauche son voisin, et un libellé de bouton qui ne tient plus. Le remède est toujours le même. Laissez la ligne passer à la ligne, laissez la rangée grandir, et arrêtez de fixer les hauteurs.
Sur le web, la même idée consiste à dimensionner le texte en rem plutôt qu'en px, afin qu'il suive le réglage de taille de texte du navigateur. Les WCAG demandent que le texte puisse être agrandi jusqu'à 200 pour cent sans perte de contenu ni de fonction.
Les 11 tailles de texte iOS
| Style | Taille / interligne (pt) | À utiliser pour |
|---|---|---|
| Large Title | 34 / 41 | Le haut d'un écran principal |
| Title 1 | 28 / 34 | Écrans de section |
| Title 2 | 22 / 28 | Sous-sections |
| Title 3 | 20 / 25 | Titres de cartes et de groupes |
| Headline | 17 / 22 | Titres de lignes, semi-gras |
| Body | 17 / 22 | Paragraphes et texte de lecture |
| Callout | 16 / 21 | Texte de soutien |
| Subhead | 15 / 20 | Lignes secondaires sous un titre |
| Footnote | 13 / 18 | Notes et métadonnées |
| Caption 1 | 12 / 16 | Petits caractères |
| Caption 2 | 11 / 13 | Le plancher |
Ce sont les tailles au réglage Large par défaut d'iOS. Il n'en existe que onze pour une raison : une échelle courte se retient facilement et se garde cohérente sur tous les écrans.
Les équivalents Android dans Material 3 sont Body Large à 16 / 24 et Label Small à 11 / 16.
À transmettre à votre développeur
:root {
--text-body: 1.0625rem; /* 17 px, iOS Body */
--text-callout: 1rem;
--text-footnote: 0.8125rem;
--text-floor: 0.6875rem; /* 11 px, never lower */
}
body { font-size: var(--text-body); line-height: 1.3; }
/* 16 px or more stops iPhone Safari zooming into the field */
input, select, textarea { font-size: 1rem; }
Sur iOS, utilisez les styles de texte système (.body, .footnote) pour que Dynamic Type fonctionne sans effort. Sur Android, définissez le texte en sp, pas en dp, pour qu'il suive le réglage d'échelle de police.
FAQ
Quelle est la taille de police minimale pour une application mobile ?
11, sur les deux plateformes. Caption 2 sur iOS fait 11 pt et Label Small dans Material 3 fait 11 sp. Tout ce que les gens doivent lire pour agir doit être bien plus grand.
Quelle taille de police pour le texte courant sur iPhone ?
17 pt. C'est la valeur par défaut du style iOS Body, avec un interligne de 22 pt, et elle augmente quand la personne agrandit sa taille de texte.
Quelle taille de police pour le texte courant sur Android ?
16 sp. C'est Body Large dans Material 3, avec un interligne de 24 sp.
Le 12px est-il trop petit pour le texte courant ?
Pour le texte courant, oui. Il correspond au style iOS Caption 1, conçu pour les petits caractères. Le texte de lecture doit faire 16 à 17.
Pourquoi ma page zoome-t-elle quand je touche un champ sur iPhone ?
Safari iOS zoome sur les champs de texte dont la taille de police est inférieure à 16 px. Réglez le champ à 16 px ou plus et cela s'arrête.
Dois-je laisser le texte suivre le réglage du système ?
Oui. Les gens augmentent leur taille de texte dans les Réglages pour de bonnes raisons, alors concevez des lignes et des boutons qui passent à la ligne et grandissent au lieu de couper le texte.
Sources
- Apple Human Interface Guidelines, Typography : les styles de texte iOS à la taille Large par défaut, en points. Body 17/22, Callout 16/21, Subhead 15/20, Footnote 13/18, Caption 1 12/16, Caption 2 11/13, Large Title 34/41, Title 1 28/34, Title 2 22/28, Title 3 20/25, Headline 17/22. Body fait 28/34 au premier cran d'accessibilité et 53/62 au maximum.
- Material Design 3, Typography : Body Large 16/24 sp, et Label Small 11/16 sp comme plus petit style.
- CSS-Tricks, 16px or Larger Text Prevents iOS Form Zoom (Chris Coyier, 2021) : Safari iOS zoome sur les champs réglés à 15 px ou moins, pas à 16 px ou plus.
- WCAG 2, 1.4.4 Resize Text : le texte peut être agrandi jusqu'à 200 pour cent sans perte de contenu ni de fonction.
- Les spécimens de cette page sont composés en Inter aux tailles d'Apple, et non en SF Pro, la police d'Apple. Le texte de la carte et de la ligne d'exemple est inventé pour cette page.
- Publié pour la première fois sous forme de carrousel sur UX Brainy.
Want type that stays readable on every phone and every text size setting? Our team designs and builds mobile UI with the type scale decided once.
Get Started
