Leçon 2 : échelle de typographie et d'espacement — un rythme visuel né d'un système
Un designer te remet une maquette avec 11 tailles de police différentes et 7 valeurs d'espacement aléatoires. Sans échelle, chaque écran paraît légèrement décalé. Cette leçon t'apprend à définir une `type scale` et une `spacing scale` comme tokens dans `tailwind.config.ts` — des paliers fixes qui cr
Une échelle, c'est comme les pointures de chaussures : il existe un ensemble fixe de paliers que tout le monde partage, au lieu de mesurer chaque pied en millimètres au hasard. C'est comme ça que toutes les paires finissent par s'accorder.
- type scale
- Un ensemble défini de tailles de police qui progressent selon un ratio fixe — par exemple `sm`, `base`, `lg`, `xl` — pour que chaque texte soit choisi dans un petit ensemble de paliers plutôt qu'une taille libre.
- spacing scale
- Un ensemble de tokens d'espacement construits sur une unité de base (généralement 4px) — `1`, `2`, `4` — qui alimentent le padding, la margin et le gap, pour que chaque espace de l'UI s'aligne sur la même grille.
- modular scale
- Une échelle où chaque palier est le précédent multiplié par un ratio fixe (par ex. 1.25) — ce qui donne à la typographie une progression harmonieuse au lieu de sauts aléatoires.
- base unit
- Le petit nombre dont chaque valeur d'espacement est un multiple — généralement 4px ou 8px — pour que chaque valeur de la grille se divise par lui et qu'aucun espace ne tombe « entre » les paliers.
