Le Contraste Typographique

Pourquoi c'est important

Sans contraste typographique, tout se ressemble et rien ne se lit. Carl Dair a identifie 7 types de contraste dans "Design With Type" (1952). Le contraste guide l'oeil, etablit la hiérarchie et rend votre design lisible en une seconde.

Le framework

1. 01

   1. Taille

   Le levier le plus evident. Grand = important, petit = secondaire. Mais attention : une difference de 1-2px ne suffit pas. Visez un ratio minimum de 1.5x entre niveaux.

2. 02

   2. Graisse (Weight)

   Bold vs Light crée une hiérarchie immédiatement lisible, meme par un non-designer. C'est le contraste le plus efficace après la taille.

3. 03

   3. Couleur

   Des teintes foncees pour l'important, des teintes claires pour le secondaire. Meme en monochrome, le contraste de valeur crée de la hiérarchie.

4. 04

   4. Casse (Case)

   UPPERCASE pour les labels et titres courts, lowercase pour le corps. L'uppercase attire l'oeil mais tue la lisibilite sur les longs textes.

5. 05

   5. Espacement

   Plus d'espace autour d'un titre = plus de presence. L'espacement a autant d'impact que la taille. C'est l'arme secrete du designer (Dair, 1952).

6. 06

   6. Forme (Style)

   Roman vs Italic, Serif vs Sans-serif. Mixer deux familles typographiques crée un contraste naturel. Une serif en titre + une sans-serif en corps = combo classique.

Pour aller plus loin