# Les bases de la typographie : taille, graisse, espacement et rythme

[Canonical HTML page](https://gradiently.design/fr/guide/typography-basics)

L’essentiel de ce qui rend une typographie professionnelle ne tient pas à la police. Ce sont six décisions de taille, de graisse et d’espace, et chacune a une valeur par défaut raisonnable.

## The short version

- La typographie repose sur six décisions : la taille, la graisse, l’interlignage, l’interlettrage, l’alignement et la longueur de ligne.
- Une échelle typographique, où chaque taille est plus grande que la précédente selon un rapport fixe, donne à une création une hiérarchie claire et cohérente.
- Le texte courant se lit confortablement avec un interlignage d’environ 1,4 à 1,6 fois la taille de la police, tandis que les grands titres en demandent moins, autour de 1,0 à 1,2.
- Des lignes d’environ 45 à 75 caractères sont la plage la plus souvent recommandée pour une lecture confortable.
- Deux ou trois graisses suffisent pour la plupart des créations, et elles doivent nettement différer, par exemple regular et bold plutôt que regular et medium.

Les **bases de la typographie** se résument à six décisions : la **taille** de chaque texte, sa **graisse**, l’**interlignage**, l’**interlettrage**, l’**alignement** et la **longueur de ligne**. Réglez-les bien et presque n’importe quelle police correcte paraît professionnelle ; réglez-les mal et la meilleure police du monde fait amateur. Chacune a une valeur par défaut raisonnable, donnée ci-dessous, dont vous pouvez vous écarter en connaissance de cause.

## La taille : utiliser une échelle typographique

Choisir les tailles une par une mène à une page remplie de tailles presque identiques, sans ordre clair. Une **échelle typographique** règle le problème : partez d’une taille de base et multipliez-la par le même rapport à chaque palier. Le rapport définit le caractère. Un petit rapport, comme 1,2, paraît calme et dense ; un grand, comme 1,5, paraît spectaculaire et éditorial.

| Palier | Rapport 1,25 depuis 16 px | Usage courant |
| --- | --- | --- |
| Petit | 12,8 px | Légendes, étiquettes |
| Base | 16 px | Texte courant |
| Palier 1 | 20 px | Chapeau, grand texte courant |
| Palier 2 | 25 px | Intertitres |
| Palier 3 | 31,25 px | Titres de section |
| Palier 4 | 39 px | Titres de page |
| Palier 5 | 48,8 px | Grands titres d’en-tête |

Une échelle de 1,25 depuis une base de 16 pixels. Arrondissez comme vous voulez ; l’important est que chaque taille soit liée aux autres.

```css
:root {
  --step--1: 0.8rem;     /* 12.8px */
  --step-0: 1rem;        /* 16px   */
  --step-1: 1.25rem;     /* 20px   */
  --step-2: 1.5625rem;   /* 25px   */
  --step-3: 1.953rem;    /* 31.25px */
  --step-4: 2.441rem;    /* 39px   */
  --step-5: 3.052rem;    /* 48.8px */
}

body { font-size: var(--step-0); }
h3   { font-size: var(--step-2); }
h2   { font-size: var(--step-3); }
h1   { font-size: var(--step-5); }
```

La même échelle en propriétés personnalisées CSS, avec une taille racine de 16 pixels. N’utilisez que les paliers de l’échelle.

Sur les publications pour les réseaux sociaux, le canevas est plus grand : les chiffres augmentent mais l’idée reste la même. Sur une publication de 1080 pixels de large, un titre d’environ 90 à 120 pixels et une ligne de détail d’environ 40 à 56 gardent un palier net entre eux et se lisent sur téléphone.

## La graisse : moins de graisses, des paliers plus nets

La graisse est l’épaisseur des traits, généralement numérotée de 100 (thin) à 900 (black), avec 400 pour regular et 700 pour bold. Deux ou trois graisses suffisent pour la plupart des créations. L’essentiel est que des graisses voisines se distinguent : regular contre bold se lit comme un contraste voulu, regular contre medium ressemble souvent à une erreur.

### Confus

- Cinq graisses sur une même page
- Regular 400 contre medium 500 pour souligner
- Des graisses light ou thin pour un petit texte courant
- Du gras sur des paragraphes entiers

### Clair

- Deux ou trois graisses, chacune avec un rôle
- Regular 400 contre bold 700 ou semibold 600
- Regular ou medium pour le texte courant en petite taille
- Du gras sur quelques mots qui doivent ressortir

## L’interlignage : de l’air entre les lignes

L’interlignage est la distance d’une ligne à la suivante. Le texte courant a besoin d’air pour se lire confortablement : environ **1,4 à 1,6** fois la taille de la police est une plage fiable. Les grands titres en demandent moins, autour de **1,0 à 1,2**, car en grande taille les espaces paraissent bien plus larges qu’ils ne le sont. Les lignes longues demandent un peu plus d’interlignage que les courtes, pour que l’œil retrouve le début de la ligne suivante. [Interlignage et longueur de ligne](https://gradiently.design/fr/guide/line-height-and-line-length) va plus loin.

## L’interlettrage : le plus souvent, n’y touchez pas

Les polices sont espacées par leurs dessinateurs pour les tailles prévues : le texte courant a rarement besoin d’ajustement. Deux exceptions méritent d’être connues. Les grands titres gagnent souvent à être légèrement resserrés, avec une petite valeur négative comme -0.01em à -0.02em. Le texte en capitales et les petites étiquettes demandent l’inverse : un peu d’espace en plus, autour de 0.05em à 0.1em, car les capitales ont été dessinées pour côtoyer des minuscules. [L’interlettrage](https://gradiently.design/fr/guide/letter-spacing) détaille tout cela.

## L’alignement

Le texte aligné à gauche, avec un bord droit irrégulier, est la norme pour une bonne raison : chaque ligne commence au même endroit, et l’œil la retrouve facilement. Le texte centré convient aux textes courts, comme un titre, une citation ou une invitation, et devient fatigant au-delà de quelques lignes. Le texte justifié paraît net à l’impression quand le logiciel gère bien la césure, mais sur le web il crée souvent des espaces inégaux entre les mots.

Une publication verticale avec un grand titre, une petite étiquette espacée au-dessus et une ligne d’appui en dessous

Trois tailles d’une même échelle, deux graisses, un interlignage serré sur le titre et un peu d’espace en plus sur la petite étiquette au-dessus.

## La longueur de ligne : la justification

La longueur d’une ligne, ce que les typographes appellent la **justification**, compte autant que sa taille. Des lignes trop longues rendent difficile de trouver la suivante ; des lignes trop courtes cassent le rythme de lecture par des retours incessants. Une plage d’environ **45 à 75 caractères** par ligne est la plus souvent recommandée pour le texte courant. Sur le web, l’unité `ch` rend cela facile.

```css
article p {
  max-width: 65ch;   /* about 65 characters per line */
  line-height: 1.55;
}

h1 {
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance; /* evens out headline lines where supported */
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--step--1);
}
```

Longueur de ligne, interlignage et interlettrage dans une petite feuille de style. `text-wrap: balance` est ignoré sans risque là où il n’est pas pris en charge.

## Le rythme : un espacement qui regroupe

L’espace indique aux lecteurs ce qui va ensemble. Un titre doit être plus proche du paragraphe qu’il introduit que de celui qui le précède : mettez donc plus d’espace au-dessus des titres qu’en dessous. Gardez un espacement de paragraphes constant, et utilisez une seule unité d’espacement, souvent basée sur l’interlignage du texte courant, partout. Quand l’espace est utilisé de façon cohérente, la page gagne un rythme qui la rend calme même lorsqu’elle est pleine. [La hiérarchie visuelle](https://gradiently.design/fr/guide/visual-hierarchy) s’appuie sur ce principe.

1. **Choisissez une taille de texte courant** 16 pixels ou plus à l’écran ; bien plus sur les publications pour les réseaux sociaux.
2. **Choisissez un rapport d’échelle** 1,2 pour un rendu calme et dense, 1,25 pour la plupart des cas, 1,333 ou plus pour un effet éditorial.
3. **Fixez deux graisses** Regular pour la lecture, bold ou semibold pour l’accentuation et les titres.
4. **Réglez les interlignages** Environ 1,5 pour le texte courant, environ 1,1 pour les grands titres.
5. **Limitez la longueur de ligne** Environ 65 caractères pour le texte courant.
6. **Espacez avec une unité** Un seul palier d’espacement, réutilisé, avec plus d’espace au-dessus des titres qu’en dessous.

Avec tout cela en place, le choix de la police devient le plaisir plutôt que la rustine. Commencez par [les associations de polices](https://gradiently.design/fr/guide/font-pairing) et [serif ou sans serif](https://gradiently.design/fr/guide/serif-vs-sans-serif).

## FAQ

### Quelles sont les règles de base de la typographie ?

Utilisez une échelle typographique cohérente, deux ou trois graisses bien distinctes, un interlignage d’environ 1,4 à 1,6 pour le texte courant, des lignes d’environ 45 à 75 caractères, un alignement à gauche pour les textes longs et un espacement cohérent.

### Quelle taille de texte courant choisir pour un site web ?

16 pixels est un minimum courant pour le texte courant à l’écran, et beaucoup de sites utilisent un peu plus grand.

### Quel interlignage utiliser ?

Environ 1,4 à 1,6 fois la taille de la police pour le texte courant, et autour de 1,0 à 1,2 pour les grands titres.

### Qu’est-ce qu’une échelle typographique ?

Un ensemble de tailles de police où chacune est plus grande que la précédente selon un rapport fixe, comme 1,25 : chaque taille est liée aux autres et la hiérarchie reste cohérente.