文字を小さくしたときに文字の間が大きくなる。

Question

<span>aiueo<br>aiueo</span><br>
<span class='f0'>aiueo<br>aiueo</span>

.f0{
    font-size: 0.8rem;
}

のようなコードを組むとフォントサイズを0.8としたときの文字と文字の間が1としたときと同じで相対的に広く見えてしまいます。
line-heightを0.8remで指定しましたが改善しませんでした。
自分の環境でのスクショとCodePenを貼っておきます。

Answer 1

.f0の要素がspan（display:inline）なのが原因かな、と思います。
下記のように

• spanをpに変更
• line-heightを単位無しの1.2に変更

としたところ、行間が良いかんじになりました。

※spanをpに変更せず、displayをinline-blockまたはblockにしても、行間の広さは改善します。

<p>aiueo<br>aiueo</p><br>
<p class='f0'>aiueo<br>aiueo</p>

body{
  line-height:1.2;
}
.f0 {
   font-size:0.8rem;
}