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.

Comment choisir une police d'écriture ?
Comment choisir une police d'écriture ?

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 :
    Police serif sur le site du journal Le Monde
    Police serif sur le site du journal Le Monde
  • 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).

La police d'écriture Oswald en contexte
La police d'écriture Oswald en contexte

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.
La typographie, choix esthétique et technique
La typographie, choix esthétique et technique

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.

Licences pour des polices d'écriture
Licences pour des polices d'écriture

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 !

Inspecter une police avec Font Finder
Inspecter une police avec Font Finder
Quelles polices d’écriture utilisez-vous ?

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.


Poster un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

16 commentaires sur “Comment choisir une police d’écriture pour un site web ?
  • Irène

    Pourriez-vous me dire le nom de la police de caractère que vous utilisez dans les titres de présentation de vos articles.Elle est agréable à lire.

    Répondre à Irène
  • Maïlys LD

    J’ai le titre de mon blog, mon menu quand on passe la souris dessus et mon pied de page du blog écrit en « Alex Brush », écriture cursive.

    Ensuite, j’ai le sous-titre du blog + mes titres d’articles + mes labels d’articles écrits en « Amatic SC », une écriture cursive également.

    Et pour mon menu j’ai l’écriture « Quicksand », une sans-sérif. Je voulais l’utiliser pour les textes de mes articles mais je n’y arrive pas, du coup j’utilise Helvetica qui -je trouve- lui ressemble un peu.

    Et je justifie mon texte, je trouve cela plus esthétique et que ça s’accorde plus avec mes photos. J’aère beaucoup mon texte avec des sauts de lignes, etc pour qu’il n’y ai pas de « gros pavés indigestes à lire ». :)

    Répondre à Maïlys
    • Marlène

      Hello, j’aime bien Amatic SC, j’utilisais cette police pour mes titres dans les premiers mois de mon blog.

      Répondre à Marlène
  • Giacometti Brin d'Os

    Bonjour Marlene,
    Si j’ai bien compris, ayant un thème gratuit, je ne peux pas changer les polices d’écriture ?
    Sais-tu par ailleurs si chaque thème comporte un seul thème woo commerce correspondant ?
    Je suis sur wordpress et j’aurais voulu changer le thème de ma boutique :)

    Répondre à Giacometti
    • Marlène

      Hello, on peut généralement changer la police d’écriture comme on le souhaite dès lors qu’on a accès au code.

      Pour WooCommerce, soit tu peux personnaliser toi-même le thème de la boutique proposé par ton thème actuel, soit tu peux choisir des thèmes différents (il existe des plugins pour utiliser des thèmes multiples sur un même WordPress mais je ne sais pas ce que ça vaut). Je pense qu’on peut tout à fait récupérer un thème WooCommerce de son choix et « l’incorporer » à son thème actuel mais ça implique de mettre les mains dans le code pour que la compatibilité soit optimale.

      Répondre à Marlène
  • Laetiboop

    Oulala vaste débat ! J’ai du passer des heures à essayer toutes les polices inimaginables pour finalement opter pour quelque chose d’assez traditionnel.
    Je pense qu’il faut se poser des limites en la matière sinon on peut bien y passer des mois et s’arracher les cheveux ! ;)

    Répondre à Laetiboop
    • Marlène

      Ah mais ça, je trouve que c’est vrai pour tout :) Relire sans fin ses articles, modifier sans fin de petits détails de son design… On peut vite y perdre un temps fou au détriment de l’écriture, des échanges, etc.

      Répondre à Marlène
  • Bernieshoot

    Bonjour Marlène,
    pour ma part j’ai reproduit, à tort peut-être, un modèle de template que j’utilisais dans ma vie professionnelle avec comme police Times New Roman, taille 12 et texte justifié.
    Pour la taille effectivement sur le web, chacun a la possibilité de l’adapter.
    J’ai du mal à considérer que l’alignement à gauche puisse être préférable à un alignement justifié, ou plus exactement, il me semble que bien d’autres critères interviennent avant pour capter le lecteur.

    Répondre à Bernieshoot
    • Marlène

      Oh je te rejoins, il y a tant de choses qui passent avant l’alignement ! C’est pour ça que la réaction du lecteur m’avait fait rire (dire à quelqu’un qu’il n’est pas crédible professionnellement parce qu’il justifie son texte témoigne d’un léger problème de sens des priorités ^^).

      Répondre à Marlène
  • Claude

    J’ai cherché sur votre site, mais sans trouver. Avez-vous déjà publié un article sur « comment ajouter une police de caractères (fonte) sur Blogger »?
    Texte justifié: oh! que ce sera difficile d’abandonner. Vingt ans à monter un journal, dont 4-5 ans avant la venue des ordinateurs, ça marque!

    Répondre à Claude
    • Marlène

      Ah je peux comprendre ! Concernant Blogger, non je n’ai jamais écrit ce type d’article. Le problème, c’est que sur Blogger on ne peut pas héberger de fichiers donc ça suppose que les fichiers de la police soient stockés ailleurs… et ce n’est pas forcément une bonne chose pour la vitesse de chargement (il faut aller récupérer les fichiers sur un site tiers, ce qui prend du temps).

      En revanche, certaines polices Google sont déjà intégrées mais pas forcément faciles à trouver au premier abord. Il faut passer par le menu Thèmes > Personnaliser puis aller dans le sous-menu « Avancé », il y a pas mal de polices à disposition.

      Répondre à Marlène
    • Claude Lamarche

      Oui, les polices dans « avancé », les ai vues.
      J’ai bien essayé d’en rajouter une de Google fonts dans le code html, avant head et en fermant bien la ligne /› +ajout d’un code dans css. Rien à faire. Me contenterai donc de celles de Blogger.
      Merci.

      Répondre à Claude
  • Suny

    J’utilise la police Arial par défaut en fait, pour ma part.

    C’est vrai que je préfère aussi voir, en tant que lecteur, un texte plus justifié qu’aligné à gauche.

    Après pour la police, je comprends que la plupart des lecteurs sont plus attirés par des polices grandes.
    Mais pour des blogueurs qui ont tendance à écrire des textes longs (comme toi Marlène), je me suis demandé si c’était pas mieux une police un peu moins grande, car on a l’impression que l’article peut-être interminable et on passe plus de temps à descendre la barre de défilement à droite.
    Enfin c’est mon ressenti qui est évidemment subjectif.

    Répondre à Suny
    • Marlène

      La notion de « grande » et « petite » est elle aussi très subjective. Il y a toujours des gens pour juger un article trop long ou trop court, quelle que soit la police employée, donc pour ma part ce n’est pas un critère de décision. Quant au manque de motivation à scroller… c’est sûrement vrai pour certaines personnes qui sont rebutées par les articles longs, dans ce cas il existe plein d’alternatives : des vidéos, des podcasts, du microblogging…

      Répondre à Marlène


Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.