« 「紙本から電子本へ」メディア革命は一気に進む! | トップページ | 「Google日本語入力」はかなりいい。 »

「メイリオ」をウェブ制作に生かすには?

「メイリオ」(Meiryo)は和文・欧文をディスプレイ上で美しく調和して表示することができる。WinVistaから標準フォントになって、やっとMac並になった。

しかし、ブラウザのIEは7でも8でも初期設定は「MS-Pゴシック」のままだ。
ほとんどのユーザーは設定を変えるようなことはしない(できない?)ので、
VISTAや7でもあいかわらず、ギザギザの「MS-Pゴシック」の表示される。

ウェブサイトの提供者として、メイリオにどのように対応したらいいのだろうか?
という問題を考えてみた。

まず、ウェブサイト制作にあたり以下を前提とする。
①ほとんどのユーザーが初期設定のままで使っている。変更を強いることはできない。
②OSはXPユーザーが7割、VISTA・7ユーザーが2割とし、こちらを重点に考え
 その他1割の方には多少がまんしてもらう。
③使われているブラウザはIE6、7,8が9割で、こちらを重点に考える。
 その他は1割の方には多少がまんしてもらう。

試行錯誤は割愛し、私のとりあえずの結論だけ以下に述べます。
まず、以下の画像をみてほしい。

▼フォント:MSゴシック・大きさ:標準・行間:120%
Msglh120

▼フォント:MSPゴシック・大きさ:標準・行間:120%
Mspglh120

▼フォント:メイリオ・大きさ:標準・行間:120%
Meiriolh120

まず、現在ネットで標準で表示されている3つのフォントを比較してみよう。
①MSゴシックは等幅フォントで、字体が細く、字間が広くて散漫な印象になる。
②MSPゴシックはプロポーショナルフォントで、字体は細いが、字間が詰まって読みにくい。(標準(12ポイント程度)では字間を1ポイントほど広げたいところだ。)
③最新のメイリオは、ディスプレイ上での読みやすさを考えたフォントだけあって
 可読性は一番よい。

次に、行間の比較である。
①MSゴシック、MSPゴシックともに行間を指定しないと、行間0になる。これでは
 かなり詰まってしまい、可読性がかなり悪い。行間120%でかなりよくなる。
②メイリオは、初期設定のままでも行間が広い。(行間120%程度)これで、
 行間指定をしたらどうなるのだろうか?と心配したが、行間120%でも変化なし。

結論として、以下のようにスタイルシートで指定すれば、
大抵のOSとブラウザで問題が少なく、可読性よく表示できるだろう。
●フォントは、第一を「メイリオ」、第二を「MSPゴシック」に指定する。こうすれば、
メイリオよりもPゴシックのほうが字体が狭いので、メイリオでのレイアウトが大きく崩れることはない。(改行されてレイアウトが崩れることがほとんど)
●行間を120%で指定する。これで、メイリオでもMSPゴシックでもほとんど同じ高さになる。MSPゴシックでも読みやすく、フォントの違いによるレイアウトの崩れも最小限に抑えられる。

ご参考に:ウインドウXP上で「メイリオ」フォントを使う

|

« 「紙本から電子本へ」メディア革命は一気に進む! | トップページ | 「Google日本語入力」はかなりいい。 »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/16060/48066522

この記事へのトラックバック一覧です: 「メイリオ」をウェブ制作に生かすには?:

« 「紙本から電子本へ」メディア革命は一気に進む! | トップページ | 「Google日本語入力」はかなりいい。 »