La plupart des design systems déclarent une échelle typographique par palier : une valeur pour le mobile, une pour la tablette, une pour le bureau. Cela fonctionne, mais chaque nouveau composant ramène son lot de media queries.
Il existe une autre approche : ne dimensionner qu’une seule chose — la taille de
police de la racine — puis exprimer tout le reste en em.
Le principe
:root {
--size-container: clamp(768px, 100vw, 1920px);
font-size: calc(var(--size-container) / 90);
}Le diviseur vient de la maquette : à 1440 px de large, on veut une base de
16 px, donc 1440 / 16 = 90. Tout ce qui est ensuite exprimé en em suit
proportionnellement la largeur du viewport.
Ce que ça change
Les espacements, les rayons, les tailles d’icônes : tout se met à l’échelle ensemble. Une maquette validée à 1440 px reste fidèle à 1920 px sans un seul point de rupture supplémentaire.
Le garde-fou indispensable
L’écueil est facile à manquer. À 768 px de viewport, la formule ci-dessus donne une base de 8,5 px. Le corps de texte devient illisible alors même que rien n’a « cassé » visuellement.
font-size: max(12px, calc(var(--size-container) / 90));Un plancher suffit. Sans lui, l’élégance du procédé se paie en accessibilité — et c’est un prix que personne ne devrait accepter.
