--- title: "Guide pratique pour sélectionner la typographie idéale de votre site web" url: https://ksabz.net/guide-pratique-pour-selectionner-la-typographie-ideale-de-votre-site-web.html author: "Sophie Martin" date_published: 2024-11-11T21:31:48+01:00 date_modified: 2026-09-09T13:20:47+02:00 categories: ["Business"] image: https://ksabz.net/wp-content/uploads/2024/11/-20.jpg description: "Dans l'univers du design web, la typographie joue un rôle crucial dans la perception et l'identité d'une marque. Choisir la bonne police peut non seulement renforcer l'attrait visuel de…" site: "ksabz" license: "Reproduction autorisée avec lien vers la source." --- # Guide pratique pour sélectionner la typographie idéale de votre site web Le choix d'une police se joue rarement sur le goût. Il se joue sur trois chiffres qu'on ne regarde presque jamais : la hauteur d'x, le poids du fichier téléchargé, et le décalage de mise en page quand la police arrive après le texte. Le reste, la personnalité de la marque, l'élégance des courbes, arrive après. Une belle typographie illisible à 16 pixels sur un écran de téléphone reste une typographie ratée. Je vais donc prendre le sujet par le côté technique, parce que c'est celui où on peut être précis et où les erreurs coûtent quelque chose de mesurable. Le côté sensible, lui, se règle en regardant des maquettes. ## La hauteur d'x décide de la lisibilité avant la taille ![Caractères typographiques disposés sur une surface claire](https://ksabz.net/wp-content/uploads/2024/11/-19.jpg) Deux polices réglées à la même taille en pixels n'ont pas la même taille apparente. Ce qui compte, c'est la hauteur des minuscules sans jambage, la hauteur d'x. Une police à hauteur d'x généreuse reste confortable à 16 pixels. Une police à hauteur d'x basse, avec de longues hampes élégantes, demandera 18 ou 19 pixels pour le même confort de lecture, et vos paragraphes prendront plus de place. Le test se fait en deux minutes : écrivez un paragraphe réel du site, pas un faux latin, réglez la taille, éloignez-vous d'un mètre de l'écran. Si vous plissez les yeux, la police perd. Regardez aussi les paires qui posent problème dans les formulaires : le 1, le I majuscule et le l minuscule, le 0 et le O. Une police où ces trois signes se confondent est mauvaise pour un site qui affiche des références, des codes postaux ou des identifiants. Autre détail que les designers oublient : le français utilise des accents sur les capitales, des É, des À, des Ç, et des guillemets chevrons. Beaucoup de polices anglo-saxonnes gèrent mal ces signes, avec des accents collés au sommet des lettres quand la ligne est serrée. Écrivez « ÉTÉ » en gros dans la police candidate avant de valider. **Le test des trente secondes** Tapez un vrai paragraphe du site à 16 pixels, sur un téléphone, en lumière du jour. Puis écrivez « Il1lI0O » et « ÉTÉ À ÇA ». Si la lecture fatigue ou si les signes se confondent, aucune considération de style ne rattrapera le problème. ## Combien de graisses vous utilisez vraiment Une famille de caractères propose souvent six ou huit graisses, plus les italiques correspondantes. La tentation est d'en charger beaucoup. La réalité d'un site courant : le corps de texte en régulier, une graisse forte pour les titres et les mises en avant, l'italique du régulier pour les citations. Trois fichiers. Parfois quatre si les titres et le gras du texte diffèrent. Chaque graisse supplémentaire ajoute un fichier à télécharger. Et surtout, ne comptez pas sur le navigateur pour fabriquer un gras que vous n'avez pas chargé : il produira une version épaissie artificiellement, avec des contours empâtés, visible surtout sur les petits corps. Les polices variables changent la donne sur ce point. Un seul fichier contient toute la plage de graisses, souvent pour un poids proche de deux ou trois fichiers statiques. Si vous avez besoin de quatre graisses ou plus, la variable devient plus légère que la somme des fichiers séparés. Si vous n'en utilisez que deux, restez sur des fichiers statiques. ## Le poids des fichiers et le sous-ensemble latin Une police servie en WOFF2 avec le jeu de caractères complet, cyrillique, grec, vietnamien compris, pèse plusieurs fois ce dont un site français a besoin. Le sous-ensemble latin de base plus le latin étendu couvre le français, ses accents, ses ligatures et l'euro. Découper la police à ce périmètre divise le poids par trois ou quatre selon les familles. Les services de polices en ligne le font déjà pour vous via l'attribut de plage Unicode : le navigateur ne télécharge que le morceau dont il a besoin. Si vous hébergez les fichiers vous-même, ce qui est souvent préférable, faites le découpage à la main avec un outil de sous-ensemble et vérifiez ensuite que les caractères spéciaux de vos pages survivent. J'ai déjà vu un site perdre ses guillemets français et ses apostrophes courbes dans l'opération. Servez la police depuis votre propre domaine plutôt que depuis un service tiers. Le cache partagé entre sites n'existe plus dans les navigateurs modernes, l'appel externe ajoute une résolution DNS et une négociation, et vous évitez au passage une question désagréable sur le transfert d'adresses IP vers un service étranger. **Trois réglages qui comptent** Fichiers en WOFF2 uniquement, les formats plus anciens ne servent plus. Sous-ensemble latin plus latin étendu. Préchargement du seul fichier utilisé par le premier écran, jamais des huit. Ces trois lignes de configuration font gagner plus que n'importe quel plugin de performance. ## Le décalage au chargement, ce clignotement qui agace Entre le moment où le navigateur affiche le texte et celui où la police arrive, il se passe quelque chose. Deux comportements existent : la page reste blanche à cet endroit, ou elle affiche une police de secours puis bascule. Le second cas provoque un saut visible si les deux polices n'ont pas les mêmes proportions, et ce saut est compté comme un défaut par les mesures de stabilité visuelle. La propriété font-display arbitre. La valeur swap affiche tout de suite la police de secours puis remplace : rien n'est invisible, mais le saut est là. La valeur optional laisse le navigateur renoncer à la police si elle tarde, ce qui donne une page stable au prix d'un premier affichage parfois dans la police système. Pour un site de contenu, optional est un choix plus défendable qu'il n'y paraît. Le saut se réduit en réglant la police de secours pour qu'elle occupe la même place : les propriétés size-adjust, ascent-override et descent-override sur une déclaration de police locale servent exactement à ça. Deux heures de travail pour un résultat visible, c'est rare en optimisation d'affichage. ## Les licences, le sujet qu'on découvre trop tard Une police téléchargée sur un site d'échange gratuit n'est pas forcément libre d'usage web. Beaucoup sont distribuées pour un usage personnel, ce qui exclut le site d'une entreprise. Les licences commerciales facturent souvent la police d'impression et la police web séparément, la seconde selon le nombre de pages vues mensuelles ou par paliers de trafic. Une licence de bureau n'autorise pas le dépôt du fichier sur un serveur web. C'est le contresens le plus fréquent : le graphiste livre sa maquette avec la police achetée pour son poste, l'intégrateur met le fichier en ligne, et personne ne s'aperçoit du problème avant un courrier du fondeur. Les familles sous licence libre ouverte évitent ce genre d'histoire, s'installent sur vos serveurs sans compter les visites, et couvrent largement les besoins d'un site courant. Gardez simplement le fichier de licence à côté des fichiers de police dans le dépôt, avec la date de téléchargement et la version. Dans trois ans, personne ne se souviendra d'où venait cette police. **À vérifier avant de mettre en ligne** La licence couvre-t-elle l'usage web, et jusqu'à quel volume de trafic ? Le fichier de licence est-il archivé avec les fichiers de police ? Si le graphiste a livré une police achetée pour son ordinateur, elle n'a pas le droit d'être servie par votre serveur. ## Combien de polices sur un site Deux familles suffisent presque toujours : une pour les titres, une pour le texte. Une seule famille bien dotée en graisses fait aussi très bien l'affaire, et c'est un choix que je recommande souvent pour les sites de moins de cinquante pages. Trois familles, c'est déjà un site qui a du mal à décider ce qu'il est. La police décorative se réserve au logo et à rien d'autre. Dès qu'elle apparaît dans un titre de section, elle sera un jour reprise dans un intertitre, puis dans une accroche, et le site perdra sa tenue en six mois de publications. ## Ce qu'on me demande souvent **Sans empattements ou avec ?** Sur les écrans actuels, la question ne se tranche plus par la technique. Les deux se lisent bien. Choisissez selon le ton, vérifiez la hauteur d'x. **Faut-il éviter les polices système ?** Non. Une pile de polices système ne coûte aucun téléchargement, n'a aucun décalage au chargement, et rend un site correct. Sur un projet où la performance prime, c'est un choix sérieux. **Comment tester avant de s'engager ?** Sur du contenu réel, sur au moins un téléphone d'entrée de gamme, avec un texte long et un tableau de chiffres. Les surprises viennent des chiffres alignés et des mots longs en majuscules. --- ## À propos de l'auteur **Sophie Martin** — Je m’appelle Sophie Martin et je suis fascinée par tout ce qui fait avancer les entreprises sur le web. Ma passion : comprendre les stratégies, les bonnes pratiques et les idées qui permettent à un business de se développer, de se démarquer et de créer une véritable valeur. J’aime décortiquer ce qui fonctionne vraiment : stratégies marketing, acquisition, expérience client, contenu, organisation ou encore nouvelles tendances du digital. Je cherche les approches concrètes, les idées innovantes et les méthodes qui peuvent faire la différence, au-delà des simples effets de mode. Curieuse et toujours à l’affût de nouvelles pratiques, j’adore analyser les réussites, comprendre les choix qui se cachent derrière et partager ce que l’on peut en apprendre. Mon objectif est simple : transformer des concepts parfois complexes en conseils clairs, utiles et directement applicables. À travers mes articles, je veux aider les entrepreneurs et les entreprises à prendre de meilleures décisions, à saisir les opportunités du web et à faire évoluer leur business avec plus de stratégie, de créativité et d’impact.