Connaître les familles typographiques

Ce que vous saurez faire à la fin

1. Distinguer les familles typographiques (serif, sans-serif, slab, mono, display, script)
2. Choisir une police principale adaptée au positionnement de la marque
3. Combiner deux polices avec des règles de contraste sûres
4. Construire une échelle typographique (type scale) cohérente
5. Configurer Google Fonts ou héberger des polices localement pour la performance
6. Optimiser le rendu et l’accessibilité (FOUT, ligatures, lisibilité, ratios de contraste)

Durée : 4h. Pré-requis : savoir manipuler du HTML/CSS, connaître Figma ou tout outil design, avoir un projet web actif sur lequel appliquer les règles, comprendre les unités CSS rem et px, prévoir 0 FCFA (Google Fonts et Fontsource sont gratuits) ou un budget jusqu’à 50 000 FCFA si vous achetez une licence commerciale chez Adobe Fonts ou MyFonts.

Étape 1 — Connaître les familles typographiques

Avant de combiner des polices, il faut savoir lire leur famille. Cinq grandes familles dominent le web. Les serif (avec empattements) évoquent la tradition, l’éditorial, le luxe : Playfair Display, Cormorant, Lora. Les sans-serif (sans empattements) évoquent le moderne, le tech, le neutre : Inter, Manrope, DM Sans. Les slab serif (empattements rectangulaires) sont robustes et institutionnels : Roboto Slab, Zilla Slab. Les mono sont alignées sur une grille fixe, pour le code : JetBrains Mono, IBM Plex Mono. Les display et script sont décoratives, pour des titres ou des logos uniquement : Bebas Neue, Caveat, Pacifico.

Étape 2 — Cadrer le style avec le positionnement

Une typographie raconte une histoire avant même qu’on lise. Définissez les 3 adjectifs de votre marque (sérieux, accessible, moderne, par exemple) et regardez quelles familles correspondent.

Étape 3 — Choisir une police principale

La police principale est utilisée pour 90 % du contenu : corps de texte, navigation, formulaires. Quatre critères de sélection : 1) elle existe en au moins 4 graisses (300, 400, 600, 700), 2) elle a une bonne hauteur d’x (lisibilité), 3) elle existe en latin étendu pour les accents français (é, à, ç), 4) elle a une licence claire (SIL Open Font License pour Google Fonts est sûre). Évitez les polices uniquement présentes en regular : vous n’aurez plus de hiérarchie visuelle.

Étape 4 — Choisir une police secondaire pour les titres

Le secondaire sert aux titres et aux accents visuels. Trois règles de combinaison saines : 1) jamais deux polices de la même famille (deux sans, deux serifs : pas de lisibilité différenciée), 2) jamais deux polices décoratives ensemble (illisible), 3) le contraste doit être franc, par exemple un serif éditorial pour les titres et un sans-serif moderne pour le corps. Les paires testées et éprouvées : Playfair Display + Source Sans, Fraunces + Inter, DM Serif Display + DM Sans, Space Grotesk + Inter.

Étape 5 — Tester la combinaison sur du contenu réel

Ne validez jamais une combinaison sur du Lorem Ipsum. Prenez un vrai texte de votre futur site (titre, sous-titre, paragraphe, citation, note de bas de page) et testez la paire dans Figma sur 3 maquettes : page d’accueil, article de blog, fiche produit. Si la lecture se fatigue après 3 lignes, le corps est trop fin ou le crénage est mauvais. Changez de corps. La typographie qui chante en démo et qui meurt sur 1500 mots de contenu sénégalais réel ne sert à rien.

Étape 6 — Construire l’échelle typographique

Une échelle (type scale) est une suite de tailles cohérentes utilisées partout. Choisissez un ratio mathématique : 1.125 (mineur seconde) pour un produit dense, 1.250 (tierce mineure) pour un site équilibré, 1.333 (quarte parfaite) pour un site éditorial avec gros titres. Démarrez à 16 px (base) et multipliez.

ÉCHELLE TYPE 1.250 (tierce mineure) — base 16 px

xs   : 12.80 px  -- mentions légales
sm   : 14.22 px  -- sous-textes, badges
base : 16.00 px  -- corps de texte
lg   : 18.00 px  -- intro, lead
xl   : 20.00 px  -- citation
2xl  : 25.00 px  -- h4
3xl  : 31.25 px  -- h3
4xl  : 39.06 px  -- h2
5xl  : 48.83 px  -- h1
6xl  : 61.04 px  -- hero
7xl  : 76.29 px  -- mega titre marketing

Étape 7 — Régler la hauteur de ligne (line-height)

La ligne respire ou étouffe selon line-height. Règles éprouvées : pour le corps (16 à 18 px), line-height 1.5 à 1.7. Pour les titres larges (32 px+), line-height 1.1 à 1.25. Pour les sous-titres (20 à 28 px), line-height 1.3 à 1.4. Une erreur fréquente : appliquer la même line-height partout (1.5) et obtenir des h1 énormes avec trop d’espace entre les lignes. Définissez 3 valeurs (tight, normal, relaxed) et appliquez selon la taille.

Étape 8 — Régler l’interlettrage (letter-spacing)

L’interlettrage est l’arme cachée des designers. Règle générale : plus le texte est grand, plus on peut serrer (letter-spacing -0.02em pour les hero). Plus le texte est petit, plus on peut espacer (+0.02em pour les CAPS de 12 px). N’utilisez jamais letter-spacing 0 par défaut sur des CAPS : c’est illisible. Sur les corps en minuscules à 16 px, laissez à 0 : la police a été dessinée pour cette taille.

Étape 9 — Charger Google Fonts proprement

Google Fonts est gratuit, conforme RGPD à condition d’héberger localement (depuis 2022, l’arrêt LG München contre Google Fonts impose en théorie la self-host pour éviter le transfert d’IP). La méthode rapide pour les PME sénégalaises sans contrainte RGPD stricte reste l’embed direct.

CHARGEMENT GOOGLE FONTS PERFORMANT

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Fraunces:wght@600;800&display=swap" rel="stylesheet">

CSS :
:root {
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Fraunces', Georgia, serif;
}
body { font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-heading); }

Étape 10 — Héberger les polices localement avec Fontsource

Pour une performance maximale et zéro dépendance externe, utilisez le package Fontsource via npm. Cela télécharge les fichiers WOFF2 dans votre projet, garantit la disponibilité même hors ligne, et évite les dépendances Google. Pour un site React, Next.js ou Astro, c’est devenu le standard. Vous gagnez 200 à 500 ms de Largest Contentful Paint.

Étape 11 — Éviter le FOUT et le FOIT

FOUT (Flash Of Unstyled Text) et FOIT (Flash Of Invisible Text) ruinent la perception de vitesse. Trois leviers : 1) ajoutez display=swap dans Google Fonts pour afficher la fallback immédiatement, 2) déclarez des fallbacks proches en métriques (system-ui pour Inter), 3) préchargez les WOFF2 critiques avec rel=preload. La règle ultime : aucune typo critique ne doit attendre plus de 500 ms.

Étape 12 — Vérifier l’accessibilité du texte

Trois contrôles obligatoires. 1) Taille minimale de corps : 16 px. En dessous, beaucoup d’utilisateurs sénégalais sur smartphone bas de gamme ne pourront pas lire. 2) Contraste WCAG : 4.5:1 entre texte et fond pour le corps, 3:1 pour les textes larges. 3) Lisibilité des chiffres : si vos polices ont des chiffres anciens (oldstyle figures), désactivez-les pour les prix et tableaux financiers. Activez font-feature-settings: « tnum » pour des chiffres tabulaires alignés.

CSS POUR CHIFFRES TABULAIRES

.price, .table-numbers {
  font-variant-numeric: tabular-nums;
}

/* Désactive les ligatures pour le code */
.code, pre, code {
  font-variant-ligatures: none;
}

Étape 13 — Tester sur les vrais terminaux

Une typographie qui passe sur un MacBook Pro Retina peut s’effondrer sur un Tecno Spark à 70 000 FCFA. Testez systématiquement votre site sur : un smartphone Android entrée de gamme (écran HD basse densité), un iPhone récent (écran Retina), un PC portable Windows 1080p, une tablette. Chez ITSkillsCenter, faites le test sur un public sénégalais réel : envoyez 3 maquettes par WhatsApp à 5 contacts variés et demandez ce qu’ils trouvent le plus lisible.

Étape 14 — Documenter dans le brand book

La page typographie de votre brand book doit contenir : nom des polices et licences, paires recommandées, échelle complète avec usage (h1 = 5xl en bold, body = base en regular), valeurs line-height par taille, valeurs letter-spacing par usage, capture d’écran de chaque style en situation. Sans documentation, votre client utilisera Calibri sur ses présentations et tuera la cohérence en 2 mois.

Erreurs fréquentes

• Choisir 4 polices différentes : aucune cohérence, performance dégradée.
• Tester la combinaison sur du Lorem Ipsum au lieu de vrai contenu.
• Utiliser une police sans graisse Bold : titres mous.
• Charger 12 graisses Google Fonts pour utiliser uniquement 3 : 800 ko de polices inutiles.
• Ignorer display=swap : page blanche pendant 2 secondes sur 3G sénégalaise.
• Mettre line-height 1.5 partout, y compris sur les hero : aération anarchique.
• Utiliser une police décorative pour le corps : illisible après 2 lignes.
• Oublier les chiffres tabulaires sur un tableau de prix : alignement bancal.
• Ne pas tester sur smartphone Android entrée de gamme.
• Acheter une licence MyFonts à 200 USD pour un client qui n’avait pas de budget police.

Checklist avant livraison typographique

• Police principale choisie avec au moins 4 graisses.
• Police secondaire avec contraste de famille (serif vs sans).
• Combinaison testée sur 3 maquettes avec contenu réel.
• Échelle typographique définie avec ratio mathématique.
• Line-height configurée par taille (tight, normal, relaxed).
• Letter-spacing configuré pour CAPS, hero et corps.
• Polices chargées avec preconnect et display=swap.
• Fallbacks système configurés pour éviter le FOIT.
• Contraste WCAG 4.5:1 vérifié sur tout texte.
• Chiffres tabulaires activés pour prix et tableaux.
• Test fait sur smartphone bas de gamme.
• Page typographie documentée dans le brand book avec licences.