Principes typographiques

Maîtrisez les règles fondamentales qui font la différence entre une typographie amateur et professionnelle.

Hiérarchie visuelle

Bon exemple

Titre principal

Sous-titre descriptif

Corps de texte avec une taille et un contraste appropriés pour une lecture confortable.

Note secondaire en plus petit.

Mauvais exemple

Titre principal

Sous-titre descriptif

Corps de texte avec une taille inappropriée.

Note secondaire trop visible.

Espacement et rythme

Line Height

Interligne

1.2 (trop serré)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1.6 (optimal)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Letter Spacing

Crénage

-0.05em

Typography

0em (normal)

Typography

0.1em

Typography

Margins

Marges

Marge insuffisante

Marge appropriée

Marge généreuse

Kerning et ligatures

Kerning (ajustement des paires)

Sans kerning

AVANT

Avec kerning

AVANT

Le kerning ajuste l'espace entre certaines paires de lettres (AV, WA, To) pour un rendu visuel plus harmonieux.

Ligatures

Sans ligatures

fi fl ff ffi ffl office

Avec ligatures

fi fl ff ffi ffl office

Les ligatures combinent certaines lettres pour éviter les collisions et améliorer la lisibilité. Très visible avec EB Garamond, une police serif classique.

Contraste et lisibilité

Contraste des couleurs

Texte blanc sur fond sombre
Contraste: 17.74:1 WCAG AAA
Texte sombre sur fond clair
Contraste: 16.12:1 WCAG AAA
Mauvais contraste
Contraste: 3.28:1 WCAG Fail

Longueur de ligne

~45-75 caractères (optimal)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

> 90 caractères (trop long)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Choix des polices

Combinaisons harmonieuses

Serif pour les titres

Sans-serif pour le corps

Mono pour le code

Sans-serif pour les explications

Erreurs courantes

  • • Trop de polices différentes
  • • Comic Sans en contexte professionnel
  • • Polices décoratives pour le corps
  • • Mauvais appariement de styles

Règle des 2-3 polices

Limitez-vous à 2-3 polices maximum : une pour les titres, une pour le corps, et éventuellement une pour les accents.

Règles d'or

1

Hiérarchie claire

Établissez une hiérarchie visuelle cohérente pour guider le lecteur.

2

Espacement généreux

N'ayez pas peur du vide. L'espace blanc améliore la lisibilité.

3

Contraste suffisant

Assurez un ratio de contraste d'au moins 4.5:1 pour l'accessibilité.

4

Cohérence

Maintenez des styles cohérents à travers tout votre design.

5

Lisibilité avant style

La fonction prime sur la forme. La lisibilité est non-négociable.