現時点でのフォントを極める
creation date :13th July,2006
Opentype Font が日本語をクリアに表示する。
- 全てのサイズに適応させるのはまだ時期尚早
- 欧米フォントは太字をうまく使う
- メインサイズの決定がデザインを左右する
- そしてフォントを知る
- 例えばHGゴシック系のフォント
日本語表示の環境がじわじわと変わってきた。まだ「じわじわ」なことを肝に銘じなければならないのだが、現実的な方法としては使い分けを心掛けることだ。
例えば、本文全てをアンチエイリアス(ギザギザをスムーズに補正する技術)で処理されたフォントを指定してしまうと、滲んで見える場合は大変なストレスを感じてしまう。
これには勿論サイズが関係する。大きめのサイズは過去にない出来栄えを披露してくれるので良いのだが、本文の文字はまだまだのような気がする。実はちょっとお先にメイリオを試してみたが、この感想は変わらない。
だから、現状ではフォントサイズによって使い分けることが迫られる。つまり、見出しなどのサイズの大きいテキストにコイツを指定するととてもイイ感じだ。フォントサイズはとにかくメリハリをつけて使うのがコツだろう。
クリアタイプとビスタ(フォント関連の補足)
フォント関連で補足を書きます。Windows XPにはClear type なるフォントの表示をスムーズに変更できる機能が存在している。(更に、マイクロソフトが公開している「PowerToys for Windows XP」というパワーアップ・ツールがあり、その中の「ClearType Tuner PowerToy Download setup.exe」を使うと液晶ディスプレイの最適化表示をチューニングできる。英語表記であるが操作は非常に簡単だ。)
尚、次のWindows VistaではMeiryo(メイリオ)というCrearType用に組まれた日本語のフォントが搭載される。今のところVista専用なのでメイリオだけが普及することはなさそうだが、次第に環境が整ってきたということでしょう。
私のディスプレイではそんなに大差がないし、滲んで見えるテキストの部分が気になったのでこの変更は元に戻したのだが、下の表で見ると欧米フォント(Arial)で顕著なのは11px以下でしょう。あとは全く同じに見える。
Windows XPではClearTypeはデフォルトになっていないし、殆どの人はこのことを知らないだろうが、以上の操作を一段落させれば、これから向かう矛先を見届けることができそうだ。
pixel | font-family |
---|---|
9px | 日本語をフォントで指定する |
10px | 日本語をフォントで指定する |
11px | 日本語をフォントで指定する |
12px | 日本語をフォントで指定する |
13px | 日本語をフォントで指定する |
14px | 日本語をフォントで指定する |
15px | 日本語をフォントで指定する |
16px | 日本語をフォントで指定する |
17px | 日本語をフォントで指定する |
18px | 日本語をフォントで指定する |
19px | 日本語をフォントで指定する |
20px | 日本語をフォントで指定する |
21px | 日本語をフォントで指定する |
22px | 日本語をフォントで指定する |
23px | 日本語をフォントで指定する |

pixel | italic & bold |
---|---|
9px | Default Setting For The Fonts |
10px | Default Setting For The Fonts |
11px | Default Setting For The Fonts |
12px | Default Setting For The Fonts |
13px | Default Setting For The Fonts |
14px | Default Setting For The Fonts |
15px | Default Setting For The Fonts |
16px | Default Setting For The Fonts |
17px | Default Setting For The Fonts |
18px | Default Setting For The Fonts |
19px | Default Setting For The Fonts |
20px | Default Setting For The Fonts |
21px | Default Setting For The Fonts |
22px | Default Setting For The Fonts |
23px | Default Setting For The Fonts |

上の二番目と四番目の表はWindows XPでClear Typeを有効にした場合のキャプチャー画像であり、以下の手順を踏めば実現できる。
- コントロールパネル 〉 画面 〉 デザイン 〉 効果
- 「次の方法でスクリーンフォントの縁を滑らかにする」にチェックを確認する
- 「Clear Type」を選択する
- 「OK」のボタンをクリックして画面のプロパティを閉じる
- コントロールパネルを閉じる
日本語表示に関してはfont-familyでHGPゴシックE、Osaka、MS Pゴシックを指定したので、ご覧になる方の環境によってはこのように表示されないかもしれない。作業している私のPCにはHGPゴシックEのフォントが入っているのでスクリーンショットはこのフォントが表示されている。13px以降はClear Typeを指定しないほうが綺麗である。
別ページでサイズ毎の表示を紹介したArialであるが、ここでは太くしてイタリックにしてある。それだけでこれだけ見栄えが変わるということは面白い。日本語フォントはサードパーティー製品の例えばHGゴシック系(HGゴシックEとかHGPゴシックEなど)が使い勝手が良いようだ。
■文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
■当サイトへのリンクは自由に行えます。