ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ スムーズなフォントを極める ]

現時点でのフォントを極める

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など)が使い勝手が良いようだ。


ページのトップへ


文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
当サイトへのリンクは自由に行えます。