7 règles simples de typographie sur mobile

Beaucoup de sites sont visités à partir d’un mobile et la demande de création de sites mobiles s’intensifie. C’est pourquoi l’équipe Keole vous fait partager les 7 règles d’or à respecter pour une bonne utilisation d’une typographie sur mobile récemment découvert sur wedesignerdepot.com publié par Benjie Moss.
Aujourd’hui, tout va vite, et vous aussi. Vous avez tendance à survoler plus qu’à lire: ce sont des ”saccades”. Ainsi lorsque l’on créé un site mobile, il est important de ne pas oublier ces saccades dans le choix de la typographie que vous allez utiliser.

Les dispositifs mobiles ont aujourd’hui un vrai défi à relever pour rendre compréhensible n’importe quelle typographie : l’espace de lecture est limité et la luminosité souvent faible. Mais en faisant des rajustements simples aux techniques que nous utilisons déjà pour le web : nous pouvons améliorer la lisibilité dans ces dispositifs mobiles.

7 règles d’or à respecter pour un bon choix de typographie

1- Se donner de l’espace

Contrairement à ce que l’on peut croire, la typographie n’est pas simplement l’alignement de caractères, elle prend également  en compte l’espace qui les entoure.

La hiérarchie a aussi un rôle à jouer dans la construction de l’espace. On n’utilise pas seulement un titre “h1” sur un paragraphe “p”, mais plutôt une hiérarchie spaciale (par exemple l’espace entre les lettres doit être moins important que l’espace entre les mots, l’espace entre les mots moins importants que les espaces entre les lignes…).

Pour une lisibilité optimum sur un mobile, cette hiérarchie spatiale est un élément aussi essentiel que la lumière naturelle pour notre bien-être.

2- Prendre la mesure

La mesure représente la longueur idéale d’une ligne de texte. Pour une lecture confortable, une ligne est composée de 65 caractères en moyenne. N’ayant pas de norme pour la longueur d’un écran mobile l’on peut se baser sur la mesure des colonnes de textes des journaux ou magazines, c’est-à-dire 39 caractères, testée et approuvée au fil des siècles !

3.Utiliser le bon interligne

L’interligne représente l’espace entre les lignes. Quand cet espace est trop faible ou trop important, cela empêche une fluidité de lecture et de compréhension. La norme habituelle est autour de 16pt (ou 22px). Cette norme peut paraître un peu serrée pour un écran dit normal. On peut donc augmenter légèrement cette interligne tout en maintenant la hiérarchie spatiale.

Pour les dispositifs mobiles, la mesure vue précédemment est plus courte et l’interligne plus faible.

4- Faire les bons choix de présentation

Chaque police est mise en valeur suivant une combinaison bien particulière.  Ajuster la police à l’espace qui lui est réservé par sa mise en page et sa taille tout en conservant ses caractéristiques de conception pour ne pas la déformer.

Mettre une police à un endroit bien précis peut augmenter le contraste et la lisibilité.

Ce contraste est important et peut se régler sur les dispositifs mobiles en prenant compte de l’environnement autour.

Les designers se fixent sur une grille qui servira de base à la typographie mais pour les mobiles on prendra plutôt comme repère le haut des mots, des caractères reconnaissables plus rapidement par le cerveau.

5- Travailler la mise en page

La plupart des textes sont pour la lecture alignée à gauche (au moins pour les langues latines) avec des retours à la ligne plus aléatoires suivant les mots qui se trouvent à la fin de la ligne. Cela permet au cerveau d’anticiper le retour à la ligne pendant la lecture. Il faut éviter d’aligner deux ou trois phrases à la suite et favoriser le retour à la ligne.

Souvent, le texte est justifié, c’est-à-dire que les mots sur la ligne sont espacés sur la longueur du paragraphe pour créer un texte à bord identique à droite et à gauche. On l’utilise souvent pour des questions esthétiques mais cela crée souvent des espaces incohérents, voir la présence de deux ou trois mots sur une ligne. Le texte justifié peut être illisible sur un mobile.

Aligner le texte à gauche et utiliser les traits d’union au début des phrases crée des repères. Un plus sur mobile car les lecteurs sont souvent dans des situations distrayantes et cela leur permet une reprise de lecture plus rapide.

6-Réduire le contraste

On encourage le contraste entre le texte et le fond sur lequel il se trouve et se contraste peut être réglé de différentes façons. Sur mobile, le texte est moins visible et donc le contraste devient plus exagéré. La plupart des designers utilisent la suite de Fibonacci (faire un lien) pour calculer la taille du texte à utiliser.

7- Attention aux modifications manuelles

Quand nous modifions un réglage sur la police comme par exemple l’écart entre deux caractères il est important de considérer et de modifier les autres paramètres : le “crénage” (ajustement de l’espace entre les lettres), “l’interlignage” et le “tracking” (étirement des lettres sans modifier l’espace entre elles).

La modification d’un de ces paramètres pourrait entraîner la déformation de la typographie telle qu’elle a été construite.

Les grands textes comme les titres ou encore les notes de bas de page ne sont pas concernés par cette règle.

Chaque texte, chaque police, chaque technologie apportent de nouveaux défis à la typographie. Il n’existe pas de règles précises, chaque situation est différente. Pour rendre un texte lisible, retenez ces trois principes :

• la longueur des lignes,
• une hiérarchie spatiale claire
• et un bon contraste.

Il n’y a pas de règles à rejeter. Votre propre analyse à partir d’une expérience de lecture ne permet pas de créer une règle ou en réfuter une mais ces quelques directives permettent ici un point de départ dans la création de textes pour les dispositifs mobiles.

En attendant que ces règles se précisent, vous pouvez continuer à vous amuser en créant votre propre typographie avec Prototypo!

 Julie Berta