なぜメイリオは上にズレて表示されるのか?

Windowsで標準で収録されているフォントはあまたありますが、
中でも良く使われるのはメイリオでしょう。
しかしながら、WEBデザインにおいてメイリオを使うと色々と不都合が生まれます。
ここではメイリオフォントの不都合の理由について解説します。

そもそもメイリオとは?

メイリオ(Meiryo)は、MicrosoftがWindows用に開発した日本語フォントで、クリアな読みやすさとデザイン性を重視しています。しかし、このフォントを使うと、他のフォントと比べてテキストが上にズレて表示されるという現象がよく見られます。この問題の原因と対策について、以下にまとめます。

ベースラインの違い

フォントのベースラインとは、文字が配置される基準となる線のことです。メイリオは、他のフォントよりもベースラインがわずかに上に設定されているため、文字全体が上に配置されて見えます。これにより、他のフォントと混在させた場合、メイリオだけが上にズレているように見える現象が発生します。

フォントデザインの特性

メイリオは、主にスクリーン表示を目的として開発されたフォントです。Windowsの画面上で滑らかに表示されるように、特にClearTypeテクノロジーに最適化されています。このため、デジタルディスプレイでの視認性が高くなるようにデザインされており、フォント全体が少し上に配置される傾向があります。このデザイン特性によって、他のフォントと比べてテキストが上にズレて見えることがあるのです。

行間の設定

メイリオは、行間を多めに設定することで、縦書きや横書きの日本語テキストが読みやすくなるように設計されています。この余白の取り方が、他のフォントと異なるため、同じテキストサイズでもズレが生じやすくなります。特に他のプロポーショナルフォントと比較すると、メイリオは行間が広めに取られていることが原因です。

まとめ

メイリオフォントが上にズレて表示される原因は、フォントのデザインや技術的特性にあります。メイリオはスクリーン上での視認性を高めるために、ClearTypeに最適化されており、他のフォントと比較すると行間が広めでベースラインが高く設定されているため、文字が上にズレて見えることがあります。また、ヒンティングと呼ばれる技術も影響し、小さいサイズでも文字が滑らかに表示されるように調整されているため、環境によってはズレが目立つことがあります。

関連記事:かっこいい!WEBデザインに使えるAdobe Fonts5選

トラックバックURL