On oublie souvent que le texte – ou plus précisément la police de caractères (ou typographie) – fait partie intégrante de la conception d’un site web. En fait, votre choix de police est l’un des éléments qui influent le plus sur le rendu de votre site web.

Tout d’abord, les polices participent de l’aspect purement visuel du site – en particulier vos polices de titres. Et surtout, peu importe la beauté ou la facilité de navigation de votre site si les visiteurs ont du mal à en lire le contenu.

C’est pourquoi il est judicieux de choisir, pour vos titres et corps de texte, une police facile à lire. Dans cet article, nous allons parler de ce qui rend une police de caractères lisible et découvrir ensemble dix exemples populaires à envisager pour votre prochain site.

Allons-y !

Qu’est-ce qui rend une police de caractères facile à lire ?

Plusieurs facteurs entrent en jeu pour déterminer la facilité de lecture d’une police de caractères. Les trois préoccupations fondamentales sont les suivantes :

• Taille de la police. La taille que vous avez choisie pour votre texte peut rendre la police de caractères difficile à lire. En outre, certaines polices s’adaptent mieux que d’autres aux petites tailles.
• L’espacement. Plus précisément, le crénage, le suivi et le guidage. Ces termes font référence à la proximité des caractères, des mots et des lignes d’une police de caractères. Si l’espacement est trop serré, les caractères deviennent difficiles à discerner. Si l’espacement est trop important, il peut être difficile d’assembler les bonnes lettres pour former des mots.
• Les empattements (serif en anglais). Ce sont les petits traits ou pieds qui se détachent des lignes principales de chaque caractère dans certaines polices de caractères. L’une des plus célèbres est Times New Roman. Il est généralement admis que les polices sans empattements – comme celle que vous lisez actuellement – sont plus faciles à lire sur les écrans. Toutefois, comme vous le verrez dans notre liste ci-dessous, il existe quelques exceptions à cette règle.

En plus de ces facteurs, il y a quelques autres principes à garder à l’esprit. Vous devez généralement éviter les polices manuscrites et les polices décoratives, sauf peut-être pour les logos ou autres textes spéciaux. Il est fortement recommandé de ne jamais les utiliser pour le corps du texte. Ces polices de caractères ont tendance à devenir plus difficiles à lire lorsqu’elles sont de petite taille et utilisées pour de longs blocs de texte.

En outre, faites attention à la couleur de votre police. Il est important que votre texte et votre arrière-plan soient suffisamment contrastés pour que les daltoniens et les malvoyants puissent distinguer les mots plus facilement. Cependant, il est également largement admis que le type « inversé » (texte de couleur claire sur un fond sombre) est plus difficile à lire pour tout le monde.

10 bons choix de polices faciles à lire

Ma liste des polices les plus lisibles comprend une variété de styles adaptés à différents cas d’utilisation dans la conception de sites web. Certaines de ces polices de caractères peuvent vous être immédiatement familières, car elles sont populaires depuis des années. D’autres sont plus récentes et comportent des éléments spécifiquement choisis pour répondre aux besoins des lecteurs numériques modernes.

Allons-y !

Roboto

A l’origine, Google a conçu Roboto pour Android. C’est une police moderne mais accessible, ses courbes amicales et ouvertes offrent un rythme de lecture fluide et naturel.

Roboto offre des variantes intéressantes (condensed et slab) qui permettent de créer une hiérarchie de lecture optimale à partir d’une seule police : par exemple Roboto Slab en gras pour avoir des titres qui détonnent et Roboto Regular pour le corps de texte afin qu’il soit facilement lisible. Pour des titres secondaires, Roboto Condensed sera parfaite : elle apportera une touche de caractère à votre charte sans être trop imposante.

Baskerville

J’aime le caractère classique voire légèrement rétro de cette typographie à empattements. Elle sera parfaite pour mettre en valeur des titres, mais également pour des textes courants – en veillant toutefois à choisir une taille de caractère assez grande pour faciliter la lecture. Cette typographie sera parfaite si vous voulez donner à votre site une atmosphère sérieuse et raffinée.

Georgia

Georgia est une police avec empattement. Comme Baskerville, elle se distingue par sa classe, son aspect « à l’ancienne », ce qui est parfait si vous voulez injecter un peu de caractère dans la conception de votre site.

Georgia se marie bien avec de nombreuses polices sans empattement pour les en-têtes et les titres. C’est une excellente solution si vous aimez l’aspect d’une police avec empattement mais que vous voulez vous assurer que le texte plus petit reste propre et facile à lire.

Cela dit, la police Georgia a été optimisée pour être lue sur des écrans de toutes tailles. Si vous appréciez cette police de caractères, n’ayez pas peur de l’expérimenter comme police de corps de texte.

Merriweather

Merriweather est une autre option pour celles et ceux d’entre vous qui préfèrent les polices avec empattements. Cette police de Google comporte des lettres légèrement condensées qui laissent beaucoup d’espace entre les caractères pour une meilleure lisibilité à l’écran. Elle fait très bien son travail ! D’ailleurs, les utilisateurs de WordPress de longue date se souviendront qu’elle a été utilisée dans d’anciens thèmes par défaut du CMS.

Merriweather se marie bien avec plusieurs autres polices de cette liste, comme Montserrat et Open Sans. Vous pouvez par exemple l’utiliser en gras pour donner de l’impact à vos titres, puis utiliser une police plus simple pour votre corps de texte.

Tisa

Tisa est une police plus récente, populaire auprès des graphistes et des concepteurs de sites web. Bien qu’elle comporte de légers empattements, son espacement soigneux permet de garder le texte lisible même sur des écrans plus petits.

Cette police est très adaptable et peut fonctionner dans n’importe quel contexte. Elle est idéale si vous recherchez un empattement qui n’est pas aussi avancé que celui de Georgia ou de Merriweather.

Montserrat

Montserrat a fait ses premières armes dans la signalisation urbaine. Elle servait de police pour les panneaux dans certains pays anglo-saxons. En 2017, elle a été redessinée avec un poids plus léger pour faciliter la lecture lorsqu’elle est utilisée dans de longs blocs de texte.

Si vous aimez les lignes pures de l’Arial et de l’Helvetica, mais que vous souhaitez une police de caractères un peu plus raffinée, vous pouvez opter pour Montserrat. Elle est parfaite pour les blogs qui cherchent à introduire un peu plus de personnalité tout en minimisant la fatigue des yeux lors de longues lectures.

Open Sans

Le mot « open » dans le nom de cette police fait référence à l’espace négatif dans beaucoup de ses formes de lettres rondes. De nombreuses personnes pensent que cette caractéristique donne à la police une impression d’amabilité ou d’ouverture, ce qui lui confère un style et un ton accueillants.

Open Sans est une police de corps de texte idéale et s’accorde parfaitement avec certaines des typographies les plus fortes de cette liste, telles que Merriweather ou Futura. Elle a également été optimisée pour être lisible sur tous les appareils, ce qui en fait un excellent choix si vous avez beaucoup de contenus longs et que vous vous attendez à un grand nombre d’utilisateurs mobiles.

Lato

Conçue à l’origine pour une entreprise, la police Lato est idéale pour les sites orientés business ou corporate. Élégante et sérieuse, cette police a un aspect professionnel sans pour autant donner une impression de rigidité.

Pour habiller un peu votre design, utilisez la police Lato pour le corps de texte de votre site et associez-la à une police à empattements pour vos titres et en-têtes. Cela vous permettra de garder vos articles de blog ou vos descriptions de produits lisibles tout en laissant transparaître l’identité de votre marque.

Futura

Une autre alternative populaire à l’Helvetica est la police Futura, qui apporte une touche de modernité et d’audace à votre texte. Elle est méticuleusement géométrique et parvient à transmettre beaucoup d’émotions sans pourtant faire appel à des fioritures.

Futura est parfaite pour les startups ou toute marque qui veut paraître avant-gardiste et innovante. Vous pouvez l’associer à une police sans empattement plus légère pour créer des titres accrocheurs ou l’utiliser comme police de caractères directe et sans chichis. Elle est également très populaire pour les logos.

Quicksand

La petite dernière de la liste est ma préférée et je l’utilise très souvent pour les sites de mes clients. Quicksand apporte une personnalité décalée ainsi qu’une optimisation mobile. Quicksand a été conçue en 2008 comme police d’affichage pour les appareils mobiles, mais elle est depuis devenue populaire pour beaucoup d’autres types d’utilisation.

Ses espaces clairs et ses formes rondes apportent de la douceur, rendant Quicksand lisible même dans les petites tailles. Elle se marie parfaitement avec des polices à empattements comme Merriweather ainsi qu’avec des polices sans empattements comme Futura, ce qui vous donne beaucoup de flexibilité lorsque vous l’associez à d’autres polices de caractères.

Dernières réflexions sur le choix d’une police facile à lire

Le choix des bonnes polices de caractères pour vos projets de conception de sites web est crucial. Comprendre quelles polices de caractères sont les plus faciles à lire peut vous donner une longueur d’avance dans ce domaine et vous aider à donner plus d’impact aux contenus de vos sites.

Chacune des polices de caractères que nous venons de passer en revue répond aux critères de grande lisibilité. Maintenant, à vous d’affiner votre choix en fonction de vos goûts et de vos besoins !

Pour ma part, les polices à empattements sont mes préférées pour mettre en valeur les titres, et j’ai tendance à opter pour un choix plus subtil et doux comme Quicksand ou Open Sans pour le corps du texte.

Si la typographie vous intéresse, je vous conseille quelques ouvrages de référence qui m’ont permis de mieux comprendre et utiliser les typographies dans mon travail : Typographie web de Jason Santa Maria, Guide pratique de choix typographique de David Rault et Les fondamentaux de la typographie de Gavin Ambrose et Paul Harris. (Je n’ai pas d’actions chez Eyrolles, j’aime juste leurs ouvrages).

Vous avez des  avis ou des questions sur le choix d’une police lisible pour votre site web ? Partagez-les dans la section commentaires ci-dessous !