css tamanho da fonte e altura da linha que não correspondem à linha de base
Estou tentando fazer algo que deve ser muito simples, mas passei meu dia entre falhas e fóruns.
Gostaria de ajustar minha fonte para corresponder à minha linha de base.No indesign, é apenas um clique, mas no css parece a coisa mais difícil do mundo.
Vamos dar um exemplo simples com valores racionais.
Nesta imagem, eu tenho uma linha de base a cada 20 px.
Então, para o meu<body> Eu faço:
<style>
body {font-size:16px; line-height:20px;}
</style>
Tudo funciona perfeitamente. Meu parágrafo corresponde à linha de base.
Mas quando estou escrevendo meu<h> que não corresponde mais à linha de base .. o que estou fazendo de errado? Isso deve seguir minha linha de base, não deveria?
<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
No meu inspetor, computado retorna os 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;}
Então isso deve mostrar algo assim não?
