携帯サイトのフォントサイズ指定

携帯サイトでフォントサイズを変える場合、端末によって変化の度合いが異なります。同じソースでも画面で表示した時に見た目の印象が変わるので注意が必要です。

文字の大きさは、メインターゲットとなるユーザーの属性に合わせた方が良いでしょう。ターゲットとなるユーザーが比較的若く、携帯を使いこなしている層なら、文字は小さめにして画面にできるだけ多くの情報が入るように工夫します。逆に携帯サイトを使い慣れていない初心者や、年配の方がターゲットの場合には、文字の大きさを変えずに初期値のままにしておいた方が良いでしょう。

フォントサイズの変化するパターン

フォントサイズを指定したときに、キャリアや機種ごとに変化する度合いが異なる場合があります。現在3段階、5段階、7段階の3パターンが存在します。

3段階表示の機種

• 大：xx-large, x-large
• 中：large, medium
• 小：small, x-small, xx-small

5段階表示の機種

• 大：xx-large, x-large
• 中：large
• 中：medium
• 小：small, x-small
• 極小：xx-small

7段階表示の機種

• 大：xx-large
• 大：x-large
• 中：large
• 中：medium
• 小：small
• 小：x-small
• 極小：xx-small

最も無難なフォントサイズ指定はどれか

現状、最も利用者が多いdocomo端末が全て3段階表示となっています。[xx-small]を使ってしまうと、7段階表示の機種では極端に小さな文字になってしまうので、特に理由がなければ使う必要はないでしょう。

大手サイトでは、ページ全体に[font-size:x-small;]を指定して、フォントサイズを1段階下げるものが主流です。目立たせたい文字に対して[font-size:medium;]を指定して、大きな文字として見せます。

<div style="font-size:x-small;">
	<div>内容を記述</div>

	<div style="font-size:medium;">文字を大きくしたい場合</div>

	<div>内容を記述</div>
</div>

迷った時は、自分の普段使っているサイトの真似をしてしまうのもひとつの手です。

携帯サイトリファレンス