Que fait la police ?


Brand Content

Ou l’importance de la typographie en webdesign

“Ah elle est sympa cette typo!” C’est ce qu’on peut parfois entendre ou penser en naviguant sur un site. En effet, le texte est un élément fondamental d’un site, non seulement pour faire passer un message, mais il fait surtout partie intégrante du design. Un choix judicieux de polices de caractère améliore grandement la lisibilité des contenus textuels et participent à l’amélioration de l’expérience utilisateur.

Il existe de nombreux facteurs, méthodes et règles de base pour optimiser la lisibilité du contenu d’un site.

Choix de la police de caractère.

Avec du sens

L’objectif principal quand il s’agit de choisir une police est d’être en adéquation avec le design et l’idée principale du site : autant dans le message qu’il veut transmettre (ex : divertissement, professionnalisme, créativité, etc.) que le secteur qu’il vise (ex : luxe, éducation, tourisme, etc.). Le choix d’une bonne typographie permet d’adapter la tonalité de la conception et d’être en accord avec le positionnement de marque. Cela peut contribuer à renforcer la crédibilité d’une entreprise ou d’une marque.
Exemple : une police fantaisiste écrite à la main (scripte) ne conviendra pas pour un contenu sérieux. Mais une police robuste comme Franklin Gothic pourra transmettre un sentiment de stabilité et de force tout en conférant un air d’importance.

Avec ou sans empattement

Un des critères de choix d’une police doit être celui d’une famille de police de caractère “avec ou sans empattement” aussi appelée « avec ou sans serif ».

Certaines études démontrent que les polices sans-serif sont plus adaptées à la lecture à l’écran. Au-delà de ça, il est préférable de choisir une police de caractère qui a été conçue pour la lecture à l’écran. Ce genre de police existe aussi bien avec serif que sans serif.

Exemple : Georgia (police avec serif) et Verdana (sans serif) sont des polices conçues pour l’écran.

Capture d’écran 2014 10 28 à 15.05.52 Que fait la police ?

En outre, le choix d’un association sérif / sans-sérif peut être un moyen de créer un équilibre et un contraste en typographie. C’est une combinaison simple et facile à gérer qui peut donner un aspect très cohérent au texte (si vous choisissez les bonnes polices).

 

Typo web ou pas

En théorie, on peut utiliser n’importe quelle fonte sur un site web. En pratique cela reste plus compliqué.

Plus précisément, les mécanismes pour utiliser une fonte personnalisée sur un site web existent. Ils utilisent la règle CSS 3 @font-face (qui pourrait faire l’objet d’un article à part entière). Ils sont de plus en plus répandus notamment grâce à Google Web Fonts, mais tous les navigateurs ne l’implémentent pas de la même façon.

Si choisir d’innover grâce à une police a beaucoup d’avantages, il faut toutefois savoir comment l’utiliser pour arriver à un bon résultat. Il est préférable de garder une typographie traditionnelle, dite système ou encore “websafe”, compatible pour assurer un même rendu pour tout le monde. Les sites qui les répertorient sont nombreux.

Exemple : cssfont stack

 

Un peu, beaucoup, ou pas du tout

Pour distinguer différents types de contenus textuels et aussi hiérachiser l’information dans une page, on peut définir plusieurs polices (ex : une pour le titre et une autre pour le texte courant). Cependant l’utilisation de plusieurs polices peut donner une impression de désordre et de chaos et rend plus difficile la distinction entre le corps du texte principal et le texte secondaire. Il est donc recommandé de sélectionner 3 polices maximum.

 

La mise en page

La mise en page du texte est un autre facteur influençant la lisibilité d’un texte. Avant tout, il est important de gérer des espaces « vides » pour aérer la mise en page, avoir un interlignage suffisant, éviter les phrases trop longues et justifier le texte.

 

Le corps du texte, Amen!

La taille du texte est évidemment un facteur très important de la lisibilité d’un texte. La difficulté consiste à parvenir à trouver une taille de texte qui convienne à tous les yeux, bons comme mauvais. Il est important de choisir un corps de texte suffisamment élevé. En général, on évitera de descendre sous 10px.

 

L’espace

Il est essentiel d’aérer au maximum le contenu. Pour faciliter la distinction entre les blocs de texte, il ne faut pas oublier d’utiliser des retours à la ligne et créer des paragraphes. Et surtout, ne pas hésiter à placer des espaces blancs de chaque côté du texte.

 

L’interlignage

On doit également opter pour un interlignage suffisant. Un espacement trop faible entre deux lignes complique la lecture d’une ligne à une autre. Les valeurs d’interligne doivent être assez élevées et choisies en fonction de la police utilisée et de la mise en page, en moyenne elles sont comprises entre 1,3 et 1,6.

 

La longueur

La longueur des lignes de texte est aussi un facteur de lisibilité (un texte dont la ligne est trop longue est difficile à lire, car il est alors plus difficile de trouver la ligne suivante). Même s’il vaut mieux essayer de ne pas dépasser 100 caractères par ligne, c’est surtout l’alignement du texte qu’il faut choisir avec attention.

 

L’alignement

La justification du texte est très prisée par les concepteurs web, mais a pour défaut de créer des espacements irréguliers entre les mots. Il est donc généralement préférable de choisir un alignement à gauche.

 

unnamed 1 Que fait la police ?

Le contraste

 

La couleur

Au delà du choix des polices de caractère, de la taille du texte et de la mise en page, la couleur / le contraste est aussi très important. Il convient de créer un contraste suffisamment fort entre le fond et le texte lui-même. Le texte en noir sur fond blanc est une référence, mais il est parfois jugé trop agressif (noir sur gris clair peut être une bonne solution).

Pour rendre un site accessible, la question du contraste est essentielle et peut se mesurer à l’aide d’outils tel que Snook.ca.

 

Le style

En plus du contraste du texte lui-même, il peut être intéressant de définir un contraste différent (gras, surligné) pour certains éléments du bloc de texte : les mots que l’on souhaite mettre en avant, les liens, etc.

Afin de différencier un titre d’un autre, on peut être tenté de jouer avec la taille et le style.

Choisir des familles de polices comportant une large sélection de graisses et de styles vous donne plus de flexibilité sans avoir à recourir à d’autres polices. Utilisez un gras pour contraster avec une police extra-légère ou italique, essayez des majuscules ou des petites capitales avec un peu d’espacement entre les lettres pour un sous-titre. Si les polices choisies ne contiennent qu’une seule graisse, il sera plus difficile de créer le contraste requis pour distinguer visuellement les sections d’un texte. Mais comme pour le nombre des polices, il ne faut pas abuser de ces ressources au risque de perdre le sens voulu.

 

Pour conclure, lorsqu’on parle de webdesign, la typographie et la lisibilité ne sont pas à négliger. Si on ajoute à cela, le développement du multi-screen, il faut être encore plus attentif à la lisibilité du contenu sur différents supports. Avec la multitude d’outils à notre disposition, il ne tient qu’aux webdesigners de concevoir des sites ergonomiques, respectueux des contraintes du web et du support écran, sans que cela n’entrave l’esthétisme du site.

Avec l’arrivée de polices toujours plus nombreuses, nous devons comprendre comment elles peuvent servir au mieux nos designs et les choisir sur des critères autres que la seule nouveauté. Si l’essentiel du web est constitué de texte – ce qu’il est – la typographie peut être en effet un outil très puissant.

Pour aller plus loin

 

Beaux sites typographiques

 

Pour illustrer tout cela et comme c’est une tendance très marquée du webdesign, voici quelques sites ayant fait un usage efficace de la typographie en l’utilisant comme élément central de la navigation et de l’expérience utilisateur.

Studio Songes

Code and Theory

Piet Oudolf

Les deux mondes

Palm Angels

Bobulate

 

Typos gratuites

fonts gratuites à télécharger

sélection de 60 plus belles typographies gratuites

google fonts

font squirrel

 

Outils typographiques

TypeTester

Typekit

Typotheque

Liens récréatifs

Typeconnection

Site qui propose un jeu sur les typos

https://www.typeconnection.com

Laisser un commentaire