読みやすさの観点からスタイルシートで行間を広く（一行の高さを高く）指定するのは多く用いられています。
そして更に、基本のフォントサイズを定める中、一部のテキストを強調する目的などでフォントサイズを大きく指定した場合、テキストが上下の行と重なってしまって読みづらくなった経験はありませんか？
この現象を防ぐ方法についてのメモです。

まずこの現象が起こる原因は行間を調節する「line-height」プロパティ数値の単位です。
ここでは詳しい解釈の違いなど省き（気になる方はエントリー下部の参考リンクよりどうぞ）、簡潔にご紹介。



「単位あり」の場合




CSS

p {
	line-height:1.6em;
}
span {
	font-size: 35pt;
	color: #009000;
}

<p>の中で強調する部分を<span>で指定しています。
このように、line-heightプロパティの数値に単位を付けるとテキストが上下の行に重なってしまいます。
今回は単位をemにしていますが、%でも同様です。


「単位なし」の場合



CSS

p {
	line-height:1.6;
}
span {
	font-size: 35pt;
	color: #009000;
}

単位「em」を消しました。重なりはありません。
つまり、行間を指定する時は単位を付けないのが望ましいと思います。
それで困るという事はありませんしね。


参考
All About ≫ 行間(行の高さ)を調節するなら単位はナシで