Paroles de kéoliens

Comment choisir la typographie de votre site internet ?

Le design joue un rôle important dans la communication. Il est essentiel d’établir un lien clair entre le site internet et l’utilisateur afin de l’aider à aller au bout de de sa démarche (achat, trouver une information, etc.) Dans cet article il sera question de la typographie de votre site internet.

Avant de commencer, une petite mise au point avec quelques définitions :

Typographie : La typographie (souvent abrégée en « typo ») désigne les différents procédés de composition et d’impression utilisant des caractères et des formes en relief, ainsi que l’art d’utiliser les différents types de caractères dans un but esthétique et pratique.

Police (ou police de caractère / Font-family / Typeface) : ensemble de glyphes, c’est-à-dire de représentations visuelles de caractères d’une même famille, qui regroupe tous les corps et graisses d’une même famille, dont le style est coordonné, afin de former un alphabet, ou la représentation de l’ensemble des caractères d’un langage, complet et cohérent.

Fonte ( Font ) : ensemble de glyphes, c’est-à-dire de représentations visuelles de caractères, d’une même police d’écriture, de même style, corps et graisse.

Arial est une police de caractère.

Arial Bold italic 12 est une fonte.

Aujourd’hui on parle de « typo » pour désigner un peu tout et n’importe quoi mais on ne vous en voudra pas !

Voici quelques conseils pour vous aider à y voir clair et faire des choix cohérents avec l’image que vous souhaitez donner. Si vous avez déjà lu notre article sur l’ergonomie et l’UX design et que vous suivez ces quelques règles, vous verrez, on fait des miracles !

1. Ne pas utiliser plus de deux polices de caractère

Il est important de garder une structure hiérarchique et une constance dans la mise en page de votre contenu (interlignage, marges, grilles, style des h1, h2, h3…). Sachez qu’une police de caractère convenable possède un large éventail de fontes (de très maigre à très gras, Thin / Ultra light / Light / Regular / Semi-bold / Bold / Black + les italiques…)

Autant dire qu’avec une seule police, les combinaisons sont déjà nombreuses pour créer du contraste et une hiérarchie entre chaque élément.

L’intérêt d’associer deux polices différentes est donc de jouer sur ce contraste. La meilleure façon de mettre un titre ou une information en avant est souvent de lui offrir de l’espace autour.

Voici des exemples de contrastes typographiques plus ou moins marqués. Il s’agit de deux Google Fonts, Raleway (sans empattements) et Playfair display (avec empattements, en Black italic pour donner un effet)

typographie Raleway - Google font typographie Playfair Display - Google font

2. Utiliser la bonne longueur de ligne

On dit que pour une bonne expérience de lecture, il faut limiter une ligne à 60 caractères. Pour une ligne trop courte, l’oeil devra retourner à la ligne trop souvent ce qui rendra le rythme de lecture saccadé. Si la ligne est trop longue, le lecteur devra se concentrer plus que nécessaire pour retourner à la ligne sans se tromper. Et si ça évoque chez vous des considérations de CP / CE1, sachez que mon travail est de faire en sorte que toutes ces petites choses se passent de manière inconsciente pour que vous puissiez vous concentrer sur le contenu de ce que vous êtes venus chercher !

exemples longueur de ligne idéale pour un site internet

3. Choisir sa/ses police.s de manière pragmatique

Une police, comme un logo, comme les couleurs de votre marque / site … va refléter quelque chose de plus ou moins conscient chez l’utilisateur de votre site internet. La bonne nouvelle c’est qu’avec zéro moyen, pas de logos, pas d’identité visuelle, on va déjà pouvoir faire passer un message grâce à ce choix. Le tout est de ne pas se tromper !

La classification Vox Atypi – Association Typographique internationale – (ATypI) permet de classer les polices de caractères en 11 grandes familles, regroupées dans 3 catégories comme suit :

  1. Les classiques,
  2. Les modernes (nos préférées)
  3. Les caractères d’inspiration calligraphique.

Avec des noms pareils on est déjà sur une piste : Préférez une moderne pour une marque qui se veut moderne, et une … vous me suivez !

Rentrons un peu dans le détail et voyons quelques applications

  • LES DIDONES (modernes)

Des polices extrêmement contrastées avec des pleins larges, des déliés très fins et des empattements rectilignes.

Elles se réfèrent aux premiers journaux, la bourgeoisie, les documents administratifs ou gouvernementaux du XIXème siècle.

Connotées sérieuses, austères, élégantes et froides

Quelques exemples qui donnent le ton :

typographie de votre site internet - ex typographie didone

  • LES HUMANES (classiques)

La famille des humanes comprend les tout premiers caractères gravés latins, s’inspirant des écritures des manuscrits humanistes italiens. Ces caractères évoquent donc le côté organique et humain des formes et dessins, par opposition aux didones.

Voici une étude de cas qui illustre bien ce propos avec un avant/après de redesign d’une carte de visite.

L’idée est de coller aux formes organiques de la nature pour garder une cohérence entre l’illustration et le texte.

typographie de votre site internet - exemple police humane

  • LES LINÉALES (modernes)

Les linéales comprennent tous les caractères dénués d’empattements, avec peu ou pas de contraste entre les pleins et les déliés. Connotés objectifs, neutres ou simples, ils conviennent aux messages publicitaires, au graphisme et à l’art moderne.

Exemples de typographie linéales :

typographie de votre site internet - exemple polices linéales

4. Google Font ou Dafont ?

Les deux 🙂 car vous ne cherchez pas la même chose sur les deux plateformes !

Google font est la référence en matière de polices gratuites ! En plus de fournir des familles de police de qualité, il n’est même pas nécessaire de les télécharger sur votre ordinateur pour les utiliser sur votre site. Il suffit de générer une feuille de style CSS et de l’intégrer dans votre <head> (ou demandez à la bonne personne de le faire pour vous ! ).

Comme je l’ai évoqué plus haut, une bonne police (et là le « font family » prend tout son sens !) vous proposera plusieurs graisses et italiques afin de varier les effets, contrastes, et possédera tous les caractères spéciaux nécessaire à une rédaction dans les règles de l’art ! (https://www.nundesign.fr/ouvrages/lexique-des-regles-typographiques-en-usage-a-limprimerie-nationale)

Les Google fonts répondent à ces critères.

Sur Dafont, vous trouverez probablement des polices plus fantaisistes (polices d’affichage ou display font) qui colleront parfaitement à l’image de votre marque, que vous pourriez utiliser comme base pour un logo par exemple.

Mais rares sont les polices complètes qui permettent des variations de graisse ou de style, et pire, un simple accent aiguë peut même manquer à l’ensemble des caractères qui la composent ! On trouvera rarement des polices satisfaisantes pour remplir des pages de textes correctement.

Voici un exemple des 5 premières polices proposées par Dafont dans la catégorie rétro avec le texte : « popularité 10 € »

typographie de votre site internet - exemple polices rétro sur dafont

5. Nos conseils pour choisir la typographie de votre site internet

Vous l’aurez compris, choisir sa police au talent ne sera pas forcément une bonne idée surtout si c’est la première fois que vous vous livrez à cet exercice. Cependant ce n’est pas une science exacte et il n’y a pas de bons ou de mauvais choix. Le plus important c’est de faire preuve de bon sens et de se poser les bonnes questions pour transmettre l’image que vous souhaitez !

D’ailleurs, il n’y a pas non plus de typo « moche » ou « belle ». Les polices transcrivent juste un état d’esprit, une image, une référence culturelle ou historique. Le choix d’une police n’est pas un travail évident, si vous vous sentez  et ne suivez pas bêtement ce que les designers racontent dans les articles sur internet. Au pire embauchez-en un pour faire le job ils sont là pour ça !

En bonus, voici  un petit jeu en lien avec la typographie  :

Testez vos dons de typographe : https://type.method.ac/

avatar
L'Auteur : Loïc Tran

Loïc Tran est UX designer chez KEOLIO.
Ses domaines d’expertises : l’UX/UI design, le responsive et la typographie.