Comment choisir une police d’écriture pour un site web ?

Vous travaillez sur la création ou la refonte d’un site web et souhaitez choisir une police d’écriture ? Dans cet article, je vous propose d’explorer les différents critères importants à prendre en compte pour trouver la police d’écriture idéale pour votre projet.

1. Choisir une police d’écriture lisible

Cela paraît évident… mais toutes les polices d’écriture n’offrent pas la même facilité de lecture. Or, il faut garder en tête qu’un site web est lu sur différentes tailles d’écran, par toutes sortes de lecteurs. La lisibilité prime donc sur l’originalité (l’un n’excluant pas l’autre !).

Cette notion de lisibilité couvre en réalité de nombreux aspects :

• Vous devez être en mesure de bien distinguer les lettres les unes des autres (le a du o, etc) ;
• La police doit aussi permettre certaines variations de style (gras, italique) qui sont utiles pour mettre en exergue les éléments clés d’un texte, tout en restant lisible ;
• Elle doit offrir suffisamment de contraste et être suffisamment grasse pour être lisible. Certaines polices très fines (portant souvent le terme « thin » dans leur nom) risquent de poser des problèmes d’accessibilité ou d’entraîner une fatigue visuelle pour le lecteur.

Ajoutons que la police doit s’adapter à la nature du texte : pour un texte long, on cherchera l’efficacité et la sobriété là où des polices plus stylisées peuvent donner de la personnalité aux gros titres d’une page d’accueil par exemple.

En ligne, choisir une police d’écriture sans serif va généralement de pair avec une meilleure lisibilité, contrairement à la presse écrite où les polices d’écriture serif prennent l’avantage (les empattements qu’elles comportent permettent en effet de guider le regard d’une lettre à l’autre pour faciliter la lecture, y compris quand le texte présente des défauts d’impression).

La quasi-totalité des sites de polices d’écriture, comme Dafont ou Google Fonts, permettent de filtrer les polices serif ou sans serif pour faire son choix plus facilement.

2. Trouver la police d’écriture web qui correspond à votre personnalité

Tout comme le choix des couleurs sur un site web, le choix d’une police d’écriture véhicule un certain message. Une police peut évoquer certaines émotions, certaines caractéristiques… Vous devez donc vous assurer que celle de votre site sera en accord avec la personnalité de votre marque.

Il est important de savoir quelle image vous voulez renvoyer (sérieux, formalisme, entrain, modernité, traditionalisme, luxe…). Vous pouvez ensuite vous pencher sur les recherches qui s’intéressent à la psychologie des polices d’écriture. Oui, ça semble tiré par les cheveux… mais ça existe ! Des études ont été menées pour comprendre les réactions que suscitent différentes polices, quelles associations mentales elles suscitent chez le visiteur (vous pouvez notamment consulter cet article de Nick Kolenda qui en synthétise certaines).

Si l’on doit retenir quelques grands principes…

• Les gens tendent à rapprocher les caractéristiques d’une police d’écriture à des caractéristiques réelles (ex : il sera plus efficace de parler minceur avec une police fine) ;
• Les polices serif (type Times New Roman, Georgia) ont tendance à être perçues comme plus traditionnelles, fiables, respectables, elles sont souvent utilisées par les marques qui souhaitent inspirer confiance en prenant appui sur leur long héritage. C’est par exemple le choix fait par le journal Le Monde avec la police TheAntiqua :
  

  

• Les polices sans-serif (comme Arial, Open Sans) véhiculent plutôt une image de modernité et de transparence ;
• Les polices cursives imitent quant à elles l’écriture manuscrite, elles sont souvent associées à l’élégance et à la créativité ;
• Les polices arrondies expriment davantage de douceur que les polices anguleuses, plus formelles ;
• Les polices condensées, étroites, représentent la précision tandis que les polices plus étalées dégagent quelque chose de plus détendu.

Ce ne sont que quelques exemples pour vous inciter à explorer le lien entre l’image que vous voulez renvoyer et la police que vous choisissez.

3. Prendre en compte les possibilités de personnalisation de la police

Que vous choisissiez une police gratuite ou payante, elle va comporter un set de caractères (lettres, chiffres, caractères spéciaux) que vous allez pouvoir utiliser mais aussi, très souvent, un ensemble de fichiers correspondant à plusieurs variantes de la police : par exemple, des versions étroites (« condensed »), fines (« thin »), ordinaires (« regular »), grasses (« bold »), etc.

Il est intéressant de tester ce qui rend le mieux sur votre site selon la taille du texte affiché, la taille de l’écran et le contexte d’utilisation (menu, corps de la page, etc).

Sachez aussi qu’un certain nombre de caractéristiques d’une police d’écriture peuvent être travaillées par le biais de la feuille de style du site (langage CSS), ce que l’on appelle la micro-typographie, par exemple :

• L’espacement entre les caractères ou interlettre (propriété letter-spacing en CSS) ou le crénage (font-kerning) ;
• L’espacement entre les lignes ou interligne (propriété line-height en CSS) ;
• L’espacement entre les mots (propriété word-spacing en CSS) ;
• La graisse, qui est l’épaisseur de la police (propriété font-weight en CSS) ;
• La taille de la police (font-size en CSS) ;
• La capitalisation : minuscules, majuscules (text-transform en CSS) ;

Ces éléments permettent à la fois d’améliorer la lisibilité d’une police mais aussi de rendre le style d’un site plus unique.

Sur No Tuxedo par exemple, l’interligne est plus grand qu’un interligne simple : il est égal à 1.6 fois la taille de la police d’écriture, afin que le texte soit plus aéré. De même, sur le titre des articles, j’ai espacé un peu plus les caractères que ce que prévoit la police d’écriture par défaut.

Sur la maquette ci-dessous par exemple, la même police d’écriture (Oswald) est utilisée pour les trois éléments signalés par les flèches… mais vous voyez bien que le rendu est différent, grâce à des variations de l’espacement entre les lettres par exemple (et bien sûr aux changements de la taille de la police).

4. Veiller à une compatibilité maximale

Il est important de tester le rendu sur différents navigateurs et différents appareils (smartphone, PC, Mac) lorsqu’il s’agit de choisir une police d’écriture. En effet, il peut arriver qu’il y ait certaines variations subtiles d’affichage affectant la lisibilité.

De même, pensez à prévoir dans le code du site des polices par défaut, des solutions de secours (« fallback fonts ») qui seront utilisées en remplacement de votre police principale si celle-ci ne se charge pas. Par exemple, on peut écrire dans la feuille de style CSS du site ce type de ligne :

font-family: "Open Sans Condensed", Roboto, sans-serif;

Ce code indique que le site doit utiliser en premier lieu la police « Open Sans Condensed » puis, si celle-ci n’est pas disponible, Roboto… et si celle-ci n’est pas disponible non plus, une police sans-serif (c’est la fameuse police de secours, la « fallback font »). Ce sera en général une police système comme Arial ou Tahoma en sans-serif et Times New Roman ou Georgia en serif.

5. Choisir une police d’écriture performante

Le temps de chargement d’un site est aujourd’hui une composante clé de la performance web, qui impacte à la fois la conversion, le temps passé par le visiteur sur le site, le référencement naturel et bien d’autres facteurs.

Au même titre que les images ou les scripts, les polices d’écriture peuvent avoir un impact sur ce temps de chargement. Il faut donc à la fois veiller au poids des fichiers et à leur mode de chargement :

• Lorsque c’est possible, privilégiez des polices système (comme Segoe UI sur Windows, -apple-system sur Mac) qui évitent de télécharger d’autres ressources ;
• Chargez uniquement les variantes de la police d’écriture que vous utilisez : inutile de charger toutes les versions (light, thin, bold, condensed, extra bold, italic, regular, etc) si vous n’en utilisez qu’une partie.
• Mettez les fichiers des polices sur votre propre serveur au lieu d’adresser une requête à un serveur tiers. Cela permet souvent un chargement un peu plus rapide et évite d’être dépendant d’un autre site, ce dont peuvent découler certaines lenteurs.
• Privilégiez le format WOFF2 (Web Open Font Format 2) qui offre en général une meilleure compression que les formats TTF et OTF (ceux-ci peuvent être utilisés comme formats de secours si le visiteur utilise un vieux navigateur incompatible avec WOFF2, même si je vous conseille de privilégier le format WOFF) ;
• Utilisez le « font subsetting » : cette pratique consiste à supprimer du fichier de la police d’écriture les caractères non utilisés, en utilisant un outil comme le Webfont Generator de Font Squirrel. Par exemple, imaginez qu’une police prévoie à la fois des caractères de l’alphabet latin, de l’alphabet cyrillique et de l’alphabet arabe. Si vous écrivez en français, vous avez seulement besoin de l’alphabet latin, vous pourriez donc créer une version allégée de la police supprimant les autres caractères.

Pensez ensuite à tout ce qui peut améliorer le temps de chargement :

• Mettre en cache les polices : il s’agit de faire en sorte qu’elles soient « mises en mémoire » dans le cache du navigateur d’un visiteur lors de sa première visite sur votre site. Ainsi, il n’aura pas à les charger à nouveau lors d’une visite future.
• Précharger les polices : l’utilisation de <link rel="preload"> dans le code permet de précharger certaines ressources cruciales très rapidement à l’ouverture de la page ;
• Utiliser le chargement asynchrone, qui permet d’éviter que le chargement des polices d’écriture ne bloque l’affichage du reste de la page ;
• Utiliser la propriété « font-display: swap » dans la feuille de style CSS. Elle permet un chargement en deux temps où l’utilisateur peut voir le texte dans une police système par défaut avant que la police choisie ne se charge… ce qui reste moins pire que d’avoir une page blanche sans aucun contenu en attendant que la police se charge.

6. Vérifier les conditions de licence

Choisir une police d’écriture, qu’elle soit gratuite ou payante, implique de respecter les droits de l’auteur de la police. Comme pour une image, le créateur d’une police d’écriture peut spécifier certaines conditions d’utilisation : par exemple, autoriser un usage gratuit sur un site personnel mais exiger le paiement d’une licence sur un site professionnel… ou encore demander à être crédité.

Voici un exemple de licences proposées par le studio Zeta Fonts pour un usage personnel sur des visuels, un usage web, etc.

Quelques conseils supplémentaires pour choisir une police d’écriture

Utilisez très vite du texte sur vos maquettes

Lors de la conception du site web, faites en sorte d’insérer très rapidement du texte afin de visualiser le rendu et la lisibilité, et d’en tenir compte lors de vos différents tests.

Que ce soit avec de vrais articles ou avec du Lorem Ipsum (un texte vaguement inspiré du latin dont les créateurs de sites web se servent pour remplir les pages avant d’avoir le contenu du site), cela vous permettra d’évaluer si les polices choisies fonctionnent bien ensemble et dans tous les contextes où elles sont utilisées (titres, corps de texte, légendes, menus, etc).

Si nécessaire, voici un générateur de Lorem Ipsum pour créer facilement ce type de texte factice en choisissant le nombre de paragraphes ou de caractères que vous désirez.

Quand on crée un site mais que l’on n’a pas encore de contenu, ça permet de se faire une idée très précise du rendu final.

Limitez-vous à 3 polices d’écriture

Une règle de bon sens est de ne pas multiplier les polices d’écriture. D’abord pour des raisons esthétiques, parce qu’un excès de polices peut vite donner une impression de fouillis généralisé ! Ensuite, parce que le fait d’ajouter de nombreuses polices à son blog augmente souvent le temps de chargement des pages.

Les graphistes conseillent en général de ne pas dépasser deux ou trois familles de polices d’écriture différentes. Bien sûr, au sein d’une même famille, on peut tout à fait utiliser différentes variantes de la police : par exemple, utiliser à la fois Roboto Light et Roboto Bold.

Maîtrisez l’usage de la couleur

Choisir une police d’écriture implique aussi de se poser la question de l’usage des couleurs, là encore dans une perspective de lisibilité. Gardez en tête que l’usage de la couleur a un sens et peut influencer le comportement de votre lecteur. Par exemple, quand je tombe sur un site qui met certaines expressions en couleur dans le texte, j’ai tendance à vouloir cliquer dessus car traditionnellement, on utilise la couleur pour identifier les liens à l’intérieur d’un texte.

Il faut donc être prudent avec l’utilisation des couleurs. C’est un peu comme le fait de souligner un texte : historiquement sur le web, c’était le moyen d’identifier les liens, cela peut donc inciter le visiteur à cliquer sur des éléments qui ne sont en réalité pas cliquables.

Pensez au caractère intemporel des polices

Certaines polices sont à la mode, d’autres plus classiques et intemporelles. Il peut être utile de se poser la question lors du choix car si vous optez pour une police tendance, elle risquera forcément de se démoder plus vite. Si vous n’avez pas la possibilité de faire évoluer facilement votre site web pour suivre les « modes » en termes de design, cela peut être un paramètre à prendre en compte.

Demandez des avis

Tester une police d’écriture auprès de différents utilisateurs peut aussi être productif. Vous aurez parfois des retours sur sa lisibilité mais aussi d’éventuelles réactions plus « émotionnelles » qui peuvent être intéressantes (« ça fait vieillot », « ça fait un peu strict », « on dirait un packaging de produit ménager » et j’en passe !).

Dites adieu au texte justifié

Le combat avec moi-même a été long sur ce sujet ;) J’ai toujours adoré le texte justifié pour son apparence « nette et propre ». C’est un texte bien aligné à droite et à gauche comme dans une colonne de presse écrite. Cette tradition de la justification vient justement de la presse, où elle facilitait la lecture en permettant d’identifier plus facilement chaque article.

Sur le web, justifier un texte fait au contraire baisser la lisibilité, comme n’a cessé de me le rappeler une amie graphiste : pour arriver à s’aligner à gauche et à droite, votre texte va jouer sur les espaces entre les mots. Ces espaces deviennent alors irréguliers ce qui peut rendre l’ensemble moins lisible.

La même règle s’applique aux textes centrés : dans nos cultures où nous lisons de gauche à droite, un texte centré est plus difficile à parcourir même s’il reste acceptable pour un titre.

Pour finir, si vous souhaitez identifier une police d’écriture que vous aimez bien sur un site, vous pouvez installer une extension Google Chrome gratuite comme WhatFont ou FontFinder. FontFinder par exemple, que j’apprécie beaucoup, va vous fournir tous les détails d’une police précise : son nom, mais aussi la manière dont elle est personnalisée grâce à la micro-typographie en CSS. De quoi nourrir votre inspiration !

Note : cet article de 2017 a été entièrement réécrit dans le cadre d’une mise à jour. Les commentaires initiaux ont été conservés.