Chaque titre sur le Web comporte un espace invisible : l'interligne et l'ascendeur de la police sont réservés, que les glyphes les utilisent ou non, de sorte qu'un grand titre d'affichage ne touche jamais vraiment le haut de sa boîte. Le découpage de la zone de texte est le correctif de l'imprimerie, et c'est une seule déclaration.

h1, h2 {
  text-box: trim-both cap alphabetic;
}

Que signifient les valeurs

  • trim-both supprime le demi-interligne au-dessus et en dessous du bloc de texte.
  • cap indique de couper le haut des lettres majuscules, de sorte que le haut visuel d'un titre s'aligne avec sa boîte.
  • alphabétique coupe le bas jusqu'à la ligne de base, là où le texte repose réellement.

Où il gagne sa vie

  1. Sections de héros où le titre doit rejoindre le bord supérieur : le rognage est préférable au déplacement des marges par police, une à la fois.
  2. En-têtes de la barre latérale et kickers de cartes placés à l'intérieur d'une bordure : l'espace optique correspond enfin au remplissage écrit.
  3. Boutons avec des hauteurs de ligne élevées pour un centrage vertical : coupez à la place et le bouton survit aux échanges de polices.

Le support s'étend à tous les moteurs actuels ; les navigateurs sans cela laissent simplement l'espace supplémentaire classique en place, donc rien ne se casse, le titre y est juste légèrement moins parfait. Les fonctionnalités cosmétiques avec des solutions de secours silencieuses sont les gains les moins chers en CSS, et le vernis ici est très gacor par rapport à un titre de zine audacieux comme celui de ce site.