Typographie web : comment choisir et associer les polices d’un site sans sacrifier la lisibilité ?

La typographie donne une voix à la marque

J’aime bien imaginer la typographie comme une voix.

Deux personnes peuvent prononcer exactement la même phrase avec des intentions complètement différentes.

La typographie produit un effet assez similaire.

Une serif très contrastée peut apporter une sensation éditoriale ou élégante.

Une sans serif géométrique peut évoquer quelque chose de plus contemporain ou technologique.

Une typographie très ronde peut sembler plus accessible ou ludique.

Une fonte très condensée peut donner davantage de tension et d’impact.

Une typographie manuscrite peut introduire quelque chose de plus personnel.

Mais aucune de ces associations n’est automatique.

Comme pour les couleurs, je préfère éviter les raccourcis du type :

« Une serif est forcément premium »

ou :

« Une sans serif est forcément moderne ».

Tout dépend :

• du dessin précis du caractère ;
• de sa graisse ;
• de son utilisation ;
• des couleurs ;
• des images ;
• de la mise en page ;
• et de tout l’univers qui l’accompagne.

Serif, sans serif, display, manuscrite : comment s’y retrouver ?

Sans entrer dans toute l’histoire de la typographie, quelques grandes familles permettent de commencer à se repérer.

Les typographies serif

Elles possèdent des empattements aux extrémités des caractères.

Elles peuvent donner une sensation :

• éditoriale ;
• classique ;
• élégante ;
• culturelle ;
• ou au contraire très contemporaine selon leur dessin.

Les sans serif

Elles ne possèdent pas ces empattements.

On les rencontre énormément dans les interfaces numériques.

Mais là encore, elles peuvent aller d’un caractère extrêmement neutre à une police très originale.

Les display fonts

Elles sont principalement conçues pour produire un impact visuel.

Elles peuvent être :

• très épaisses ;
• très contrastées ;
• déstructurées ;
• condensées ;
• ornementales ;
• inspirées d’une période graphique particulière.

Je les trouve particulièrement intéressantes sur les titres courts.

Les typographies manuscrites

Elles peuvent apporter beaucoup de personnalité et de proximité.

Mais elles demandent généralement davantage de prudence lorsqu’elles sont utilisées sur de longs contenus.

Typographie expressive ou fonctionnelle : faut-il choisir ?

Non.

Et c’est justement l’association que j’aime souvent travailler.

Une typographie très expressive peut être utilisée pour :

• le H1 ;
• certains H2 ;
• des accroches ;
• des citations ;
• des chiffres ;
• des mots très courts.

Puis une police plus simple peut prendre le relais pour :

• les paragraphes ;
• les formulaires ;
• les menus ;
• les fiches produits ;
• les boutons ;
• les informations fonctionnelles.

Cette opposition peut créer une vraie personnalité.

La typographie expressive attire. La typographie fonctionnelle permet de rester.

Le caractère n’a donc pas besoin d’être présent partout pour être identifiable.

C’est assez proche de la logique que j’utilise avec une couleur d’accent.

J’en parle également dans mon article consacré à la manière de choisir une palette de couleurs pour une identité visuelle et un site web.

Combien de polices utiliser sur un site web ?

Je n’aime pas beaucoup les règles absolues du type :

« Il ne faut jamais utiliser plus de deux polices. »

Mais dans la majorité des projets, une ou deux familles bien utilisées suffisent largement.

On peut par exemple avoir :

• une police de titre expressive ;
• une police fonctionnelle pour le reste.

Ou même utiliser une seule famille possédant :

• plusieurs graisses ;
• plusieurs largeurs ;
• des italiques ;
• des variantes adaptées aux titres.

Chaque nouvelle famille ajoute des possibilités.

Mais elle ajoute aussi :

• des règles supplémentaires ;
• des risques d’incohérence ;
• des fichiers supplémentaires à charger ;
• et des décisions supplémentaires pour chaque nouveau contenu.

Ajouter une troisième police doit donc apporter quelque chose de réellement utile.

Comment associer deux typographies ?

Associer deux polices ne consiste pas seulement à trouver deux caractères que l’on aime.

Il faut créer une relation.

Plusieurs approches sont possibles.

Créer un contraste fort

Par exemple :

• serif expressive + sans serif très sobre ;
• display très épaisse + texte léger ;
• caractère condensé + police plus large et aérée.

Créer une continuité

Deux familles peuvent au contraire partager certaines proportions et produire une association beaucoup plus discrète.

Utiliser une super-famille

Certaines familles typographiques proposent plusieurs versions conçues pour fonctionner ensemble.

C’est une solution intéressante lorsqu’on veut de la variété sans perdre la cohérence.

Dans tous les cas, je teste les deux typographies dans la vraie interface.

Une combinaison qui paraît parfaite avec les mots :

« Brand Identity »

peut se comporter très différemment avec :

« Accompagnement à la transformation numérique des entreprises ».

Créer du contraste sans créer de conflit

Deux typographies trop proches peuvent parfois sembler être une erreur plutôt qu’une association volontaire.

Si elles ont :

• des proportions presque identiques ;
• une construction proche ;
• une graisse similaire ;
• et des tailles très proches,

le contraste risque d’être insuffisant.

À l’inverse, deux caractères très expressifs peuvent se battre constamment pour attirer l’attention.

Je préfère généralement qu’une typographie prenne le rôle principal tandis que l’autre joue un rôle d’accompagnement.

Il faut créer une conversation entre les caractères, pas une compétition.

La typographie construit la hiérarchie visuelle

Le choix typographique ne sert pas uniquement l’identité.

Il aide aussi l’utilisateur à comprendre la page.

On peut différencier :

• le H1 ;
• les H2 ;
• les H3 ;
• le texte d’introduction ;
• le texte courant ;
• les légendes ;
• les citations ;
• les informations secondaires.

Ces différences peuvent utiliser :

• la taille ;
• la graisse ;
• la famille ;
• la couleur ;
• l’espacement ;
• l’italique.

Kim développe précisément ce sujet dans son article consacré à la hiérarchie visuelle et à la manière de guider l’utilisateur dans une page web.

La typographie devient ici un véritable outil UX.

Comment choisir une typographie pour les textes longs ?

Pour les paragraphes, mes priorités changent.

Je cherche avant tout une lecture confortable.

Je vérifie notamment :

• si les lettres sont suffisamment différenciées ;
• si les petits caractères restent lisibles ;
• si les accents sont correctement dessinés ;
• si les chiffres fonctionnent bien ;
• si la ponctuation est claire ;
• si les graisses sont réellement exploitables.

Une typographie peut être magnifique sur un H1 de 72 pixels et devenir médiocre à 16 ou 18 pixels.

Il faut donc toujours la tester à la taille où elle sera réellement utilisée.

Quelle taille de texte utiliser sur un site web ?

Il n’existe pas de taille universelle qui fonctionnerait pour tous les projets.

La lisibilité dépend notamment :

• de la police ;
• de sa hauteur d’x ;
• de la graisse ;
• du contraste ;
• de la largeur de colonne ;
• du support.

Deux polices réglées à la même taille CSS peuvent paraître très différentes visuellement.

Une base autour de 16 à 18 pixels est fréquente pour le texte courant sur le web, mais je préfère la considérer comme un point de départ à tester plutôt qu’une règle.

Il faut surtout vérifier le résultat :

• sur ordinateur ;
• sur smartphone ;
• avec des contenus longs ;
• et avec différents niveaux de zoom.

Interlignage : laisser le texte respirer

Une police lisible peut devenir fatigante si les lignes sont trop serrées.

L’interlignage permet à l’œil de retrouver plus facilement le début de la ligne suivante.

Les WCAG 2.2 demandent notamment qu’une interface puisse supporter, sans perte de contenu ou de fonctionnalité, un interlignage porté à 1,5 fois la taille du texte ainsi que d’autres augmentations d’espacement.

Vous pouvez consulter le critère Text Spacing du W3C.

Pour les textes longs, j’aime généralement disposer d’une respiration suffisamment généreuse.

Mais là encore, tout dépend du caractère utilisé.

Un grand titre sur deux lignes peut demander un interlignage beaucoup plus serré qu’un paragraphe.

Quelle longueur donner aux lignes de texte ?

La typographie ne peut pas être séparée de la mise en page.

Un texte courant affiché sur toute la largeur d’un écran desktop peut devenir difficile à suivre.

Le regard doit parcourir une distance importante puis retrouver le début de la ligne suivante.

À l’inverse, des lignes extrêmement courtes créent des retours permanents et peuvent casser le rythme de lecture.

Je préfère donc définir une largeur maximale pour les contenus éditoriaux plutôt que laisser automatiquement les paragraphes utiliser toute la largeur disponible.

Cela contribue aussi à donner davantage de structure à la page.

Comment utiliser les différentes graisses typographiques ?

Une famille peut proposer :

• Thin ;
• Light ;
• Regular ;
• Medium ;
• SemiBold ;
• Bold ;
• Black.

Mais cela ne signifie pas que toutes doivent être utilisées.

Je préfère souvent limiter le système à quelques niveaux clairs.

Par exemple :

Les graisses très fines doivent être utilisées avec prudence, notamment lorsque les textes sont petits ou peu contrastés.

Faut-il écrire les titres en majuscules ?

Les capitales peuvent donner beaucoup d’impact.

Elles fonctionnent particulièrement bien pour :

• une catégorie ;
• un petit label ;
• un menu court ;
• certains titres ;
• un élément graphique.

Mais un paragraphe entier en majuscules devient souvent beaucoup plus difficile à parcourir.

Je préfère donc les considérer comme un effet typographique ponctuel.

L’espacement entre les lettres peut également nécessiter un ajustement lorsque l’on utilise des capitales.

Espacement des lettres : attention au tracking

L’espace entre les caractères peut transformer la perception d’un texte.

Augmenter légèrement le tracking d’un petit texte en capitales peut apporter davantage de respiration.

Mais un espacement excessif sur du texte courant peut ralentir la lecture.

À l’inverse, des caractères trop rapprochés peuvent finir par se confondre.

Les WCAG demandent également que les contenus restent fonctionnels lorsqu’un utilisateur augmente l’espacement des lettres jusqu’à 0,12 fois la taille de la police et celui des mots jusqu’à 0,16 fois cette taille. :contentReference[oaicite:0]{index=0}

Le design doit donc rester suffisamment flexible pour supporter ces adaptations.

La typographie doit évoluer sur mobile

Une composition typographique spectaculaire sur un grand écran ne fonctionne pas forcément telle quelle sur smartphone.

Un H1 de trois mots peut occuper deux lignes sur desktop et cinq lignes sur mobile.

Il faut donc vérifier :

• la taille ;
• l’interlignage ;
• les retours à la ligne ;
• la longueur des mots ;
• les espaces ;
• les boutons ;
• les menus.

Je préfère adapter les proportions plutôt que réduire mécaniquement tout le système.

Le W3C recommande d’ailleurs de concevoir les interfaces pour différentes tailles de viewport et de vérifier comment l’organisation des contenus évolue lorsque l’espace disponible diminue. :contentReference[oaicite:1]{index=1}

Typographie et accessibilité : la personnalité ne doit pas empêcher la lecture

Une typographie originale peut parfaitement être utilisée dans un site accessible.

Il faut simplement choisir son rôle.

Une police très décorative peut fonctionner sur :

• un H1 ;
• un mot ;
• une citation ;
• un élément de marque.

Et être remplacée par une police plus confortable dès que le volume de texte augmente.

Il faut aussi vérifier :

• les contrastes ;
• la taille ;
• la graisse ;
• les espacements ;
• les états de zoom ;
• la lisibilité sur mobile.

TooNetCreation développe également ce sujet dans son article « Accessibilité web et design : non, un site accessible n’est pas forcément moche ».

Le W3C rappelle notamment que les espaces et les titres participent à la compréhension et au regroupement des contenus. :contentReference[oaicite:2]{index=2}

Penser aux accents, symboles et langues étrangères

C’est un point que l’on peut facilement oublier lorsqu’on choisit une typographie sur quelques mots de démonstration.

Il faut vérifier que la fonte contient bien tous les caractères nécessaires.

En français :

• é ;
• è ;
• à ;
• ç ;
• œ ;
• les guillemets ;
• les caractères accentués en capitales.

Sur un site multilingue, la question devient encore plus importante.

Une typographie peut ne pas couvrir :

• le cyrillique ;
• le grec ;
• le japonais ;
• le coréen ;
• certains caractères chinois.

Dans ce cas, le navigateur devra utiliser une autre police pour ces glyphes.

MDN rappelle d’ailleurs que le navigateur parcourt la liste définie dans font-family et peut sélectionner une police de secours lorsqu’un caractère n’est pas disponible dans la police principale. :contentReference[oaicite:3]{index=3}

Pour une marque internationale, cela mérite d’être testé très tôt.

Police web, police système et police de secours

Une maquette Figma peut utiliser une typographie installée sur l’ordinateur du designer.

Mais cela ne signifie pas qu’elle sera disponible sur le navigateur de l’utilisateur.

Il existe principalement deux solutions.

Utiliser une webfont

La police est téléchargée par le navigateur avec le site.

Utiliser une police système

Le navigateur utilise une police déjà installée sur l’appareil.

Dans les deux cas, il est recommandé de prévoir une font stack.

Par exemple :

font-family: "MaPolice", "Helvetica Neue", Arial, sans-serif;

MDN recommande d’ailleurs de terminer la liste par une famille générique comme serif ou sans-serif, afin que le navigateur puisse toujours afficher une alternative adaptée. :contentReference[oaicite:4]{index=4}

Les polices variables : une piste intéressante

Les variable fonts permettent de regrouper dans un même fichier plusieurs variations qui nécessitaient historiquement plusieurs fichiers séparés.

Une police variable peut notamment proposer des axes de variation comme :

• la graisse ;
• la largeur ;
• l’inclinaison ;
• la taille optique.

Cela peut donner beaucoup de flexibilité au système graphique.

MDN explique que les polices variables permettent justement d’accéder à plusieurs variations d’une même famille à travers un seul fichier et une seule déclaration @font-face. :contentReference[oaicite:5]{index=5}

Pour un design system, c’est particulièrement intéressant lorsqu’on veut créer plusieurs niveaux tout en conservant une forte cohérence typographique.

Les typographies ont aussi un impact sur les performances du site

Une typographie n’est pas uniquement un choix graphique.

Une webfont doit être téléchargée.

Si nous utilisons :

• quatre familles ;
• six graisses par famille ;
• plusieurs italiques ;

le poids et le nombre de ressources peuvent rapidement augmenter.

web.dev rappelle que les webfonts peuvent notamment avoir un impact sur :

• l’affichage initial du texte ;
• le LCP ;
• les changements de mise en page ;
• le CLS.

La documentation Best practices for fonts détaille les principales stratégies de chargement et de rendu. :contentReference[oaicite:6]{index=6}

Pour moi, cela confirme encore une fois l’intérêt de ne pas multiplier les fontes sans raison.

Une police supplémentaire doit apporter davantage de valeur graphique qu’elle n’ajoute de complexité.

Ne pas oublier les licences des typographies

Une police trouvée sur Pinterest, Behance ou un site de ressources graphiques n’est pas forcément librement utilisable dans un projet commercial.

Avant de la retenir, il faut vérifier :

• la licence desktop ;
• la licence webfont ;
• l’utilisation commerciale ;
• le nombre de visiteurs éventuellement couvert ;
• les droits de modification ;
• les usages prévus par le client.

Une fonte gratuite pour un usage personnel n’est pas nécessairement gratuite pour le site d’une entreprise.

C’est un critère qui doit être vérifié avant de construire toute l’identité autour du caractère.

Du moodboard au choix typographique

La typographie commence souvent à apparaître très tôt dans mes recherches.

Dans un moodboard, je peux intégrer :

• une affiche ;
• une couverture de magazine ;
• un packaging ;
• une interface ;
• un logotype ;
• un extrait typographique.

Je ne cherche pas nécessairement la police exacte à ce stade.

Je peux simplement identifier une intention :

« J’aimerais une serif très expressive associée à une sans serif plus fonctionnelle. »

ou :

« Je veux quelque chose de très massif et graphique sur les titres. »

Je détaille cette phase dans mon article « Moodboard : comment passer de l’inspiration à une véritable direction artistique ? ».

Comment intégrer la typographie dans une charte graphique ?

Une charte ne devrait pas se limiter à écrire :

« Titres : Playfair Display / texte : Montserrat ».

Il est beaucoup plus utile de documenter les usages.

On peut également préciser :

• les tailles ;
• les interlignages ;
• les espacements ;
• les usages interdits ;
• les adaptations mobiles.

3 exemples de directions typographiques

1. Une marque premium éditoriale

On peut imaginer :

• une serif élégante pour les grands titres ;
• une sans serif très sobre pour les contenus ;
• beaucoup d’espace ;
• des graisses relativement fines sur les grands formats.

2. Une marque créative et énergique

On peut utiliser :

• une display très expressive ;
• des titres courts et très grands ;
• une sans serif fonctionnelle pour maintenir la lisibilité ;
• des changements de tailles beaucoup plus marqués.

3. Une entreprise B2B contemporaine

Une seule famille variable peut suffire.

On peut créer la hiérarchie grâce :

• aux graisses ;
• aux tailles ;
• aux largeurs ;
• aux couleurs.

Le résultat peut être très sobre tout en restant identifiable.

C’est exactement pourquoi je préfère ne pas partir d’une règle du type :

« Une marque créative doit avoir une police originale. »

La personnalité peut venir de la manière dont la typographie est utilisée, pas uniquement du dessin du caractère.

Ma méthode pour choisir les typographies d’un projet

1. Comprendre la personnalité de la marque

Je commence par ce qu’elle doit transmettre.

2. Observer le moodboard

Je regarde quelles directions typographiques émergent naturellement.

3. Identifier les usages

Titres courts, contenus longs, fiches produits, formulaires, application...

4. Explorer plusieurs familles

Je teste différents niveaux de personnalité.

5. Tester avec de vrais mots

Je n’utilise pas uniquement le nom de la police ou une phrase de démonstration.

6. Tester les accents et caractères spécifiques

Particulièrement si le site est multilingue.

7. Construire plusieurs associations

Je compare les relations entre titre et texte courant.

8. Créer une première hiérarchie

H1, H2, H3, paragraphe, CTA et éléments secondaires.

9. Tester sur de vraies maquettes

La typographie doit fonctionner dans l’interface et pas uniquement sur une planche.

10. Tester mobile et desktop

Je vérifie les retours à la ligne et les proportions.

11. Vérifier accessibilité et performances

La direction artistique doit rester exploitable.

12. Documenter

Les règles rejoignent ensuite la charte ou le design system.

C’est cette logique que nous intégrons dans nos démarches de création d’identité visuelle et de conception UX/UI chez TooNetCreation.

Ma checklist avant de valider une typographie

• Personnalité : correspond-elle réellement à la marque ?
• Différenciation : apporte-t-elle quelque chose à l’identité ?
• Lisibilité : fonctionne-t-elle sur des paragraphes réels ?
• Hiérarchie : les différents niveaux sont-ils clairement identifiables ?
• Graisses : dispose-t-on des variantes réellement nécessaires ?
• Accents : tous les caractères français sont-ils présents ?
• International : la police couvre-t-elle les langues prévues ?
• Mobile : les titres restent-ils maîtrisables sur petit écran ?
• Accessibilité : taille, contraste et espaces permettent-ils une lecture confortable ?
• Performance : le nombre et le poids des fichiers restent-ils raisonnables ?
• Fallback : une police de secours est-elle prévue ?
• Licence : les droits correspondent-ils réellement aux usages du projet ?
• Cohérence : la typographie fonctionne-t-elle avec les couleurs, les photographies et la composition ?

Si la typographie fonctionne sur tous ces niveaux, elle commence réellement à faire partie d’un système graphique et non plus simplement d’un choix esthétique.

FAQ : typographie web et identité visuelle

Combien de polices faut-il utiliser sur un site web ?

Il n’existe pas de règle absolue, mais une ou deux familles suffisent dans de nombreux projets. Une seule famille possédant plusieurs graisses peut même créer une hiérarchie complète.

Quelle est la meilleure police pour un site internet ?

Il n’existe pas de police universellement meilleure. Le choix dépend de l’identité de la marque, du type de contenus, du public, des langues et des usages de l’interface.

Peut-on utiliser une police serif sur le web ?

Oui. Les écrans modernes permettent parfaitement d’utiliser des serif. La lisibilité dépend davantage du dessin précis de la police, de sa taille, de son contraste et de son utilisation que de la présence ou non d’empattements.

Peut-on mélanger une serif et une sans serif ?

Oui. C’est même une association très fréquente. Elle peut créer un contraste clair entre les titres et les contenus courants.

Quelle taille de police utiliser pour le texte courant ?

Il n’existe pas de valeur universelle. Une taille autour de 16 à 18 pixels constitue souvent un point de départ sur le web, mais le résultat doit être évalué selon la police, la largeur de ligne et le support.

Qu’est-ce qu’une variable font ?

Une police variable regroupe plusieurs variations d’un caractère dans un même fichier et permet notamment de faire varier la graisse, la largeur ou d’autres axes selon la famille utilisée.

Pourquoi prévoir une police de secours ?

Une webfont peut ne pas être disponible immédiatement ou ne pas contenir certains caractères. Une font stack permet au navigateur de sélectionner une alternative appropriée.

Les polices Google Fonts sont-elles meilleures pour le SEO ?

Non. Le choix d’une typographie ne procure pas directement un avantage SEO. En revanche, la lisibilité, l’expérience utilisateur et la manière dont les webfonts sont chargées peuvent avoir des conséquences sur la qualité et les performances du site.

Une typographie originale peut-elle être accessible ?

Oui, si son utilisation reste adaptée. Une police expressive peut parfaitement être réservée aux grands titres tandis qu’une typographie plus fonctionnelle prend le relais sur les contenus longs.

Sources et ressources pour aller plus loin

• W3C – Understanding Text Spacing : recommandations relatives à l’adaptation de l’interlignage et des espacements typographiques.
• W3C – Designing for Web Accessibility : recommandations de conception concernant lisibilité, espacements, regroupements et responsive design.
• MDN – Fontes Web : fonctionnement des webfonts, font stacks et intégration avec @font-face.
• MDN – Variable Fonts : fonctionnement et utilisation des polices variables.
• web.dev – Best practices for fonts : impact des fontes sur le chargement, le rendu et les Core Web Vitals.
• Google Fonts : bibliothèque de familles typographiques et outil d’exploration.

À lire également sur TooNetCreation

• Comment créer une identité visuelle forte sans sacrifier l’expérience utilisateur ?
• Moodboard : comment passer de l’inspiration à une véritable direction artistique ?
• Comment choisir une palette de couleurs pour son identité visuelle et son site web ?
• Hiérarchie visuelle : comment organiser une page web pour guider l’utilisateur ?
• UX et UI : quelles différences et pourquoi les deux sont indispensables à un site web ?
• Création d’identité visuelle et charte graphique
• Conception UX/UI et expérience utilisateur