Ressources • Typographie & fontes

Maîtriser la typo : lisibilité, hiérarchie… et style.

Une bonne typographie, c’est une structure (règles) + une signature (ton). Ici : où trouver des fontes, comment les combiner, comment régler une page pour que ça lise tout seul.

Pairing Règles web Licences Variables

Démo rapide (tu peux copier ces réglages)

Style A • Sans-serif moderne

Design Atlas

Exemple de texte : une sans-serif bien réglée donne une lecture fluide, surtout sur mobile. 16–18px et un interligne autour de 1.8–2.0, c’est souvent parfait.

Réglages conseillés

Body 17px • Line-height 1.9 • Width 70–85ch • H1 36–44px • H2 22–28px

Style B • Éditorial (contraste)

Une typographie peut être une “voix”.

Mélanger serif pour les titres + sans-serif pour le texte donne souvent un rendu “presse”. Le secret : garder une hiérarchie simple et un contraste lisible.

À éviter

Texte trop petit, trop gris, trop long.

À viser

Air + contraste + rythme.

Où trouver des fontes (vraies ressources)

Gratuit / web

Google Fonts

Catalogue immense, très pratique pour WordPress. Tu peux filtrer par style, langue, épaisseur, variables, etc.

Ouvrir Google Fonts ↗

Pro / curation

Fontshare

Sélection très qualitative (souvent gratuite). Super pour trouver une sans-serif “premium” et une serif éditoriale.

Explorer Fontshare ↗

Pro / licences

Adobe Fonts

Inclus dans Creative Cloud : très pratique si tu utilises déjà Adobe (cohérence entre print & web).

Ouvrir Adobe Fonts ↗

Sélection / galerie

Typewolf

Inspirations typographiques (quelles polices sont utilisées sur quels sites). Très utile pour apprendre en observant.

Voir Typewolf ↗

Pairing : combiner 2 fontes sans tout casser

Règle d’or : 1 fonte pour les titres, 1 fonte pour le texte. Il faut du contraste (forme / graisse), mais pas de conflit (mood).

Pairing “safe”

Sans-serif + Sans-serif

Même famille de style, mais une fonte titre plus “display” (ou plus bold) + une fonte texte neutre.

Exemple : Titres très gras / texte regular — ça suffit souvent à créer une identité.

Pairing “éditorial”

Serif + Sans-serif

Très efficace pour un blog : titres plus “presse”, texte propre et moderne.

Trouver des combinaisons ↗

Web & licences : le point rapide (important)

À retenir

  • Vérifie la licence (usage web autorisé ?)
  • Évite trop de variantes (performance)
  • Pour le texte long : lisibilité d’abord

Réglages web

  • Body : 16–18px
  • Line-height : 1.7–2.0
  • Largeur : 60–85ch
  • Contraste : texte foncé / fond clair (souvent)

Tip : si tu veux un look “premium” sans te prendre la tête, utilise une seule famille avec plusieurs graisses (Regular/Medium/Bold).