Baseline
B
Definition complete
En typographie, la baseline (ligne de base) est la ligne horizontale imaginaire sur laquelle reposent la plupart des caractères d'une police. Les lettres comme "a", "e", "x" et les majuscules s'alignent sur cette ligne, tandis que les descendantes (g, j, p, q, y) passent en dessous. La baseline est fondamentale pour construire une grille typographique verticale cohérente (baseline grid), alignant le texte de différentes colonnes et tailles sur un rythme vertical régulier. En CSS, la propriété vertical-align: baseline aligne les éléments inline sur cette ligne. Le line-height (interligne) est calculé par rapport à la baseline. Une grille baseline typique utilise un module de 4 ou 8 pixels, avec des tailles de texte et espacements multiples de ce module. Cette discipline typographique crée une harmonie visuelle professionnelle, particulièrement importante pour les designs éditoriaux et les systèmes de design cohérents.
Exemples pratiques
["Design system utilisant une baseline grid de 8px avec body text en 16px/24px et headings en multiples de 8px pour l'alignement vertical", "Mise en page magazine à deux colonnes où le texte s'aligne horizontalement grâce au respect strict de la baseline grid", "Interface utilisateur Figma avec plugin de baseline grid vérifiant l'alignement vertical de tous les éléments textuels"]
A quoi sert Baseline ?
["Implémenter une baseline grid CSS avec line-height et margins calculés pour maintenir le rythme vertical sur toutes les pages", "Configurer un design system Figma avec contraintes de baseline grid pour garantir la cohérence entre designers", "Auditer la typographie d'un site existant et corriger les écarts de baseline pour améliorer la lisibilité"]
Baseline en pratique chez 123web
La baseline grid apporte une rigueur typographique professionnelle à vos designs. Définissez un module de base (4 ou 8px) et assurez-vous que tous vos line-heights et espacements verticaux sont des multiples de ce module.