Choisir une police de caractère pour une marque B2B

Le choix d’une police de caractère se discute presque toujours sur le goût, et se paie presque toujours sur autre chose. Trois contraintes décident, et aucune n’est esthétique : ce que la licence autorise, la lisibilité de vos chiffres, et le nombre de fichiers à charger.

L’appréciation visuelle vient après, sur les candidates qui ont passé ces trois filtres. Prise dans cet ordre, la décision se règle en une réunion. Prise dans l’ordre inverse, elle produit une police retenue pour son allure, puis écartée six mois plus tard parce que sa licence ne couvre pas le site, ou parce que les tableaux de votre documentation technique sont devenus illisibles.

La licence, le poste qu’on découvre trop tard

Une police de caractère est un logiciel, et son usage est encadré par une licence. C’est le point que la plupart des dirigeants découvrent au moment où leur agence web leur demande les fichiers, c’est-à-dire trop tard pour changer d’avis sans tout reprendre.

Le principe à connaître est simple : les licences se déclinent par usage, et chaque usage se négocie séparément. Les grandes familles d’usage sont l’installation sur des postes de travail, la diffusion sur un site internet, l’intégration dans une application, et l’incorporation dans un document distribué à des tiers.

La conséquence pratique surprend souvent. Une police achetée pour être installée sur les ordinateurs de l’entreprise, et utilisée dans vos présentations et vos documents, n’est pas automatiquement autorisée sur votre site. Le second usage suppose une licence distincte, dont les modalités et le prix diffèrent, et qui est parfois calculée sur une volumétrie.

Trois questions à poser avant d’acheter, et à conserver par écrit.

Quels usages la licence couvre-t-elle nommément ?

Site internet, documents commerciaux, application, signalétique imprimée, créations publicitaires. Faites la liste de vos usages réels avant de demander un devis, l’exercice révèle en général deux ou trois usages oubliés.

La licence est-elle perpétuelle ou périodique ? Certaines licences web sont annuelles. Une police qui cesse d’être payée cesse d’être utilisable, ce qui transforme votre identité visuelle en abonnement.

Puis-je héberger les fichiers sur mon propre serveur ? C’est aujourd’hui la pratique recommandée, notamment pour éviter une requête vers un domaine tiers, sujet qui touche à vos obligations en matière de données personnelles, traité dans mentions légales, CGV et cookies.

Le cas des polices libres

Une réponse simple existe pour une PME qui ne veut pas gérer ce sujet : les polices placées sous licence libre, dont relève l’essentiel de la bibliothèque Google Fonts.

La SIL Open Font License autorise explicitement un usage commercial large. Vous pouvez employer ces polices « dans des livres, des affiches, des visuels, des logos, et sur des sites internet, sans qu’aucune mention ne soit requise ». Elle permet aussi de « modifier et redistribuer librement » les polices concernées, et leur intégration dans des applications sous certaines conditions.

La contrainte principale porte sur les noms de police réservés : lorsqu’un auteur en a déclaré, une version modifiée doit changer de nom. C’est une contrainte de nommage, pas d’usage, et elle ne gêne en pratique que ceux qui redistribuent une police modifiée.

Une remarque de positionnement, puisque l’objection revient souvent : une police libre n’est pas une police au rabais. Le fait qu’elle soit largement utilisée réduit sa capacité à vous distinguer à elle seule, ce qui est un vrai argument, mais qui se traite au niveau du système typographique complet plutôt qu’en payant une licence. Ce que vous faites de deux graisses et d’une échelle de tailles distingue davantage qu’une police rare mal employée.

La licence web se mesure en pages vues, et se rachète

C’est le mécanisme le plus mal compris, et celui qui produit les régularisations les plus désagréables.

Une licence web s’achète par palier de trafic. Les fondeurs annoncent des seuils exprimés en pages vues mensuelles, de l’ordre de dix mille, cent mille, un million, puis illimité. Une fois le volume prépayé épuisé, il faut en racheter. Certains fondeurs proposent une licence perpétuelle à partir d’un certain volume moyen, d’autres non.

La conséquence est contre-intuitive : votre conformité se dégrade quand votre marketing fonctionne. Une entreprise dont l’audience double après une refonte réussie sort de sa licence sans avoir touché à son site. Personne ne l’en avertit, et le sujet ressurgit au pire moment, souvent lors d’un audit ou d’un changement de prestataire.

Ce qu’il faut faire, une fois. Notez dans le même document le palier acheté, la date d’achat et l’audience mensuelle actuelle. Relisez cette ligne à chaque revue budgétaire. C’est deux minutes par an et cela évite une régularisation rétroactive.

Onze usages, pas un seul

Les contenus grand public parlent de « licence commerciale » au singulier. Chez plusieurs fondeurs, l’offre se décompose en une dizaine de licences distinctes : poste de travail, logo, web, application, publicité numérique, vidéo et diffusion, jeu vidéo, livre numérique, édition, serveur, et une formule illimitée.

Trois d’entre elles concernent directement une entreprise B2B et sont presque toujours oubliées.

La licence logo. Souvent vendue séparément. Une police installée sur un poste de travail ne vous autorise pas nécessairement à composer votre logo avec, et donc à le déposer. Le point mérite d’être vérifié avant un dépôt de marque, sujet traité dans nom de marque : choisir, vérifier, déposer.

La licence publicité numérique. Vos annonces graphiques diffusées chez des tiers sortent du périmètre de la licence web, qui couvre votre site.

La licence vidéo et diffusion. Un titrage dans une vidéo publicitaire relève d’un usage distinct.

Le geste utile consiste à recenser vos usages réels avant de demander un devis : combien de postes, quelle audience mensuelle, un logo ou non, de la publicité ou non, de la vidéo ou non. Un fondeur chiffre sur cette base, et un devis demandé sans ces éléments est systématiquement à refaire.

La lisibilité, et le cas des chiffres

La lisibilité des chiffres est le critère le plus négligé et le plus spécifiquement B2B. Vos documents contiennent des références produit, des numéros de série, des quantités, des tableaux, des prix, des unités. Une police choisie sur l’allure d’un titre peut rendre tout cela pénible à lire.

Deux fonctionnalités typographiques comptent plus que la famille retenue, et elles ne sont pas présentes dans toutes les polices.

Les chiffres de largeur fixe. La valeur CSS tabular-nums, qui correspond à la fonctionnalité OpenType tnum, active selon la documentation MDN « l’ensemble de chiffres où tous les nombres ont la même taille, ce qui permet de les aligner facilement comme dans des tableaux ». Sans cette fonctionnalité, un tableau de quantités présente des colonnes qui ondulent, parce que le 1 est plus étroit que le 8. Sur un devis ou une nomenclature, c’est immédiatement visible.

Le zéro barré

La valeur slashed-zero, correspondant à la fonctionnalité OpenType zero, « force l’utilisation d’un 0 barré, ce qui est utile lorsqu’une distinction nette entre le O et le 0 est nécessaire ». Sur une référence produit du type AO0-12, l’ambiguïté n’est pas une coquetterie de typographe : elle produit des erreurs de commande.

Deux autres points de lisibilité méritent un test rapide, propre à votre secteur.

Les caractères ambigus. Le I majuscule, le l minuscule et le chiffre 1 se confondent dans de nombreuses polices géométriques. Écrivez Il1 dans la police candidate et regardez. Si vos références produit mélangent lettres et chiffres, ce test est éliminatoire.

Le comportement en petit corps. Une police élégante à 48 pixels peut devenir illisible à 12, taille à laquelle sont composés vos tableaux et vos mentions. Testez à la taille réelle d’usage, pas sur une planche de présentation.

Que se passe-t-il pendant le chargement d’une police ?

Le sujet est moins critique qu’on ne le dit, à condition de comprendre où il se joue réellement.

Ce qui pèse, ce sont les variantes, pas les familles. Chaque graisse et chaque style est un fichier distinct à télécharger. Une seule famille déclinée en six graisses, avec leurs italiques, représente douze fichiers. Deux familles en deux graisses chacune en représentent quatre. La discipline porte donc sur le nombre de variantes retenues, et trois à quatre suffisent à couvrir les besoins d’une PME : un corps de texte, son gras, un titrage, éventuellement un italique.

Une exception à ce raisonnement, désormais courante. Une police variable réunit toute une échelle de graisses dans un seul fichier, dont les valeurs intermédiaires sont interpolées à l’affichage. Elle n’est plus marginale : selon le Web Almanac 2022, près de 29 % des sites en utilisent une. Quand la famille que vous retenez en propose une version variable, le décompte par fichiers cesse de s’appliquer, et vous disposez de toutes les graisses pour le poids d’une seule.

Ce qui se voit, c’est le comportement pendant le téléchargement

Le descripteur CSS font-display détermine ce que voit le visiteur avant que la police n’arrive. La documentation MDN décrit trois périodes successives : une période de blocage pendant laquelle le texte peut rester invisible, une période d’échange pendant laquelle une police de repli s’affiche puis cède la place, et une période d’échec au terme de laquelle le navigateur renonce.

Deux valeurs suffisent à comprendre l’arbitrage.

Avec block, la période de blocage est courte mais réelle : le texte reste invisible un instant, puis apparaît directement dans la bonne police. Vous évitez le changement d’apparence, au prix d’un moment de page vide.

Avec swap, la période de blocage est réduite à une durée extrêmement courte : le texte s’affiche immédiatement dans une police de repli, puis change quand la vôtre arrive. Vous évitez la page vide, au prix d’un basculement visible.

Pour un site B2B, swap est presque toujours le bon arbitrage : un visiteur qui lit tout de suite est préférable à un visiteur qui attend une police. À une condition, souvent oubliée : que la police de repli ait des proportions proches de la vôtre, faute de quoi le basculement déplace tout le texte et dégrade la stabilité visuelle, l’une des métriques traitées dans la vitesse d’un site.

Quel format de fichier suffit pour le web ?

Le sujet paraît réservé aux techniciens, il ne l’est pas : il détermine ce que vous devez exiger de votre prestataire et ce qui alourdit inutilement votre site.

Six formats de polices web ont existé, et un seul reste utile aujourd’hui. La documentation MDN est explicite : « tous les principaux navigateurs prennent en charge WOFF et WOFF2 », et le second « prend en charge l’intégralité des spécifications TrueType et OpenType, y compris les polices variables, les polices chromatiques et les collections de polices ».

Trois conséquences pratiques.

Le WOFF2 suffit. Les formats EOT, TTF et SVG ne servent qu’à prendre en charge des navigateurs anciens que votre audience B2B n’utilise plus. Les inclure ajoute des fichiers et complique la maintenance sans bénéfice mesurable.

L’ordre de déclaration compte. La documentation le précise : « le navigateur choisira le premier fichier de police qu’il peut utiliser », c’est pourquoi « le format que vous listez en premier doit être le format préféré, c’est-à-dire WOFF2 ». Une déclaration mal ordonnée fait télécharger un format plus lourd à des navigateurs qui savaient lire le plus léger.

Le format n’est pas la police

Recevoir un TTF ne signifie pas que vous ne pouvez pas l’utiliser sur le web, cela signifie qu’une conversion est nécessaire, et que cette conversion doit être autorisée par la licence. C’est une question à poser au moment de l’achat, pas au moment de l’intégration.

Deux réglages complémentaires méritent d’être demandés à votre prestataire, parce qu’ils produisent un effet réel et ne coûtent rien.

Le préchargement de la police critique. Une seule, celle du corps de texte visible en haut de page. Précharger toutes les variantes annule le bénéfice en saturant les premières requêtes.

La réduction du jeu de caractères. Une police livrée complète contient souvent des alphabets que vous n’utiliserez jamais. Ne conserver que les caractères latins nécessaires réduit fortement le poids des fichiers, et cette opération est courante côté prestataire.

Auto-héberger ne suffit pas, il faut le faire correctement

L’auto-hébergement est le bon réflexe, pour la maîtrise comme pour le consentement. Mais il ne garantit rien par lui-même, et le chiffre suivant surprend en général.

Selon le Web Almanac 2022, le poids médian d’une police servie par un service tiers est d’environ 20 kilo-octets, tandis qu’il double à environ 40 kilo-octets en auto-hébergement. La cause n’est pas l’hébergement lui-même : c’est que beaucoup de fichiers auto-hébergés sont encore livrés dans un format plus ancien que le WOFF2, et sans sous-ensemble de caractères.

Autrement dit, rapatrier ses polices sans les convertir ni les alléger revient à faire un pas en avant pour la conformité et un pas en arrière pour la performance.

Un dernier réglage, rarement fait. Les propriétés size-adjust, ascent-override et descent-override permettent de caler la police de repli sur les proportions de la police définitive. C’est ce qui évite le saut visuel au moment de la bascule, mieux que le choix approximatif d’une police système « aux proportions proches ».

Ce que l’accessibilité impose, et ce qu’elle n’impose pas

Un point régulièrement mal compris, qui conduit soit à ignorer le sujet, soit à s’imposer des contraintes qui n’existent pas.

Le critère 1.4.12 du référentiel WCAG 2.2 porte sur l’espacement du texte et fixe quatre valeurs, exprimées en multiples de la taille de police.

Voici la nuance décisive, et elle est écrite noir sur blanc dans la documentation : « le contenu n’est pas tenu d’utiliser ces valeurs d’espacement. L’exigence est de garantir que, lorsqu’un utilisateur remplace l’espacement défini par l’auteur, le contenu ou la fonctionnalité ne soit pas perdu ».

Autrement dit, il ne s’agit pas d’une norme de mise en page mais d’un test de robustesse. Personne ne vous impose une hauteur de ligne de 1,5. On vous demande que votre page reste lisible et utilisable si un lecteur applique lui-même ces réglages, ce que permettent les navigateurs et les extensions d’accessibilité.

Ce qui casse dans ce test est toujours la même chose : des blocs à hauteur fixe, des boutons dont le texte déborde, des tableaux qui se chevauchent. Ce sont des défauts d’intégration, pas des choix typographiques, et ils se corrigent en laissant les blocs s’adapter à leur contenu.

Une conséquence pour le choix de la police : une famille qui n’est lisible qu’avec un interlignage serré vous met en difficulté sur ce test. Testez vos candidates avec une hauteur de ligne de 1,5, qui est de toute façon proche de ce qui se pratique pour du texte courant.

Sur le périmètre exact des obligations légales en la matière pour une PME, qui est plus étroit qu’on ne le croit, voir les obligations légales d’un site.

Que reste-t-il à décider après les trois filtres ?

Une fois la licence vérifiée, la lisibilité testée et les variantes limitées, il reste souvent trois ou quatre candidates. C’est là que le jugement intervient, et il porte sur peu de choses.

La cohérence avec ce que vous vendez. Une police à empattements dit quelque chose de différent d’une linéale géométrique, mais beaucoup moins que ce qu’on lui prête. L’écart entre une bonne et une très bonne candidate est faible comparé à l’écart entre une identité appliquée avec discipline et une identité appliquée au hasard.

La disponibilité des graisses utiles. Une famille magnifique qui n’existe qu’en deux graisses vous contraindra dans six mois, au moment de hiérarchiser une page dense.

Le comportement dans vos gabarits réels. Composez une vraie page de votre documentation, un vrai devis, un vrai en-tête de courrier, avec la police candidate. Une police se juge sur vos contenus, pas sur un mot isolé affiché en grand.

Un dernier point, pour éviter une dépense inutile : le système typographique compte davantage que la police. L’échelle de tailles, les interlignages, la largeur des colonnes et la hiérarchie des niveaux produisent l’essentiel de l’impression de sérieux. Ces règles se fixent dans la charte, ce que détaille faire faire sa charte graphique.

L’échelle et le pairage, ce qui produit l’effet

Une fois la police retenue, l’essentiel reste à faire, et c’est ce qui distingue une identité tenue d’une identité approximative.

L’échelle de tailles compte plus que la police. Un système typographique repose sur un petit nombre de tailles, liées entre elles par un rapport constant. Quatre à six niveaux suffisent : un corps de texte, deux ou trois niveaux de titre, une taille réduite pour les mentions. Ce qui produit l’impression d’amateurisme n’est presque jamais le choix de la famille, c’est une page où cohabitent onze tailles décidées au cas par cas.

L’interlignage se règle par usage, pas une fois pour toutes. Un texte courant supporte une hauteur de ligne autour de 1,5, un titre en gros corps demande beaucoup moins. Appliquer la même valeur partout produit des titres qui flottent et des paragraphes serrés.

La largeur de colonne est un réglage typographique. Un paragraphe qui court sur toute la largeur d’un écran large devient pénible : l’œil perd la ligne au retour. La contrainte de largeur maximale fait partie du système, et son absence gâche une bonne police.

Le pairage, quand il y en a un, se justifie par la fonction

Deux familles se marient quand elles remplissent des rôles distincts, par exemple un titrage à fort caractère et un texte courant très lisible. Deux familles qui se ressemblent produisent une hésitation visuelle sans bénéfice, et deux familles qui s’opposent trop produisent une page qui semble composée par deux personnes.

Un test de contrôle simple, à faire avant de valider le système : composez une page réelle et dense de votre activité, avec titres, intertitres, paragraphes, liste, tableau chiffré et mentions. Si cette page tient, le système tient. Les planches de présentation ne mettent jamais ce genre de page en scène, ce qui explique qu’elles rassurent à tort.

Ces règles se consignent dans la charte, faute de quoi elles se perdent à la première personne qui produit un document sans avoir participé au projet. Le sujet est traité dans faire faire sa charte graphique.

Par où continuer, selon votre situation

Vous refaites toute votre identité. La typographie n’est qu’une brique : voir ce qui distingue plateforme, identité et charte, puis faire faire sa charte graphique.

Vous travaillez sur votre logo. Le sujet croise celui-ci, notamment sur la vectorisation des textes : logo d’entreprise B2B.

Vous choisissez aussi vos couleurs. Les seuils de contraste concernent directement la lisibilité du texte : psychologie des couleurs et marques.

Vous vous inquiétez de l’effet sur la performance. L’ordre de grandeur réel est donné dans la vitesse d’un site, ce qui compte.

Vous vous demandez si l’investissement se justifie. L’arbitrage général est posé dans pourquoi faire du branding en B2B.

En bref

• Trois contraintes décident, et aucune n’est esthétique : la licence, la lisibilité fonctionnelle, le nombre de fichiers.
• Une licence bureautique ne vaut pas licence web. Les usages se négocient séparément, et la liste de vos usages réels se fait avant de demander un devis.
• Les polices sous licence libre ouverte lèvent la question. Elles autorisent l’usage commercial, y compris sur un site, sans mention obligatoire, la contrainte portant sur les noms réservés en cas de modification.
• Les chiffres décident en B2B. Chiffres de largeur fixe pour aligner les tableaux, zéro barré pour distinguer O et 0 dans une référence produit.
• Testez Il1 et le petit corps. Deux tests de trente secondes qui éliminent des candidates que la planche de présentation flattait.
• Ce qui pèse, ce sont les variantes. Trois à quatre suffisent. Une famille en six graisses coûte plus qu’une deuxième famille.
• swap est presque toujours le bon réglage, à condition que la police de repli ait des proportions proches, sinon le basculement fait sauter la page.

Si vous hésitez entre plusieurs pistes typographiques, le test se fait sur vos gabarits réels et non sur une planche. Parlons de votre projet, ou découvrez notre approche du branding en B2B.