望ましい文字サイズの指定方法とは

文字のサイズを変更する場合、「x-small」「12pt」というような絶対サイズ指定で文字の大きさを調整していませんか？この方法では、ユーザー側で文字サイズを変更できないため、必ずしも望しい方法とは言えません。

では、どのような指定方法が望ましいのでしょうか？
今回は、「望ましい文字サイズの指定方法」について説明します。


まず、文字サイズを指定するには、font-size というプロパティを使用します。

＜スタイルシートの記述例＞

.content p { font-size: x-small; }

文字サイズの指定方法は、「x-small」というようなキーワードで指定したり、「12pt」というような数値+単位で指定することができます。
この「x-small」という記述を変更することで、文字サイズを変更することができます。


文字サイズの指定方法には、いくつか方法がありますので、それぞれの指定方法について説明します。

■ 7段階のキーワードで指定
下記のような、7段階に分けたキーワードで指定する方法です。

< 表示例 >

xx-small x-small small medium large x-large xx-large

MTの初期設定でも、この指定方法が使われていますが、7段階でしかサイズを変更できないため、微調整したい場合には適していません。

また、文字サイズの解釈がブラウザによって異なる場合があります。例えば、IEとNetscapeでは、同じ、x-small を指定していても、文字の大きさが違うように見えます。

■ smaller , largerで指定
親要素の文字サイズに対して、「1段階小さい文字サイズ」、「1段階大きい文字サイズ」にする指定方法です。

< 表示例 >

smaller 指定なし larger

便利な指定方法ですが、上記と同様、微調整したい場合には適していません。例えば、「0.5段階分小さくしたい」と思っても無理です＾＾

■ 数値 + 単位
数値に単位を付けて文字サイズを指定する方法です。
単位には px、ex、in、cm、mm、pt、pc などがあります。

< 表示例 >

8px 9px 10px 11px 12px 13px 14px 8pt 9pt 10pt 11pt 12pt 13pt 14pt

文字サイズの指定にptやpxなどの単位を使用すると、ブラウザの種類や設定によっては、ユーザー側で文字の大きさを変更できなくなる場合があります。ですので、ユーザビリティ・アクセシビリティ上、あまり望ましいとは言えません。

■ ％値（相対指定）
親要素の文字サイズに対する割合で指定する方法です。

< 表示例 >

85% 90% 95% 100% 105% 110% 115%

上記のように「%」を使った割合の指定では、「元の文字サイズ」を「100％」とした相対サイズを指定できます。
x-small や x-large などの指定方法よりも、はるかに細かなサイズ指定が可能です。

■ em値（相対指定）
上記の「% 値」と同じような方法として、単位 em を使った文字サイズの指定方法もあります

< 表示例 >

0.8em 0.9em 1em 1.1em 1.2em

「1em」とは「1文字分」の意味です。例えば、「1.2em」と指定すれば「1.2文字分の大きさ」で表示されます。これは、「120%」と指定した場合と同じです。

これらの指定方法は「相対指定」ですので、ブラウザの文字サイズ設定を変更すれば、それに合わせて表示サイズも拡大・縮小されます。ユーザビリティ上も問題ありません。


ですので、文字サイズの指定を行う場合は、できるだけ em や ％ などの相対的な単位を使用し、必要に応じて文字のサイズを変更できるようにしておく方が望ましいですね。

ただし、ユーザー側で文字サイズを変更すると、レイアウトが崩れてしまう場合などは、文字サイズの変更をできなくするために、フォントサイズの指定に pt や px などの単位を使用するということもあります。


絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。

絶対サイズ	意味
in	インチ。1in = 25.4mm
cm	センチメートル
mm	ミリメートル
pt	ポイント。1pt = 1/72in
pc	パイカ。1pc = 12pt
px	ピクセル。表示上の1ドット幅 （※正確にはデバイス依存の相対サイズ）

相対サイズ	意味
em	基準書体の文字の高さ （英字の「M」の高さを基準とした大きさ）
ex	基準書体の文字の高さ （英字の「x」の高さを基準とした大きさ）
%	基準書体のサイズに対する百分率

それでは、文字サイズを変更するカスタマイズ方法について、ブログ別に説明します。カスタマイズする場合は、利用しているブログを選択してくださいね。

[MovableType]	→ 文字サイズの変更（MT3.2編） → 文字サイズの変更（MT3.17編）
[livdoor Blog]	→ 文字サイズの変更（livedoorBlog編）
[FC2 ブログ]	→ 文字サイズの変更（FC2ブログ編）

以上、望ましい文字サイズの指定方法について説明しました。
是非、参考にして、ユーザーアビリティを考慮した文字サイズにカスタマイズしてください。

[次の講義へ] → ブラウザで読みやすいフォントとは

参考になりましたら、1クリックの応援お願いします。