Typographie selon le responsive Web design

La typographie sur le Web s’est jusqu’ici fortement développée, mais le responsive Web design représente de nouveaux défis pour ces écritures digitales. Le Responsive Web design est une technique de design Web très répandue et consiste à ajuster automatiquement des pages et leurs contenus textuels et graphiques à la taille des écrans, quel que soit le support (tablettes, smartphones, ordinateurs…). Une page Web adaptative aura donc un affichage différent selon le support utilisé.

L’écriture des textes est bien entendu concernée par le design adaptatif des pages Web, mais cette adaptation doit être conçue de manière sensée et une image ne devrait pas prendre trop de place sur un petit écran ou au contraire être trop petite et illisible. De même, la typographie doit s’intégrer au mieux sur tous ces supports. La taille de la police et l’espacement des lettres et des lignes doivent être attractifs, et idéalement quel que soit le support et la taille de l’écran. Il y a d’autres facteurs à prendre en compte pour une typographie Web :

• La taille de la police ne doit pas seulement s’adapter à l’écran du support utilisé, mais aussi à la distance moyenne que l’on a par rapport à l’écran pour lire le contenu. La distance que l’on aura pour lire un article sera par exemple plus faible en moyenne sur un smartphone que sur un ordinateur de bureau.

• La taille de l’écriture dépend de la résolution de l’écran.

• L’interligne doit être adapté à l’écran.  Un interligne permettant une bonne lisibilité dépend aussi entre autres de la longueur de ligne.

• La mise en page doit contenir un espace libre suffisant pour la typographie (surfaces blanches de l’arrière-plan). Cela bénéficie également à la lisibilité d’un texte.

En outre, les couleurs de police utilisées sur les plus petits écrans devraient être plus vives que celles sur ordinateur de bureau et un contraste plus fort est également préférable. Contrairement aux ordinateurs de bureau où l’on regarde un écran fixe, on regarde principalement un écran de smartphone lors de déplacements. Par conséquent, la luminosité est moins pertinente sur les nouveaux supports mobiles. L’écriture utilisée doit néanmoins être lisible aussi bien dans un lieu obscur que dans un lieu très éclairé.

Pour représenter au mieux différentes écritures sur tous les terminaux, selon le responsive Web design, on recourt aux polices vectorielles. Les polices vectorielles sont librement modulables et ne perdent pas en qualité lors d’un agrandissement de l’écriture. Ce type de police se différencie de la police matricielle (ou police bitmap), qui va permettre la conception d’écritures variées sur la base d’un ensemble de petits points (pixels).

Toutefois, les polices vectorielles comme tous les autres graphiques vectoriels par exemple, ne peuvent pas être affichées sur un écran d’ordinateur de bureau sans conversion si ces derniers sont uniquement compatibles avec des graphiques matriciels. C’est pourquoi ces vecteurs passent au préalable par une rastérisation permettant à des illustrations et des pixels matriciels de déboucher sur l’écran.

A l’aide de polices vectorielles, vous pouvez garantir la lisibilité d’une police en toutes circonstances selon les critères du responsive Web design. Pour concevoir une police individuellement et ne pas dépendre de quelques polices préalablement installées sur les différents types d’appareils, vous pouvez intégrer celle de votre choix via CSS sur votre site Web.

Lisez les parties 2 et 3 de notre guide sur les typographies responsives pour savoir tout d’abord quelles typographies sont adaptées au responsive Webdesign ou encore comment mettre en place une typographie responsive avec CSS.