Taille de police minimale pour la vue mobile
Lors de la conception d'une application mobile ou d'un site réactif pour mobile, quelle devrait être la taille de police minimale qui n'affecterait pas la vue de l'utilisateur?
Pour les mises en page mobiles, les tailles de police sont généralement définies en EM plutôt qu'en pixels afin que la taille de police soit relative, prête à répondre à différents paramètres d'écran. 16px est la taille de police idéale en dessous de cette taille de police serait difficile à lire pour l'utilisateur.
W3Recommendation sur la taille de police a une note qui dit (accentuez le mien):
Pour préserver la lisibilité, un UA appliquant ces directives devrait néanmoins éviter de créer une taille de police entraînant moins de 9 pixels par unité EM sur un écran d'ordinateur.
12 pixels , selon cet article de "pensez avec Google" sur mobile.
- Choisissez la bonne police. Votre taille de police minimale doit être de 12 pixels; quelque chose de plus petit et les utilisateurs plisseront les yeux. Assurez-vous de choisir une police de caractères propre et facile à lire. Si possible, évitez d'utiliser du texte basé sur une image.
12sp , qui est utilisé pour les légendes, selon section de typographie de conception matérielle . Il s'agit de la taille de police minimale qu'ils proposent (pour le bureau ou pour les mobiles). (Voir cette question pour plus d'informations sur les unités sp).
Les tailles de caractères sont spécifiées avec sp (pixels évolutifs) pour activer les modes de grands caractères pour accessibilité .
Notez que cela est recommandé pour les scripts anglais et de type anglais (latin, grec et cyrillique). Pour les langues d'Asie du Sud et du Sud-Est et du Moyen-Orient, y compris l'arabe, l'hindi et le thaï:
Taille de police : pour les styles Titre à Légende, la taille de police est 1px plus grande que celle spécifiée pour l'anglais. Pour les styles plus grands que le titre, la taille du type anglais convient.
Source: https://material.io/guidelines/style/typography.html
Il n'y a pas de minimum défini, cela dépend de l'utilisateur. (surtout si vous vous souciez de l'accessibilité)
Certains utilisateurs devront augmenter la taille de la police (et la taille à laquelle ils augmenteront dépendra de facteurs environnementaux externes, par exemple est-ce qu'ils portent ou non leurs lunettes)
Vous devez donc définir une taille et permettre à l'utilisateur de la modifier à sa guise. Mieux encore, permettez à l'utilisateur de définir une taille et de s'en souvenir pour sa prochaine utilisation - ils peuvent toujours la changer, mais elle est plus susceptible d'être correcte que n'importe quelle taille choisie par le développeur.
C'est pourquoi vous devez utiliser des changements de taille de police relative si plus d'une taille de police, utilisez donc EM comme taille comme dans réponse de NB4
Cela dépend de la police. La police par défaut du navigateur de 16px/1em/100% est bonne dans la plupart des cas selon La page Google Developer's Insights sur les polices (accent sur le mien):
Par défaut, le navigateur affichera chaque police à 16 pixels (pixels CSS). C'est une bonne valeur par défaut dans la plupart des cas, mais il peut être nécessaire de l'ajuster pour une police spécifique - c'est-à-dire que la taille par défaut peut être réglée plus bas ou plus haut pour s'adapter pour les différentes propriétés de la police. Ensuite, une fois la taille par défaut définie, des polices plus grandes et plus petites doivent être définies par rapport à la taille par défaut à l'aide de pixels. Ceux-ci peuvent ensuite être utilisés pour ajuster la taille du texte pour le contenu principal, secondaire et autre de la page.
Le blog de Typecast sur ne échelle plus moderne pour la typographie Web suggère également d'utiliser 16px (1em ou 100%) comme base:
body { font-size: 100%; }
Le message a également une échelle suggérée pour les en-têtes et similaires.
Cela dépend au plus haut degré de deux paramètres: la police que vous utilisez et l'appareil sur lequel l'application sera affichée.
- Police: différentes polices ont des caractéristiques différentes en matière de lisibilité. Une règle de base contrôlant la hauteur x de la police , mais il existe également d'autres facteurs.
Appareil: Les principaux facteurs sont: à quelle distance l'utilisateur regarde-t-il l'appareil et quelle est sa densité de pixels. Règle générale: plus l'appareil sera probablement proche et plus la densité de pixels est élevée, plus la police doit être petite.
Un appareil ressemblant à un livre avec une résolution théorique de 300 dpi tenue étroitement pourrait en fait demander des polices aussi petites que 10px ou 11px .
À l'autre extrémité du spectre, un écran de télévision avec 90 dpi, qui pourrait s'asseoir dans le couloir, a certainement besoin de quelque chose de plus proche de 18 pixels ou plus.
À la fin de la journée, la réponse est: cela dépend. Prenez votre application, utilisez-la vous-même, testez-la avec de vraies personnes dans des circonstances réelles et évaluez les commentaires. Lors de l'implémentation du résultat en CSS, vous pourriez trouver cette technique utile.