Sélectionner une page

Quelle taille texte pour un site internet réactif?

par | Avr 4, 2020 | Pirate | 0 commentaires

De nos jours en 2020 la réactivité des sites entre mobile, tablette et ordinateur est souvent nécessaire. Même si vous constatez que votre site internet est majoritairement consulté sur mobile, il reste que l’accès sur ordinateur me semble primordial. Plus vous êtes accessibles plus on viendra vous rendre visite et votre fréquentation augmentera. 😉

Vous souhaitez un site plus réactif ? Alors passons directement au vif du sujet avec les différentes taille texte sur mobile et ordinateur.

Taille du corps de texte sur mobile

Après avoir réalisé un WordPress sur écran d’ordinateur et cherché à le rendre réactif sur mobile j’ai eu de nombreuses difficultés à ajuster la taille de la typographie.

Cependant, la règle est assez simple: utilisez une taille de police de corps de 16px. Vous voulez que le corps du texte de votre téléphone (lorsqu’il est tenu à une distance naturelle) soit aussi lisible que le texte d’un livre bien imprimé.

De plus, dans le cas particulier de texte dans un champ avec « saisie de texte », il est recommandé d’écrire en 16px au minimum. Autrement, si l’écriture est plus petite, les navigateurs iOS effectueront un zoom avant sur le côté gauche de l’entrée de texte, forçant l’utilisateur à effectuer un zoom arrière manuel après avoir utilisé la zone de texte.

Donc, dans vos questionnaires où les utilisateurs doivent remplir leurs informations du type « e-mail » ou « Prénom » par exemple; faites attention à ne pas diminuer la taille de l’écriture, bien qu’intuitivement on y soit tenté. A la place, si vous voulez réduire sa visibilité, il serait par exemple préférable de réduire le contraste du texte de saisie (en passant d’un gris foncé à un gris clair sur fond blanc).

Taille texte secondaire sur mobile

Afin de marquer une réelle différence avec le corps du texte et donc de mettre en avant une certaine hiérarchie concernant l’importance des informations typographiques, il est préférable de diminuer d’au moins 2px la taille de la police. Ainsi l’écriture secondaire est de 14px ou 13px par exemple ainsi la différence de taille avec le corps de texte sera visible à œil nu.

Pour avoir un meilleur aperçu de vos réalisations et de l’effet rendu, je vous invite à regarder en simultané l’avancée de vos projets directement sur votre téléphone portable. Même en utilisant des plugins WordPress permettant d’ajuster la réactivité d’une page sur différents supports, il reste difficile d’obtenir un rendu convaincant.

Directement sur votre téléphone le test est plus direct et concret. Vérifiez sur des supports de différentes tailles (votre tablette, l’Iphone 11 de votre ami, l’androïde d’un autre) afin d’observer la manière dont votre site s’adapte. Mais bon, normalement pour réduire les risques au minimum utilisez une taille de corps de texte de 16px, de même pour le texte de saisie, et enfin le texte secondaire en 14px et tout devrait rentrer dans l’ordre.

Taille texte sur ordinateur

En ce qui concerne le choix de la taille du texte, nous pouvons diviser les sites internet en deux types.

Ceux qui possèdent beaucoup de lecture et qui demandent un temps de concentration plus important aux utilisateurs fronçant les sourcils pour déchiffrer les lignes d’un blog, d’un e-book, de nouvelles.
Et d’un autre côté les sites plus interactifs dont la lecture est moins soutenue.

La gestion de la taille texte entre ces deux types de sites va varier, c’est ce que l’on va découvrir par la suite.

Site web avec beaucoup de lecture

Il n’y a rien de plus logique que ce que je vais vous annoncer. Plus le site internet a une densité élevée de texte plus il est préférable qu’il possède une grande taille de police pour ne pas fatiguer les yeux des lecteurs. Un site comme Blinkist qui réunit de nombreuses nouvelles (temps moyens de chaque article étant d’environ 15 minutes) va avoir une taille de corps de texte de 19px. Autre exemple, le splendide site Medium qui diffuse des articles de qualité a une taille de police par défaut de 21px.

taille text Medium
Screen shot du site internet Medium.

Autre que la quantité de texte, il faut également garder en tête la notion de temps de lecture moyen de l’utilisateur. Ainsi, Twitter offre un contenu majoritairement écrit, mais les postes étant limités à peu de caractères d’écriture, cette lecture se fait en diagonale. Afin de conserver le mouvement de survol de l’œil, la taille du corps de texte est fixé à 14px. Dans le même cas on peut aussi citer Linkedin par exemple.

Il n’existe cependant aucune obligation en ce qui concerne la taille de votre typographie sur votre site. Le site Story&Heart qui propose du format vidéo profite également de cette particularité en affichant des typographies de 47px et 30px en corps de texte. Le Design c’est surtout ça, jouer avec des variantes pour créer des visuels uniques. Autre exemple, le site Original Seeds Store qui est un e-commerce de graines de cannabis ne disposant d’aucun texte vraiment long, joue lui aussi avec des typographies allant de 70px, 40px, 19px à 14px.

Accessibilité des sites internet

Rendre son site internet accessible sur mobile, ordinateur et tablette à la fois fait partie des recommandations en UX design. Avoir un site dont l’écriture est accessible fait également partie des bons procédés à mettre en place. D’après l’Insee, au total, 9 % des personnes de plus de 20 ans ont au moins une gêne non corrigée de la vision (de loin ou de près) en France. En tant que UX/UI Designer, il est primordial de penser à ces handicaps, de le garder en tête, et pourquoi pas de proposer la possibilité de modifier la taille texte et/ou la couleur du site que vous avez développé. Réactivité rime avec accessibilité 😉

N’hésitez pas à commenter cet article en proposant des sites internet dont l’accessibilité concernant la taille texte est bien intégrée dans l’expérience utilisateur globale. Plus nous avons d’exemples concrets plus la mission parait réalisable.

A bientôt !

Lire article précédent intitulé « Comment utiliser la couleur orange en design? ».

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

NEWSLETTER

Reçois chaque semaine des conseils et articles sur le Design.