La baseline est la ligne imaginaire horizontale sur laquelle reposent la majorité des lettres minuscules et majuscules d’un texte.
C’est l’une des lignes de référence fondamentales de la structure verticale des caractères, avec :
- la mean line (ligne moyenne),
- la cap height (hauteur des capitales),
- la x-height,
- la descender line.
Toutes les lettres comme a, c, e, m, n, x, A, B, E s’appuient sur la baseline.
Seules les lettres avec descendeurs (g, j, p, q, y) descendent en dessous de cette ligne.
Rôle de la baseline en design
- Alignement vertical : garantit que le texte est aligné de façon cohérente, même avec des polices ou tailles différentes.
- Rythme visuel : dans le design éditorial ou web, une grille de baseline (baseline grid) impose un rythme régulier entre les lignes de texte et les autres éléments.
- Lisibilité : un mauvais alignement à la baseline crée une impression de désordre ou de flottement.
Baseline dans Figma
1. Affichage automatique
Figma n’affiche pas de ligne de baseline visible par défaut, mais il utilise la baseline en interne pour :
- Aligner le texte dans les cadres,
- Calculer la hauteur de ligne (line height),
- Gérer les espacements verticaux.
2. Mesure depuis la baseline
Lorsque vous définissez un line height en pixels (et non en % ou sans unité), Figma calcule la distance de baseline à baseline conformément à la typographie traditionnelle.
Exemple :
- Police : 16 px
- Line height : 24 px
→ La distance entre la baseline d’une ligne et celle de la suivante est de 24 px.
3. Grille de baseline (Baseline Grid)
Figma permet d’activer une grille de baseline pour aligner tout votre contenu à un rythme vertical typographique :
Comment l’activer :
- Sélectionnez un frame.
- Dans le panneau de droite, cliquez sur « + » à côté de Layout Grid.
- Choisissez Type : Baseline Grid.
- Réglez :
- Offset : décalage depuis le haut du frame (souvent = line height / 2)
- Height : hauteur d’une ligne (ex. : 8 px, 12 px, 24 px)
Astuce : alignez votre line height sur la hauteur de la grille pour un rythme parfait.
4. Utilisation pratique
- Dans les Design Systems, la grille de baseline assure que titres, paragraphes et icônes s’alignent harmonieusement.
- Pour le design éditorial (PDF, magazines numériques), elle est essentielle.
- En UI moderne, elle est parfois relâchée au profit de grilles modulaires (8 px), mais reste utile pour les blocs textuels denses.
Attention
- Si vous utilisez un line height en % ou sans unité (ex. :
1.5), Figma calcule la hauteur totale de la boîte de texte, mais la baseline reste le point d’ancrage. - Les polices iconographiques (comme Font Awesome) ne respectent pas toujours la baseline → vérifiez leur alignement avec du texte.
Bonnes pratiques
- Utilisez une grille de baseline pour les pages textuelles (articles, CGU, onboarding).
- Alignez les titres et paragraphes sur la même grille.
- Testez l’alignement en superposant deux cadres de texte avec des polices différentes.