Réponse 1 : les glyphes d'une police sont positionnés sur un canevas. Ils ont besoin d'espace blanc autour pour être positionnés les uns par rapport aux autres. La quantité de blanc diffère. L'une des raisons est le rapport entre la hauteur x et la taille des ascendants (bdfhklt) et des descendants (gjqpy). Si une police a une hauteur x relativement petite (grandes (as/de)cenders), il y a plus de blanc autour d'un glyphe qu'avec une police qui a une hauteur x relativement grande. D'autres variables influencent la quantité de blanc : le rapport majuscules/minuscules et le poids de la police.
Réponse 2 : Rien n'est cassé. Vous pouvez utiliser css et définir la taille de la police de manière relative et corriger la taille d'un texte.
![x-height and capital height]()
Vous pouvez faire défiler l'image jusqu'au bord de la fenêtre de votre navigateur pour vérifier l'alignement des glyphes.
Haut : Pas d'ajustement
Moyen : Même hauteur x. Cela semble bon !
Bas : Même hauteur de capital. C'est ce dont vous avez besoin puisque l'une de vos polices est tout en majuscules.
Le html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p
{
border: 1px solid red;
line-height: 1EM;
font-size: 600%;
margin: 0 0 0.1EM 0;
}
.arial { font-family: 'Arial'; }
.times { font-family: 'Times New Roman'; }
.times_same_x_height { font-size:116%; }
.times_same_capital_height { font-size:108%; }
.font_stack { font-family: "Does not exist", serif; }
</style>
</head>
<body>
<p>
<span class="arial">xH</span>
<span class="times">xH</span>
</p>
<p>
<span class="arial">xH</span>
<span class="times times_same_x_height">xH</span>
</p>
<p>
<span class="arial">xH</span>
<span class="times times_same_capital_height">xH</span>
</p>
</body>
</html>
Note 0 : Si ça a l'air bien, c'est bien. N'utilisez donc pas x-height et c'est tout. Parfois, une nette différence de taille rendra une combinaison de polices plus harmonieuse. Utilisez vos yeux (et votre cerveau).
Note 1 : J'ai placé du texte dans le même paragraphe. Je l'ai fait parce que cela permet d'aligner la ligne de base. Mais il est plus probable que vos éléments de texte soient séparés les uns des autres. Définissez la droite line-height y margin à positionner. Utilisez des valeurs relatives. Et parfois un petit décalage de la ligne de base : .shift { top: -.01EM; position:relative; }
Note 2 : Si votre police n'existe pas. La pile de polices utilisera la meilleure police suivante. Sachez que votre belle typographie s'applique à toutes les polices de la pile !
Conseil : si vous souhaitez modifier légèrement le poids d'une police. Vous pouvez rendre la couleur un peu plus claire. Par exemple, du noir au gris très foncé. Cela lui donnera un aspect moins gras.
Bonus : IE se conformera.
Les commentaires sont appréciés.
