文字サイズの異なるテキストをかぶらないようにする

最近は、ユーザビリティの観点から、文字サイズを固定せずに「%」表記や「em」表記をするのが望ましいと考えられています。

その際、ユーザがブラウザによって文字サイズを変更してする場合に、文字が重なってしまうことがあります。これは、CSSの設定で、文字の行間（line-height）に単位をつけて指定しているためです。

例えば、以下のように、行間の大きさよりも文字サイズが大きい場合、文字は重なって表示されてしまいます。

CSSコード

p {
   line-height:1.0em;
}

p span{
   font-size:2.0em;
}

(X)HTMLコード

<p>
   あいうえおかきくけこさしすせそたちつてと<br />
   なにぬねの<span>はひふへほ</span>まみむめも
</p>

このような場合には、行間の指定に単位をつけないようにします。

CSSコード

p {
   line-height:1.0;
}

p span{
   font-size:2.0em;
}