Les échelles de types sont honnêtes mais lourdes : des tailles sur mobile, plus sur tablette, plus encore sur ordinateur de bureau, et un niveau de titre entre les deux qui montre toujours la couture. clamp écrit la même croissance à chaque largeur et limite là où cela compte, le tout dans une seule déclaration.

h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem); }

Préférez un ratio, pas un VW brut

  1. Écrivez l'expression du milieu sous la forme d'une partie rem fixe plus une partie vw ; la partie rem est ce qui empêche les titres de devancer le corps du texte à chaque extrémité.
  2. clamp(min, favorite, max) planchers le résultat afin que les petites fenêtres conservent une taille lisible et le plafonnent afin qu'une demande de barre latérale 4K ne renvoie jamais un en-tête de neuf rem.
  3. Le mélange est important : la croissance rem s'adapte aux paramètres de police de l'utilisateur, contrairement à VW, et cette association est ce qui donne à cette astuce sa tolérance.

Continuez à diriger honnêtement

Associez la pince à une hauteur de ligne sans unité afin de diriger les échelles avec les glyphes au lieu de les combattre. Le rythme des paragraphes survit alors à chaque étape de l’échelle, ce qui est la partie que les gens oublient et la partie que les lecteurs se sentent à l’étroit ou aérée.

Très cool dans la mesure où cela supprime du travail : un ensemble complet d'étapes de titre comprend trois nombres par niveau, et les nombres survivent à une révision de conception car leur raisonnement tient dans une seule phrase.