Macro Typographie

C’est la première approche, la première accroche. La macro typographie, c’est la base de la mise en forme d’un contenu, c’est la manière dont on va rythmer le texte pour attirer l’œil de notre utilisateur. C’est la vision d’ensemble de notre contenu en matière de texte. 

image macro

La macro typographie, c’est trois facteurs qui vont déterminer notre intérêt à rester. 

La couleur de paragraphe

La couleur de paragraphe, c’est donner un aspect attractif au contenu textuel. Il faut tenter de créer des paragraphes homogènes et aérés, qui donneront envie d’être lu. La couleur de paragraphe, ce n’est pas un simple changement de la couleur de polices ou du fond, c’est une appréciation de la couleur que le paragraphe semble donner lorsque l’on plisse les yeux. 

Pour définir cette couleur, plusieurs éléments entre en compte… 

La longueur des lignes

C’est le premier élément de composition d’un paragraphe. Il est important de créer des lignes de taille adéquate, pour rendre la lecture plus aisée. L’œil fatigue lors de la lecture et nos utilisateurs en possèdent deux. Comme nous souhaitons prendre soin d’eux, il faut donc veiller à limiter leur fatigue visuelle. 

Un voyage est un déplacement dans l'espace, contraint, effectué vers un point plus ou moins éloigné dans un but personnel (par exemple tourisme) ou professionnel (affaires) ou autre (guerre, réfugiés politiques ou climatiques), déplacements motivés par des activités sportives ou socio-culturelles ou de grands événements. 

Voici un paragraphe trop long d’environ 105 caractères par ligne. 

Un voyage est un déplacement dans l'espace, contraint, effectué vers un point plus ou moins éloigné dans un but personnel (par exemple tourisme) ou professionnel (affaires) ou autre (guerre, réfugiés politiques ou climatiques), déplacements motivés par des activités sportives ou socio-culturelles ou de grands événements. 

Voici un bon paragraphe, d’environ 55 caractères par ligne. 

L’usage veut que l’on ne dépasse pas les 80 caractères, le mieux étant de 55 à 60 caractères pour une lecture idéale. 

L’interlignage

Après la longueur de ligne, il faut s’attarder sur l’espace entre celle-ci. En tant que voyageur du web, tu te dois de connaître l’espace, que l’on appelle interlignage. Nos petits utilisateurs fraichement atterris sur notre site et désireux de lire notre contenu, ne vont pas lire chaque mot de chaque phrase. L’œil humain parcourt un texte sans lire tous les mots de celui-ci, mais en effectuant des saccades et fixations. Il faut le voir comme de petits sauts entre les mots, qui seront plus ou moins simples. 

Encore une fois, l’œil est la priorité. 

En effet, plus l’interlignage est faible, plus les saccades et fixations seront complexes lors de la lecture. La casse (majuscules ou minuscules) joue également un rôle important :

Sur le web, l’interlignage minimal à utiliser correspond à 140 % de la taille du corps de texte et il ne faut pas dépasser les 200 %, pour un confort de lecture optimal. 

Interlignage trop faible de 110 %. 

Sur le web, l’interlignage minimal à utiliser correspond à 140 % de la taille du corps de texte et il ne faut pas dépasser les 200 %, pour un confort de lecture optimal. 

Bon interlignage de 160 %. 

 « Le point suivant, c’est donc le corps de texte ? » 

— me diras-tu cher voyageur, et tu as raison !

Le corps de texte

En parallèle à ces deux premiers éléments, il faut trouver une taille de caractères qui va faciliter la lecture et mettre en valeur notre contenu. Un texte trop petit à lire peut inciter l’utilisateur à quitter la page, pire encore, l’empêcher de profiter du contenu que nous lui offrons. En web, la taille minimum sur écran d’ordinateur est de 16px, parce que oui, l’unité est le pixel. Il faut s’adapter au contenu et au support sur lequel on diffuse celui-ci. Ces éléments vont conditionner la couleur de paragraphe, qui ne doit être ni trop claire, ni trop foncée. 

Chacun a une place, chacun a un rôle, même les titres !

La hiérarchie

Les éléments pour définir la couleur d’un paragraphe, eh bien… concernent surtout le paragraphe. Porter son attention sur le style des titres, des sous-titres, des sous-sous-titres (etc… ) et leurs liens avec le paragraphe, permettent d’apporter du rythme et de l’aisance dans la lecture. On va donc définir des rapports de proportions pour aider l’utilisateur à identifier directement les blocs d’informations. 

On peut se baser sur les rapports géométriques ou musicaux :

Néanmoins, on préférera d’autres rapports, utilisés surtout en impression. Le but est d’obtenir une hiérarchie dans le contenu textuel par rapport à l’espace disponible dans une double page. Et souviens-toi cher voyageur, tu te dois de connaître l’espace. 

Comme sur du papier à musique, il faut savoir composer. 

Une belle police d’écriture te mène à l’harmonie… 

La combinaison de polices

A définir avant ou après les rapports hiérarchiques, la combinaison de polices aide à fluidifier notre contenu, pour que notre lecteur puisse effectuer ses saccades et fixations avec plus de facilité. 

À la hauteur d’un X

Première étape pour trouver une bonne combinaison, la hauteur des « x ». On tente de trouver des « x » de tailles similaires, pour définir si deux polices peuvent être associées. La combinaison d’une police sérif (empâtement) et sans sérif (sans empâtement) est tout à fait possible. 

Une bonne correspondance de polices :
la PT serif et Manuale serif.

Ô, cher contraste

Comparer le contraste de deux typographies permet de voir si l’épaisseur de leur trait correspond. On effectue cette comparaison sur les lettres « o » :

Deux « o » au contraste différent :
la Source serif et Coustard serif. 

La chasse au m

Cette fois ci, grâce à la lettre « m », on vérifie la chasse des deux polices. C’est la largeur de la lettre et l’espace autour de celle-ci (qu’on appelle approche). La largeur d’une lettre peut être de taille normale ou étroite (narrow en Anglais). 

Le dessin de ce « m » en vert foncé et
l’approche en clair (Museo slab 500). 

Une fois cette combinaison effectuée, il est possible de déterminer l’espacement entre les titres et les paragraphes. Pour ce faire, on utilisera des multiples de 3, 5 ou 6

Notre paragraphe est prêt, le voyage dans la page peut commencer. 

Il va maintenant falloir apporter du rythme dans la composition, pour que notre lecteur profite pleinement du contenu qu’on lui propose. 

Ce voyage plein de rythme se fait au prix de quelques règles de sécurité :

Le mieux, c’est d’aligner le contenu,

à gauche

ou

à droite. 

Cher voyageur, te voilà aguerri. Grâce à ces quelques lignes, tu connais un peu mieux la macro typographie. Mais il te reste encore des choses à apprendre. Il te faut aller dans le détail, entres donc dans le monde de la micro typographie. 

Poursuivre le voyage