La typographie structure la lecture et influence directement l'ergonomie d'un site. Avec SCSS, tu peux construire une échelle typographique cohérente, centraliser les polices, gérer les graisses, les interlignes et rendre le texte responsive sans duplication. Ce chapitre te montre comment passer d'un CSS "au coup par coup" à une typographie maîtrisée et professionnelle.
font-size, line-height et font-weight.Une bonne typographie n'est pas une suite de tailles arbitraires : c'est un système cohérent basé sur des règles simples.
Sans système typographique, tu finis souvent avec :
14px, 15px, 16px, 17px un peu partout.
Cela rend le design incohérent et les ajustements difficiles.
En équipe, une typographie centralisée évite les débats permanents sur "on met quelle taille ici ?".
La lisibilité dépend souvent plus du line-height que de la taille du texte.
SCSS :
$font-base: "Inter", system-ui, sans-serif;
$font-heading: "Montserrat", system-ui, sans-serif;
$font-size-base: 16px;
$line-height-base: 1.6;
body {
font-family: $font-base;
font-size: $font-size-base;
line-height: $line-height-base;
}SCSS :
$h1-size: 32px;
$h2-size: 24px;
$h3-size: 20px;
h1 { font-size: $h1-size; }
h2 { font-size: $h2-size; }
h3 { font-size: $h3-size; }Cette approche fonctionne, mais devient vite lourde quand le système grandit. Les maps offrent une solution plus propre.
On définit une échelle de tailles cohérente, puis on la réutilise partout.
SCSS :
$font-scale: (
xs: 12px,
sm: 14px,
md: 16px,
lg: 20px,
xl: 28px,
xxl: 36px
);
@function fs($key) {
@return map-get($font-scale, $key);
}
body {
font-size: fs(md);
}
h1 { font-size: fs(xxl); }
h2 { font-size: fs(xl); }
h3 { font-size: fs(lg); }
small { font-size: fs(sm); }Une échelle typographique rend le design plus harmonieux et plus prévisible.
Le même interligne ne convient pas à un paragraphe et à un titre.
SCSS :
$line-heights: (
body: 1.6,
heading: 1.2,
tight: 1.1
);
@function lh($key) {
@return map-get($line-heights, $key);
}
body {
line-height: lh(body);
}
h1, h2, h3 {
line-height: lh(heading);
}On adapte les tailles de texte selon la largeur de l'écran.
SCSS :
$breakpoints: (
md: 768px,
lg: 1024px
);
@mixin mq($bp) {
@media (min-width: map-get($breakpoints, $bp)) {
@content;
}
}
h1 {
font-size: fs(xl);
@include mq(md) {
font-size: fs(xxl);
}
}CSS généré :
h1 {
font-size: 28px;
}
@media (min-width: 768px) {
h1 {
font-size: 36px;
}
}Mieux vaut ajuster légèrement les tailles que multiplier les variantes extrêmes.
Une typographie bien pensée se fait oublier : elle facilite la lecture.
Trop de tailles casse la hiérarchie visuelle et complique la maintenance. Une échelle avec 4-6 niveaux suffit généralement pour un projet web.
Un texte trop serré fatigue rapidement l'œil, surtout sur mobile. Prévois toujours un line-height approprié selon le contexte.
Sans système global, chaque composant devient un cas particulier. Résultat : incohérence visuelle et maintenance difficile.