Typographie selon le responsive Web design

Un usage adapté du type d’écriture joue un rôle important pour le responsive Web design, soit site Web adaptatif ou encore site responsive. Le type d’écriture a en effet une forte influence dans la perception que se font les utilisateurs d’un site Web.

La première partie de ce guide en trois parties présente les principes de base de la relation entre typographie et responsive Webdesign. La deuxième partie vous propose de découvrir des sources pour trouver des polices de caractères responsives. La dernière partie de ce guide est, quant à elle, consacrée à la mise en place technique d’une telle police avec CSS pour votre site Internet.

Informations générales sur la typographie

A l’origine, le terme typographie découle du mot « typographe », qui désignait le métier d’imprimeur. Les textes étaient composés de lettres qui étaient des petites pièces mobiles et interchangeables. La notion est devenue historique avec le développement de l’écriture, les techniques de reproductibilité et grâce à la presse d’imprimerie qui s’en est suivie. Entre temps, cette appellation s’est répandue et élargie : au sens plus large on entend par typographie le graphisme de l’écriture et son application. Cela vaut aussi pour l’écriture digitale et la manière dont elle est utilisée et perçue sur des programmes informatiques.  

On distingue la micro de la macrotypographie. Par microtypographie, on entend l’arrangement de la police, l’espacement et le style des caractères, des signes et des symboles. La macrotypographie comprend quant à elle toutes les caractéristiques de l’organisation d’une page de texte, qu’elle soit imprimée ou bien digitale : format de page, surface d’impression, la taille de la police, l’interligne, le nombre de lignes et la largeur de page, le placement d’autres éléments graphiques tels que des images.

La typographie dans les médias sociaux et sur Internet

La notion de police désigne une fonte numérique, soit une écriture d’apparence spécifique sur ordinateur. Le graphisme d’une écriture au sein d’un document textuel digital ou d’un texte sur le Web est appelé typographie Web. Les typographies les plus classiques seront préférées. La lisibilité dépendra tant de la typographie elle-même que de la taille de la police, de la longueur ou de l’espacement des lignes (interlignes). En outre, il convient de prendre en compte le format de fichier pris en charge et la technique de représentation  de la police dans le choix d’une écriture numérique.

L’utilisation des différentes polices de caractères dans le Web a fortement changé au fil du temps. Pendant des années, la présentation des contenus Web était limitée entre autres par la nécessité d’utiliser certaines polices universelles précises sur des navigateurs et ordinateurs, comme Times New Roman ou Arial. Depuis, on utilise toutes sortes d’écritures sous forme de police Web (webfont). La police Web est un type d’écriture, que l’ordinateur reconnaît et charge via CSS depuis les sites Web visités. Peu importe si il s’agit d’une police Web conventionnelle ou bien d’une police installée localement, les écritures actuelles sont en grande partie des polices vectorielles qui peuvent être facilement agrandies, mises en gras et dérivées vers une multitude de polices associées à cette police principale. Le rendu visuel est dans ce cas toujours bon et lisible pour l’internaute tandis qu’il sera représenté par une matrice de pixels par un navigateur Web. Les formats les plus courants de polices vectorielles sont TrueType (TTF) et OpenType (OTF).

L’écriture dans 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é.

Adapter l’écriture au responsive Web design

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.

Cet article vous a-t-il été utile ?