サイズの異なる文字が上下の行に重なるのを防ぐ

今さらですが、同じ行内にサイズの違う文字が含まれていた際に、下図のように文字が重なって読みづらくなったことがありませんか？これはline-heightプロパティの単位の付け方の違いで起こる現象なんです。

単位付きと単位なしのCSSソース

 
p {
    font-size: 0.9em;
    line-height: 1.2em; /* 単位あり */
}
 
p {
    font-size: 0.9em;
    line-height: 1.2; /* 単位なし */
}

文字が重なるサンプル

emで指定した場合（％でも同じ）は文字が重なってしまいますが、単位をつけなかった時は文字が重なりません。何故重ならないかはAll Aboutさんのページでご覧下さい。丁寧でわかりやすく説明されています。

date 2010.10.30