Navigation

Toutes les catégories

Filtrer par auteur

Voir les derniers articles

Application mobile : les règles typographiques à respecter

Si le webdesign se fait de plus en plus responsive, avec des menus et des blocs de contenus adaptés aux différentes tailles d’écran, la question de la...

Publié par Melanie De Coster

Si le webdesign se fait de plus en plus responsive, avec des menus et des blocs de contenus adaptés aux différentes tailles d’écran, la question de la présentation du texte reste souvent peu traitée.

Pourtant, pour faciliter la lecture sur un mobile, il suffit de suivre ces règles…

1. Des colonnes de texte plus courtes

Sur l’écran d’un ordinateur, les blocs de texte sont souvent horizontaux, ce qui permet d’inclure de longues phrases. Ce n’est pas le cas sur un mobile : l’écran se présente souvent de manière verticale.

La longueur idéale des blocs de texte ne doit pas excéder 30 à 40 caractères. Au-delà, il sera nécessaire de faire défiler l’écran sur les côtés. Et personne n’a envie de faire ça !

Largeur de texte mobile

Application mobile réalisée par Lilalg, graphiste sur Graphiste.com

2. Une police légèrement plus grande

Il serait facile de se dire : l’écran est plus petit, on va donc écrire aussi en plus petit. Tout comme il serait facile de se dire : en traversant le mur, j’arriverai plus vite de l’autre côté. Vous l’avez compris : l’un comme l’autre sont des mauvaises idées.

Lire sur un petit écran est plus fatigant pour les yeux.

Votre rôle est de faciliter la vie des utilisateurs : optez plutôt pour une police de caractère deux points plus grande que celle que vous utiliseriez pour un ordinateur.

Le saviez-vous ?
Apple recommandait ainsi une taille de police entre 11 et 17 points pour une meilleure lisibilité.

3. Sans sérif, pour plus de lisibilité

Si les polices avec empattement restent appréciées pour les longs textes imprimés, il y a déjà un moment qu’elles ne sont plus recommandées pour les écrans. La pixellisation nuit d’ailleurs à leur lisibilité.

Préférez des typographies sans sérif pour les mobiles, afin de rendre la lecture plus fluide.

Police sans sérif application mobile

Site mobile réalisé par thedoctors, graphiste sur Graphiste.com

4. Une hiérarchie bien visible

Sur mobile, encore plus qu’ailleurs, il est conseillé de limiter les typographies.

Pour indiquer des titres, différentes options se présentent :

  • utiliser une police de caractère différente ;
  • utiliser une taille de police supérieure ;
  • jouer sur les espacements entre les paragraphes.

La place est limitée sur un petit écran, mais la hiérarchie y est d’autant plus importante. Vos titres doivent être aisément reconnaissables sans pour autant prendre trop d’espace.

5. Un interligne plus petit

Sur l’écran d’un mobile, à cause de la largeur limitée des colonnes, tout bloc de texte semble beaucoup plus important et long que sur grand écran.

L’un des moyens de lutter contre ce phénomène est de réduire largement l’interlignage des paragraphes. Attention cependant à ne pas trop les resserrer, afin qu’ils restent lisibles.

Interligne application mobile

Site mobile réalisé par Anuitex, graphiste sur Graphiste.com

6. Pas de fantaisie

Les polices manuscrites ou fantaisies sont plus difficiles à lire sur un petit écran. Vous éviterez donc de les utiliser pour une utilisation sur mobile.

Le principal est de viser la simplicité et l’efficacité. C’est par votre mise en page et vos choix de couleur que vous transmettrez votre personnalité, plus que par vos choix typographiques.

7. Justifiez à gauche

Si le texte justifié (c’est-à-dire aligné sur les bords droits et gauches de l’écran) est souvent recommandé pour une mise en page papier, il l’est déjà un peu moins pour des écrans. Et beaucoup moins pour un mobile.

Dans cette situation, ce genre de procédé va créer automatiquement des espaces supplémentaires entre les mots, ce qui gênera la lecture et nuira la présentation. Un texte justifié uniquement à gauche sera plus adéquat.

 

Il reste encore un point auquel il faut penser pour le texte sur mobile : les liens cliquables. Ils doivent être aisément accessibles, soit grâce à une police de caractère plus grande, soit en étant inclus dans un bouton comme un CTA (et, là encore, suffisamment large pour un doigt). Ce qui justifie, une fois de plus, d’opter pour des typographies plus grandes et plus aérées, plus adaptées à ces petits écrans.

Lire la suite de l'article

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

15 exemples d’étiquettes personnalisées parfaites pour vos produits

Quel que soit le secteur d’activité, l’étiquette personnalisée fait partie des outils de communication les plus plébiscités par les entreprises. Elles font donc partie intégrante...

Publié le par Solenne Ricard
Graphisme

6 conseils pour créer un menu de restaurant qui ouvre l’appétit !

Pour l’ouverture d’un restaurant, la logique veut que l’on pense d’abord à trouver un nom pour le restaurant, au contenu des assiettes, puis au décor qui entourera celles-ci… Mais...

Publié le par Camille