La Grille de Baseline

Le framework

1. 01

   Choisissez votre increment

   4px pour du dense (dashboards, apps), 8px pour du standard. Toute hauteur de ligne et tout espacement vertical sera un multiple de cette valeur.

2. 02

   Alignez le texte sur la grille

   Chaque ligne de texte repose sur une ligne de baseline. Votre line-height doit etre un multiple de votre increment. 16px de font, 24px de line-height sur une grille 8px : parfait.

3. 03

   Calez les blocs

   Padding top, padding bottom, margin entre les blocs : tous multiples de l'increment. Le rythme vertical devient mathematique, pas intuitif.

4. 04

   Gerez les exceptions

   Une icone de 20px sur une grille de 8px ? Compensez avec du padding pour que l'ensemble retombe sur la grille. Chaque element respecte le rythme global.

5. 05

   Verifiez avec l'overlay

   Activez la grille de baseline dans Figma. Chaque element doit s'aligner. Si ca ne tombe pas juste, ajustez les line-heights et les spacings.

Pour aller plus loin