Cet article décrit les techniques de typographie web maintenues en 2026 : chargement des polices avec font-display et preload, polices variables, nouvelles propriétés CSS (text-wrap: balance/pretty), fonctionnalités OpenType activables via CSS, échelle typographique modulaire, et critères WCAG 2.2 applicables au texte. Toutes les syntaxes sont vérifiées sur la documentation MDN à mai 2026.
1 — Charger une police sans bloquer le rendu
Une police mal chargée provoque deux phénomènes mesurables : FOIT (Flash of Invisible Text) et FOUT (Flash of Unstyled Text). Le contrôle se fait avec font-display dans la déclaration @font-face.
| Valeur | Comportement | Usage |
|---|---|---|
auto |
Comportement par défaut du navigateur (FOIT 3 s) | À éviter |
block |
Bloque jusqu’à 3 s, puis fallback | Logo, titre principal seulement |
swap |
Affiche le fallback immédiatement, swap dès que la police est chargée | Recommandation par défaut pour le texte courant |
fallback |
FOIT 100 ms, swap si chargé sous 3 s, sinon fallback | Pages avec INP critique |
optional |
FOIT 100 ms, fallback si non disponible (la police peut ne jamais charger sur connexion lente) | Site mobile-first sur 3G |
Auto-hébergement avec préchargement (recommandé en 2026) :
<!-- Dans <head> -->
<link rel="preload" as="font" type="font/woff2"
href="/fonts/inter-var.woff2" crossorigin>/* CSS */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-var.woff2') format('woff2-variations');
font-weight: 100 900;
font-display: swap;
font-style: normal;
}Le préchargement coupe le délai entre la découverte CSS et le téléchargement du fichier. Il est efficace uniquement pour les polices visibles dans le viewport au-dessus de la ligne de flottaison ; précharger toutes les variantes dégrade la performance.
Google Fonts en 2026 reste fonctionnel mais ajoute une latence DNS et un risque d’indisponibilité du CDN. Pour un site WooCommerce ou WordPress avec un public ouest-africain, l’auto-hébergement réduit le LCP de 200 à 600 ms en pratique sur 4G d’entrée de gamme.
2 — Polices variables (variable fonts)
Une police variable encode toutes les graisses, largeurs et styles dans un seul fichier (typiquement 80 à 200 Ko) au lieu d’un fichier par graisse (10 à 20 fichiers de 25 à 50 Ko chacun).
body {
font-family: 'Inter', system-ui, sans-serif;
font-variation-settings: 'wght' 400, 'opsz' 16;
}
h1 {
font-variation-settings: 'wght' 750, 'opsz' 48;
}Axes courants standardisés OpenType :
wght— graisse (100-900 typiquement)wdth— largeur des glyphes (75-125 %)opsz— taille optique (le rendu varie selon l’échelle d’affichage)slnt— italique angulaire (-15° à 0°)ital— italique vrai (0 ou 1)
Polices variables open-source recommandées en 2026 : Inter (sans), Roboto Flex (sans), Recursive (sans + mono), Source Serif 4 (serif), JetBrains Mono (mono). Pour l’arabe et le berbère, Cairo Variable et Almarai couvrent les besoins courants.
3 — Nouvelles propriétés CSS (Baseline 2024+)
text-wrap: balance (Chrome 114, Firefox 121, Safari 17.5 — Baseline mai 2024). Équilibre les lignes d’un titre court pour éviter les « veuves » :
h1, h2, .lead {
text-wrap: balance;
}Limitation : performance dégradée au-delà de 6 lignes. Le navigateur l’applique uniquement aux blocs courts.
text-wrap: pretty (Chrome 117, Firefox 138). Évite les mots isolés en fin de paragraphe en ajustant les coupures :
p {
text-wrap: pretty;
}line-height-step et hanging-punctuation — encore expérimentaux en 2026, à utiliser avec @supports.
@supports (hanging-punctuation: first) {
blockquote { hanging-punctuation: first last; }
}4 — OpenType : ligatures et chiffres
Les fonctionnalités OpenType activables via font-feature-settings ou les propriétés CSS de haut niveau :
/* Approche moderne (CSS de haut niveau) */
.numbers {
font-variant-numeric: tabular-nums lining-nums;
}
.headline {
font-variant-ligatures: discretionary-ligatures;
}
/* Approche bas niveau */
body {
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}| Tag OpenType | Effet | Quand l’activer |
|---|---|---|
kern |
Crénage | Toujours (souvent activé par défaut) |
liga |
Ligatures standard (fi, fl) | Texte courant |
dlig |
Ligatures discrétionnaires (st, ct) | Titres élégants |
tnum |
Chiffres tabulaires (largeur fixe) | Tableaux financiers, prix alignés |
onum |
Chiffres elzéviriens (style ancien) | Texte courant en serif |
smcp |
Petites capitales | Sigles, abréviations |
ss01 à ss20 |
Sets stylistiques (variantes alternatives) | Spécifique à chaque police |
5 — Échelle modulaire
Une échelle typographique cohérente repose sur un ratio fixe entre les tailles. En 2026, la combinaison clamp() + variables CSS permet une échelle fluide entre les viewports :
:root {
--fluid-min: 1rem; /* 16px à 320px */
--fluid-max: 1.125rem; /* 18px à 1280px */
--fluid-base: clamp(var(--fluid-min), 0.875rem + 0.625vw, var(--fluid-max));
--ratio: 1.25; /* Échelle quinte mineure */
--step--1: calc(var(--fluid-base) / var(--ratio));
--step-0: var(--fluid-base);
--step-1: calc(var(--fluid-base) * var(--ratio));
--step-2: calc(var(--fluid-base) * var(--ratio) * var(--ratio));
--step-3: calc(var(--fluid-base) * pow(var(--ratio), 3));
}
body { font-size: var(--step-0); }
small { font-size: var(--step--1); }
h3 { font-size: var(--step-1); }
h2 { font-size: var(--step-2); }
h1 { font-size: var(--step-3); }Ratios courants : 1,125 (seconde majeure), 1,2 (tierce mineure), 1,25 (tierce majeure, le plus utilisé), 1,333 (quarte parfaite), 1,414 (quinte augmentée), 1,5 (quinte parfaite), 1,618 (nombre d’or).
Outil pour visualiser : type-scale.com et utopia.fyi (générateur d’échelle fluide).
6 — Lisibilité et accessibilité (WCAG 2.2)
Les critères WCAG 2.2 imposent :
- 1.4.3 Contraste (Minimum) — ratio 4,5:1 pour le texte courant, 3:1 pour le grand texte (18 pt et plus, ou 14 pt en gras).
- 1.4.4 Redimensionnement du texte — le texte doit pouvoir être agrandi à 200 % sans perte de fonctionnalité ni recours au scroll horizontal.
- 1.4.8 Présentation visuelle (AAA) — interlignage 1,5 minimum, espacement entre paragraphes de 2× la taille de police, largeur de bloc de 80 caractères maximum, pas de justification des deux côtés.
- 1.4.12 Espacement du texte — l’utilisateur doit pouvoir augmenter
line-heightà 1,5,letter-spacingà 0,12em,word-spacingà 0,16em,paragraph-spacingà 2× la taille, sans casser la mise en page.
Tester avec l’extension Chrome Stylus en injectant cette règle :
* {
line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }Si le site reste lisible et fonctionnel, le critère 1.4.12 est satisfait. La majorité des thèmes WordPress en 2026 le respectent par défaut.
7 — Combinaisons éprouvées
Quelques accouplements stables en 2026 pour des sites professionnels francophones :
| Type de site | Titres | Texte courant | Code |
|---|---|---|---|
| Tech / SaaS | Inter | Inter | JetBrains Mono |
| Éditorial / blog | Source Serif 4 | Source Sans 3 | — |
| E-commerce mode | Playfair Display | Inter | — |
| Corporate | Roboto Flex | Roboto Flex | — |
| Bilingue FR/AR | Cairo Variable + Inter | Cairo Variable + Inter | — |
Limiter à deux familles maximum (titres + texte ; éventuellement une troisième pour le code). Au-delà, la cohérence visuelle se dégrade et le poids des polices augmente.
Références
- MDN — font-display
- MDN — Variable fonts guide
- MDN — text-wrap
- Utopia — Fluid type scale calculator
- WCAG 2.2 — 1.4.12 Text Spacing
Performance des polices et optimisation pour les connexions lentes
Une belle typographie qui charge mal nuit autant à l’expérience utilisateur qu’une typographie banale qui charge instantanément. Sur les connexions 3G fréquentes en zones rurales sénégalaises, ivoiriennes ou maliennes, télécharger 600 kilooctets de fontes web avant d’afficher la première lettre fait fuir l’utilisateur avant le premier mot lu. Quatre optimisations cumulables transforment radicalement ce comportement sans rien sacrifier au design.
Subsetting et formats modernes
Une fonte téléchargée depuis Google Fonts contient typiquement tous les glyphes Latin étendu, ce qui pèse plusieurs centaines de kilooctets. Pour un site français qui n’utilise que les caractères Latin de base plus quelques accents, le subsetting via l’outil pyftsubset de fontTools réduit la taille de 60 à 80 pour cent. Le format moderne woff2 compresse encore davantage par rapport à woff ou aux antiques ttf. Une fonte Inter regular subsettée en Latin-1 pèse environ 25 kilooctets en woff2 contre 100 kilooctets en woff brut — facteur quatre, sans perte visible. Servir la fonte au format woff2 avec un fallback woff est universellement supporté depuis 2020.
font-display et la stratégie de chargement
La directive font-display dans @font-face contrôle ce que voit l’utilisateur pendant le téléchargement. font-display: swap affiche immédiatement le texte avec la fonte de fallback, puis le bascule sur la fonte web une fois téléchargée — c’est la stratégie standard pour le corps de texte. font-display: optional télécharge la fonte uniquement si elle arrive en moins de 100 millisecondes, sinon utilise définitivement le fallback pour cette session — idéal pour les fontes décoratives non critiques. Le pire choix est font-display: block (par défaut historique) qui cache le texte jusqu’au téléchargement — un FOIT (flash of invisible text) qui dégrade massivement les Core Web Vitals.
Préchargement sélectif et self-hosting
Pour les fontes critiques utilisées dès le premier viewport (logo, titres principaux), un <link rel="preload"> en tête de page fait commencer le téléchargement avant même que le navigateur ne découvre la règle CSS qui les référence. Combiner cela avec le self-hosting (servir la fonte depuis votre propre domaine plutôt que fonts.googleapis.com) supprime un saut DNS et un saut TLS — gain typique de 100 à 300 millisecondes sur le LCP en Afrique de l’Ouest. Depuis 2022, les recommandations Google elles-mêmes vont dans ce sens : Google a actualisé en mai 2024 ses recommandations web.dev (article « Reduce web font size » révisé) en faveur du self-hosting des fontes plutôt que du CDN fonts.googleapis.com, principalement à cause de la jurisprudence allemande du tribunal régional de Munich du 20 janvier 2022 condamnant un site pour transmission d’IP à Google via Google Fonts en CDN sans consentement (Google Fonts en CDN transmet l’IP du visiteur à Google, ce qui a fait l’objet de jurisprudences européennes défavorables).
Variable fonts : une seule fonte, toutes les graisses
Les fontes variables font tenir l’ensemble des graisses et styles dans un seul fichier d’environ 50 à 100 kilooctets, contre quatre à huit fichiers séparés totalisant 200 à 400 kilooctets dans l’approche classique. Inter, Roboto Flex, Recursive, Source Sans 3 sont disponibles en variable. La syntaxe CSS reste compatible avec font-weight: 100 à 900 mais s’enrichit aussi de la syntaxe font-variation-settings: "wght" 437 pour des graisses arbitraires. C’est aujourd’hui le meilleur compromis entre richesse typographique et performance.