Choisir un type de polices pour un projet graphique, c’est arbitrer entre lisibilité, poids de fichier et droits d’utilisation. Le résultat varie selon que le texte finit sur une affiche offset, un site web responsive ou l’écran d’une appli mobile. Cet article compare les grandes familles typographiques sous ces trois angles et propose une méthode pour constituer une paire de polices polyvalente sans multiplier les fichiers.
Serif, sans-serif, monospace : comportement réel selon le support
Les concurrents listent les familles typographiques comme des catégories esthétiques. En pratique, chaque famille réagit différemment au rendu physique du print et au rendu pixel du digital. Le tableau ci-dessous synthétise ces écarts.
| Famille | Print (offset, laser) | Écran desktop | Écran mobile |
|---|---|---|---|
| Serif (empattements) | Excellente lisibilité en corps texte grâce aux empattements qui guident l’œil sur le papier | Correcte à partir de 16 px, empattements parfois flous sur écrans basse résolution | Moins lisible sous 14 px, les empattements fins disparaissent sur petit écran |
| Sans-serif | Nette sur les titres et les légendes, légèrement moins confortable en pavé de texte long | Rendu net à toutes les tailles, anti-aliasing natif efficace | Famille la plus lisible sur mobile, surtout en corps 14-16 px |
| Monospace | Usage technique (codes, tableaux de données), interlettrage fixe pratique pour l’alignement | Adapté aux blocs de code, peu ergonomique pour du contenu éditorial | Très peu utilisé hors interfaces développeur |
| Slab-serif (égyptienne) | Empattements épais bien restitués même sur papier journal bas grammage | Bonne lisibilité en titres, un peu lourde en corps texte | Acceptable en titres, encombrante en paragraphe |
| Script (cursive) | Réservée aux titrages courts, illisible en dessous de 18 pt | Décorative, à éviter pour le contenu courant | Quasi inutilisable en corps texte |
La donnée qui ressort : une sans-serif reste la famille la plus polyvalente pour le digital, tandis qu’une serif garde l’avantage en lecture longue sur papier. C’est cette complémentarité qui justifie de travailler avec une paire plutôt qu’une seule police.
Paire de polices print et digital : méthode pour limiter le nombre de familles
Charger quatre ou cinq familles typographiques sur un site alourdit le temps de rendu. En print, multiplier les fontes complique la charte graphique et augmente le coût des licences. La stratégie la plus efficace consiste à sélectionner une seule superfamille ou deux polices complémentaires qui couvrent tous les usages.
Critères de sélection d’une paire polyvalente
- Nombre de graisses disponibles : une famille avec au moins quatre graisses (regular, medium, semibold, bold) évite de recourir à une deuxième police pour les titres. Inter, Roboto ou Source Sans Pro remplissent ce critère.
- Licence couvrant print et web : certaines polices Google Fonts (licence SIL Open Font) autorisent l’impression et l’intégration web sans surcoût. En revanche, une police Adobe Fonts peut imposer un abonnement distinct pour l’usage serveur.
- Disponibilité en format variable : une police variable regroupe toutes les graisses dans un seul fichier, ce qui réduit le nombre de requêtes HTTP et le poids total sur un site ou une appli.
- Jeu de caractères étendu : pour un projet francophone, vérifier la présence des diacritiques (é, è, ê, ç, œ, ù) et des guillemets français (« »). Une police incomplète oblige à charger une fonte de secours.
Avec ces critères, la paire la plus courante associe une sans-serif pour le corps (Inter, Open Sans, Roboto) et une serif pour les titres (Merriweather, Lora, Source Serif Pro). L’inverse fonctionne aussi en print, où la serif assure le confort de lecture en paragraphe et la sans-serif structure les intertitres.
Exemple concret : une paire qui tient sur trois supports
Source Serif Pro en titrage (graisse semibold) et Source Sans Pro en corps texte (regular et bold) partagent la même structure de dessin, ce qui crée une harmonie visuelle. Les deux sont distribuées sous licence SIL Open Font, utilisables en impression et en web. Elles existent en format variable.
Le poids combiné de ces deux fichiers variables reste inférieur à celui de quatre fichiers statiques classiques. Sur mobile, le gain de temps de chargement est perceptible, surtout en connexion 3G.
Licences typographiques : ce qui change entre usage print et usage web
Le type de licence est le point le plus souvent négligé. Acheter une police pour un logiciel de PAO ne donne pas automatiquement le droit de l’embarquer sur un serveur web ou dans une application.
Les polices open source (Google Fonts, Font Squirrel sous licence SIL OFL) autorisent généralement les deux usages. Les fonderies commerciales (Monotype, Linotype, certaines fontes Adobe Fonts) séparent la licence desktop, la licence web et la licence app. Utiliser une police desktop sur un site web sans licence appropriée expose à des poursuites.
Avant de valider une typographie pour votre charte graphique, vérifiez trois points : le fichier de licence livré avec la fonte, le périmètre d’utilisation (nombre de pages vues pour le web, nombre de postes pour le print) et la possibilité de modifier le fichier (subsetting pour alléger le poids).
Optimiser le chargement des polices sur site web et appli mobile
Même avec une paire bien choisie, un mauvais paramétrage technique peut dégrader l’expérience utilisateur. Deux pratiques font la différence.
Le subsetting consiste à supprimer du fichier de police les caractères inutilisés (cyrillique, grec, symboles mathématiques). Sur un site francophone, cette opération réduit le poids du fichier de façon notable. Des outils comme Font Squirrel ou glyphhanger automatisent le processus.
La directive CSS font-display: swap affiche d’abord une police système puis charge la police personnalisée en arrière-plan. Le texte reste lisible instantanément, ce qui améliore le score de performance perçu. En revanche, le swap provoque un léger décalage visuel au chargement. Pour les applis mobiles, embarquer la police dans le bundle évite ce problème.
Charger une seule police variable plutôt que quatre fichiers statiques réduit le nombre de requêtes réseau. C’est la solution la plus efficace quand le navigateur ou le système cible supporte les polices variables (tous les navigateurs modernes le font depuis plusieurs années).
Le choix d’un type de polices ne se limite pas à une question de style. La lisibilité sur chaque support, la couverture de la licence et le poids du fichier déterminent la viabilité réelle d’une typographie dans un projet multi-support. Une paire sobre issue d’une même superfamille open source couvre la majorité des cas, du catalogue imprimé à l’interface mobile, sans alourdir la charte graphique ni le budget.
