Typographie web : le guide pratique pour faire les bons choix en 2026

« Web design is 95 % typography », écrivait Oliver Reichenstein en 2006. Vingt ans plus tard, c’est toujours vrai. Le choix et l’implémentation de la typographie d’un site impactent lisibilité, performance, identité de marque, et SEO indirect. Voici un guide pratique 2026.

Les 3 grandes catégories de fonts web

1. System fonts (gratuit, ultra-performant)

Utiliser les fonts déjà installées sur l’OS :

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

Avantages :

• 0 KB ajoutés au site
• Rendu natif sur chaque OS
• Parfaitement optimisé par les éditeurs OS

Inconvénients :

• Apparence variable selon les visiteurs
• Identité de marque limitée

Bon pour : sites où la performance est critique, blogs minimalistes, dashboards.

2. Google Fonts (gratuit, populaire)

Google Fonts propose 1 600+ fonts gratuites, dont Inter, Roboto, Open Sans, Poppins parmi les plus utilisées.

Avantages :

• Bibliothèque énorme et qualitative
• Documentation et previews intégrés
• CDN global

Inconvénients :

• ⚠️ Problème RGPD en Europe : le tribunal de Munich a tranché en janvier 2022 que charger des Google Fonts depuis les serveurs Google constitue un transfert de données (l’IP de l’utilisateur) vers les USA, sans base légale → amendes possibles
• Performance dégradée par requête externe vers fonts.googleapis.com

Solution recommandée : télécharger les fonts depuis Google Fonts et les self-hoster (voir plus bas).

3. Fonts payantes / propriétaires

Acheter une licence chez Adobe Fonts, MyFonts, Type Foundry indépendantes (Klim, Pangram, etc.).

Avantages :

• Identité de marque unique
• Qualité éditoriale exceptionnelle
• Souvent licence libre pour le web

Inconvénients :

• Coût (30-500 €/font selon la licence)
• Souvent pas de variable fonts (donc plus lourd)

Bon pour : marques premium, projets éditoriaux haut de gamme.

Le piège Google Fonts en Europe

Le problème RGPD

Quand votre site charge https://fonts.googleapis.com/css2?family=Inter, le navigateur de l’utilisateur se connecte aux serveurs Google (USA) avant même qu’on lui demande son consentement. Google reçoit l’IP, le user-agent, le referer.

Pour la jurisprudence européenne (notamment arrêt Schrems II de la CJUE en juillet 2020), c’est un transfert de données vers un pays tiers sans base légale.

Sanctions :

• En France, la CNIL peut sanctionner jusqu’à 4 % du CA mondial
• En Allemagne, l’amende minimum prononcée à ce jour est de 100 €, mais elle peut grimper

La solution : self-hosting

Télécharger les fichiers .woff2 et les servir depuis votre propre domaine.

Étapes :

1. Aller sur Google Webfonts Helper — outil tiers qui fait l’export propre
2. Choisir la font, les graisses (weights) et les charsets (latin suffit pour le français)
3. Télécharger le ZIP
4. Servir les fichiers .woff2 depuis /fonts/ sur votre site
5. Inclure le CSS fourni dans votre feuille de style

→ Plus de connexion à Google. RGPD safe. Performance améliorée.

Alternative encore plus simple : Bunny Fonts

Bunny Fonts est un drop-in replacement RGPD-compliant pour Google Fonts. Hébergé en Europe, gratuit, parfaitement compatible.

<!-- Avant -->
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet">

<!-- Après -->
<link href="https://fonts.bunny.net/css?family=inter" rel="stylesheet">

Conformité RGPD validée par le CCRC.

Variable fonts : la grande évolution 2020+

Une variable font est un fichier unique qui contient toutes les graisses, largeurs et styles d’une famille typographique.

Exemple : Inter classique = 9 fichiers (light, regular, medium, semibold, bold, extrabold, etc.) totalisant ~150 KB. Inter Variable = 1 fichier de ~50 KB qui contient tous les poids interpolables.

Bénéfices :

• Une seule requête HTTP au lieu de 5-9
• Poids total réduit
• Possibilité de poids intermédiaires (725 entre 700 et 800)
• Animations typographiques fluides

Implémentation CSS :

@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 100 900; /* range complet */
  font-style: normal;
  font-display: swap;
}

.titre { font-weight: 750; } /* poids non-standard possible */

Liste de variable fonts gratuites : v-fonts.com.

Performance : optimiser le chargement des fonts

1. Format .woff2 uniquement

C’est le format le plus optimisé en 2026. Compressé Brotli, supporté à 98 % (Can I Use).

Pas besoin de fournir .woff ou .ttf en fallback (sauf clients très anciens).

2. font-display: swap

@font-face {
  font-family: "Inter Variable";
  font-display: swap; /* affiche un fallback en attendant */
}

Sans font-display: swap, les utilisateurs voient un texte invisible pendant le chargement (FOIT — Flash of Invisible Text). Avec swap, ils voient d’abord la font système, puis la font custom prend le relais (FOUT — Flash of Unstyled Text). Beaucoup mieux.

3. <link rel="preload"> pour les fonts critiques

Précharger uniquement la font utilisée above the fold :

<link rel="preload" href="/fonts/inter-variable.woff2" as="font" type="font/woff2" crossorigin>

⚠️ Ne préchargez pas toutes vos fonts — l’effet inverse, ça plombe la page initiale.

4. Subset des charsets

Si votre site est en français, ne chargez pas les caractères chinois ou cyrilliques. Subset latin suffit (~ 95 caractères, 30 KB).

Outil : glyphhanger ou pyftsubset.

5. Limiter le nombre de fonts

1 famille pour les titres + 1 pour le corps suffit pour 95 % des sites. Plus de 2 familles ralentit le site et fragmente l’identité visuelle.

Choisir une font pour son site

Pour un site corporate / sérieux

• Inter (Rasmus Andersson) — la référence neutre moderne, gratuite
• IBM Plex — élégante, gratuite
• Source Sans 3 — Adobe, gratuite

Pour un site éditorial / blog

• Merriweather — serif lisible, gratuite
• Source Serif 4 — Adobe, gratuite
• Lora — élégante, gratuite

Pour un site tech / moderne

• Geist (Vercel) — gratuite, moderne, conçue pour le code
• Inter ou Manrope
• Space Grotesk — caractère, gratuite

Pour un site premium

• Söhne (Klim, payante) — utilisée par GitHub, Stripe
• Untitled Sans (Klim, payante)
• Recoleta (Latinotype, payante) — serif chaude

Hiérarchie typographique

Une bonne hiérarchie utilise 3-4 niveaux maximum :

Niveau	Exemple	Taille (desktop)	Poids
H1	Titre de page	48-64 px	700-800
H2	Section	32-40 px	600-700
H3	Sous-section	22-26 px	500-600
Body	Texte courant	16-18 px	400-500
Small	Légendes	13-14 px	400

Règle d’or : ratio de 1,2 à 1,5× entre chaque niveau (modular scale). Outil : Type Scale.

Notre stack typo chez CreativeWork

Pour 90 % de nos sites :

• Geist Variable (Vercel) — pour les titres et le corps de texte. Self-hosted via @fontsource-variable/geist.
• Geist Mono Variable — pour les éléments techniques (code, accents).
• Format : .woff2 exclusivement
• Stratégie : font-display: swap + preload de la font principale
• Charsets : latin uniquement (35 KB total pour les 2 fonts)

Conformité RGPD : 100 %. Performance : LCP gain de ~150 ms vs Google Fonts CDN.

---

Sources

• Information Architects — The Web Is All About Typography
• Tribunal de Munich — Google Fonts decision (2022)
• CJUE — Arrêt Schrems II
• Bunny Fonts — alternative RGPD
• v-fonts.com — variable fonts library
• Can I Use — WOFF2 support

---

Tous nos sites utilisent des fonts self-hosted, RGPD-compliant, optimisées pour la performance. Nos expertises.