Antes de mais nada
Sua premissa está incorreta, seu texto não cabe na div
. Sua escolha de letras pode ter dado esta ilusão, veja um exemplo melhor:
#papel {width: 150mm;height: 30mm;border:1px solid red}
#papel span{font-size: 19vw;border:1px solid green;font-family:Arial;}
<div id="papel">
<span>ÇÃj</span>
</div>
Mudando o comportamento do span
e da div
Uma alternativa é deixar a div do tamanho da linha (ou a linha do tamanho da div), de forma a ficarem iguais.
Além disso, se quer um controle maior, melhor tratar o span
como bloco.
#papel {width: 150mm;border:1px solid red}
#papel span{display:block;font-size: 19vw;border:1px solid green;font-family:Arial;}
<div id="papel">
<span>RES ÇÃj</span>
</div>
Definindo altura com line-height
Se quiser ignorar os acentos e as letras que passam da baseline, conforme deixado no comentário, pode acertar o tamanho da linha da div:
#papel {width: 150mm;height:30mm;border:1px solid red;overflow:hidden}
#papel span{font-size: 19vw;border:1px solid green;font-family:Arial;line-height:30mm}
<div id="papel">
<span>RES ÇÃj</span>
</div>
Se, no exemplo acima não quiser cortar os acentos totalmente, tire o overflow:hidden
.
#papel {width: 150mm;height:30mm;border:1px solid red}
#papel span{font-size: 19vw;border:1px solid green;font-family:Arial;line-height:30mm}
<div id="papel">
<span>RES ÇÃj</span>
</div>
Note que o que está valendo nestes últimos dois exemplos é exatamente o line-height
, fazendo com que a fonte se alinhe para o espaço que tem, assim, o que "vazar" (ou o que for cortado) não vai interferir nos espaços dos elementos vizinhos.
Nota: Eu acho que o mais fácil mesmo seria simplesmente especificar a altura da fonte em milímetros mesmo, não sei se faz algum sentido usar vw
pra medidas em papel.