el tamaño de fuente css y el alto de línea no coinciden con la línea base
Estoy tratando de hacer algo que debería ser muy simple, pero me he pasado el día entre fallas y foros.
Me gustaría ajustar mi fuente para que coincida con mi línea base.En indesign es un clic, pero en css parece lo más difícil del mundo.
Tomemos un ejemplo simple con valores racionales.
En esta imagen tengo una línea base cada 20px.
Entonces para mi<body> Hago:
<style>
body {font-size:16px; line-height:20px;}
</style>
Todo funciona a la perfección. Mi párrafo coincide con la línea de base.
Pero cuando estoy escribiendo mi<h> eso ya no coincide con la línea de base ... ¿qué estoy haciendo mal? Eso debería seguir mi línea de base, ¿no?
<style type="text/css">
body{font-size: 16px; ,line-height: 20px;}
h1{font-size: 5em; line-height: 1.25em;}
h2{font-size: 4em; line-height: 1.25em;}
h3{font-size: 3em; line-height: 1.25em;}
h4{font-size: 2em; line-height: 1.25em;}
</style>
ps: 20/16 = 1.25em
En mi inspector, calculado devuelve los valores esperados
h1{font-size: 84px; line-height: 100px;}
h2{font-size: 68px; line-height: 80px;}
h3{font-size: 52px; line-height: 60px;}
h4{font-size: 36px; line-height: 40px;}
Entonces, ¿eso debería mostrar algo como esto no?
