La typographie fait 90% du design web
Le texte représente plus de 90% du contenu d’un site web. Pourtant, la majorité des développeurs traitent la typographie comme un détail — une police par défaut, une taille arbitraire, et c’est tout. Maîtriser la typographie web avancée vous sépare immédiatement des amateurs : des polices optimisées pour la performance, des échelles harmonieuses, et des fonctionnalités OpenType qui ajoutent une touche professionnelle invisible mais perceptible.
Charger les polices : performance et bonnes pratiques
Google Fonts vs auto-hébergement
Google Fonts — Le plus simple : une ligne de code et c’est fait. Mais depuis 2022, utiliser les serveurs de Google pose des problèmes de confidentialité (RGPD) et de performance (requête DNS supplémentaire + pas de contrôle sur le cache).
Auto-hébergement (recommandé) — Téléchargez les fichiers de police et servez-les depuis votre propre serveur. Performance optimale, aucune requête tierce, contrôle total sur le cache. Utilisez google-webfonts-helper ou Fontsource pour obtenir les fichiers.
/* @font-face avec toutes les optimisations */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-var.woff2') format('woff2');
font-weight: 100 900; /* Variable font : toutes les graisses */
font-display: swap; /* Texte visible immédiatement */
font-style: normal;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
/* unicode-range : ne charge QUE les caractères latin */
}
/* Preload : charger la police en priorité */
/* Dans le <head> HTML : */
<link rel="preload" href="/fonts/inter-var.woff2"
as="font" type="font/woff2" crossorigin>font-display expliqué
- swap — Le texte apparaît immédiatement en police de substitution, puis bascule vers la police chargée. Recommandé pour le texte de contenu
- optional — Le navigateur attend 100ms. Si la police n’est pas prête, il garde la substitution pour toute la session. Zéro layout shift. Recommandé pour le corps de texte quand la performance est critique
- fallback — Compromis : attend 100ms, puis substitution, avec une fenêtre courte pour basculer. Bon pour les titres
- block — Texte invisible pendant le chargement (FOIT). À éviter sauf cas très spécifiques (icônes-police)
Variable Fonts : une police, toutes les graisses
Une variable font contient toutes les variations (graisse, largeur, italique) dans un seul fichier. Au lieu de charger inter-regular.woff2 + inter-medium.woff2 + inter-bold.woff2 (3 fichiers, ~75 Ko chacun), vous chargez inter-var.woff2 (1 fichier, ~100 Ko). Moins de requêtes HTTP, moins de Ko, plus de flexibilité.
/* Utiliser les axes de variation */
.title {
font-family: 'Inter', sans-serif;
font-weight: 750; /* Valeur précise, pas juste 700 */
font-variation-settings:
'wght' 750, /* Weight */
'wdth' 95, /* Width (si supporté) */
'slnt' -5; /* Slant (italique optique) */
}
/* Animation de graisse — impossible avec les polices classiques */
.hover-bold {
font-weight: 400;
transition: font-weight 0.3s ease;
}
.hover-bold:hover {
font-weight: 700;
}
/* Polices variables recommandées (gratuites) */
/* Inter — Le standard pour les UI (wght 100-900) */
/* DM Sans — Alternative élégante (wght 100-1000) */
/* Fraunces — Serif expressive (wght, opsz, SOFT, WONK) */
/* Cabinet Grotesk — Geometric pour les titres */
/* Instrument Serif — Serif moderne pour les titres */Échelle typographique modulaire
Une échelle typographique crée une hiérarchie harmonieuse basée sur un ratio mathématique. Les ratios les plus utilisés :
- 1.25 (Major Third) — Progression douce, idéal pour les blogs et contenus longs
- 1.333 (Perfect Fourth) — Progression équilibrée, le plus polyvalent
- 1.5 (Perfect Fifth) — Progression marquée, pour les landing pages impactantes
/* Échelle typographique avec ratio 1.333 (Perfect Fourth) */
:root {
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-md: 1.125rem; /* 18px */
--font-size-lg: 1.333rem; /* ~21px */
--font-size-xl: 1.777rem; /* ~28px */
--font-size-2xl: 2.369rem; /* ~38px */
--font-size-3xl: 3.157rem; /* ~50px */
}
/* Typographie fluide avec clamp() — taille responsive sans media query */
h1 {
font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
line-height: 1.1;
letter-spacing: -0.02em;
}
h2 {
font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-size: clamp(1rem, 1vw + 0.75rem, 1.125rem);
line-height: 1.6;
max-width: 65ch; /* Mesure optimale : 50-75 caractères par ligne */
}Fonctionnalités OpenType avancées
/* Ligatures — lettres qui se connectent élégamment */
.elegant-text {
font-feature-settings: 'liga' 1, 'clig' 1; /* Ligatures standard */
/* fi → fi, fl → fl, etc. */
}
.display-text {
font-feature-settings: 'dlig' 1; /* Ligatures discrétionnaires */
/* Plus décoratives, pour les titres */
}
/* Chiffres tabulaires — alignés en colonnes (tableaux, prix) */
.price, .table-cell {
font-feature-settings: 'tnum' 1; /* Tabular numbers */
font-variant-numeric: tabular-nums;
/* Chaque chiffre a la même largeur → colonnes alignées */
}
/* Chiffres old-style — élégants dans le texte courant */
.body-text {
font-feature-settings: 'onum' 1;
font-variant-numeric: oldstyle-nums;
/* Les chiffres ont des ascendantes/descendantes comme les lettres */
}
/* Fractions automatiques */
.recipe {
font-feature-settings: 'frac' 1;
/* 1/2 → ½, 3/4 → ¾ */
}
/* Petites capitales — pour les acronymes et abréviations */
.acronym {
font-feature-settings: 'smcp' 1;
font-variant-caps: small-caps;
/* HTML, CSS, API → versions petites capitales */
}
/* Kerning optique */
.kerned {
font-kerning: auto; /* Activé par défaut dans les navigateurs modernes */
/* Ajuste l'espace entre certaines paires de lettres (AV, To, etc.) */
}Propriétés CSS modernes pour la typographie
/* text-wrap: balance — équilibre les lignes des titres */
h1, h2, h3 {
text-wrap: balance;
/* Distribue les mots pour que les lignes aient des longueurs similaires
Évite le mot orphelin sur la dernière ligne */
}
/* text-wrap: pretty — pour le corps de texte */
p {
text-wrap: pretty;
/* Évite les veuves et orphelins typographiques */
}
/* Césure automatique */
.article-body {
hyphens: auto;
-webkit-hyphens: auto;
/* Coupe les mots longs en fin de ligne avec un tiret
Important pour le français avec ses mots longs */
}
/* Troncature de texte */
.card-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* Une seule ligne */
}
.card-description {
display: -webkit-box;
-webkit-line-clamp: 3; /* Maximum 3 lignes */
-webkit-box-orient: vertical;
overflow: hidden;
}
/* initial-letter — lettrine (drop cap) */
.article-body > p:first-of-type::first-letter {
initial-letter: 3; /* 3 lignes de haut */
font-weight: 700;
margin-right: 0.5em;
color: var(--color-primary);
}Combinaisons typographiques éprouvées
- Inter + Inter — Même police, graisses différentes. Simple, professionnel, universel. La combinaison la plus sûre
- Cabinet Grotesk + Inter — Geometric display + neutral sans-serif. Moderne et tech
- Fraunces + DM Sans — Serif expressive + sans-serif propre. Élégant et contemporain
- Instrument Serif + Inter — Serif fine pour les titres + sans-serif pour le corps. Éditorial et raffiné
- Space Grotesk + Space Mono — Sans-serif + monospace. Parfait pour les sites tech et développeurs
Accessibilité typographique
- Taille minimum — 16px pour le corps de texte. 14px est trop petit pour la lecture prolongée sur écran
- Contraste — Ratio 4.5:1 minimum (WCAG AA). Le texte gris clair sur fond blanc (#999 sur #fff) est un échec fréquent
- Interligne — 1.5 minimum pour le corps de texte. Les personnes dyslexiques bénéficient d’un interligne de 1.7-2.0
- Mesure (longueur de ligne) — 50-75 caractères par ligne. Utilisez
max-width: 65ch - Ne jamais justifier — Le texte justifié crée des espaces irréguliers qui gênent la lecture, surtout pour les personnes dyslexiques
- Unités relatives — Utilisez rem et em, jamais px pour le texte. L’utilisateur doit pouvoir augmenter la taille du texte dans ses paramètres
La typographie web avancée n’est pas un luxe — c’est un fondamental. Un site avec une typographie soignée (échelle harmonieuse, polices optimisées, fonctionnalités OpenType) communique la qualité et le professionnalisme avant même que le visiteur lise un mot. Investissez 30 minutes dans votre système typographique, et chaque page de votre site en bénéficiera.
