Appleのフォント「Myriad Pro」と「Myriad Pro Web」から読み取るWeb用フォントの秘密。

先日AdobeのCS5をインストールしたら、Macに始めから入っているフォントの「Myriad Pro」の他に「Myriad Pro Web」がインストールされていて「Web? 何か違うの？」と気になりだしたら止まらなかったので調べてみました。

Appleのコーポレートフォントである「Myriad」を解剖していくことでデザインの美しさの秘密に迫ると同時に、Webの冠をつけたフォントはどの様に改良されているのかに迫ってみたいと思います。

まず、始めに「Myriad」とはどんな書体なのでしょうか。Wikipediaで調べてみると…

ミリアド (Myriad) は、サンセリフの欧文書体で、いくつかあるフルティガー体 (Frutiger) 模倣フォントの一つである。アップルやアドビシステムズがコーポレートフォントに採用している

Apple、Adobeと、世界のITを牽引する企業が採用しているという事から、先進的なイメージを与えてくれるフォントだということが分かります。

では「Myriad」と「Myriad Web」は、具体的にどこが違うのか、はじめにアウトラインにしたものを重ねてみました。

可読性を高めるために、カウンターを広げたためか、全体的に横長になっている印象を受けます。

その中でも、特に違いが見られたのが大文字の「N」です。

左の「Myriad」のNは直線的に構成されているのに対して、右の「Myriad Web」は中心部が少し膨張気味になっています。

では、どのくらい違うのか、試しに直線を入れて見ると…。

こうして比較してみると、右の「Myriad Web」の方は斜線部に肉付けがされてることが分かります。

何故でしょうか、その理由に迫るために、スクリーン上で実際に多く表示されるであろうサイズへと徐々に縮小してみたいと思います。

視力検査ではありませんよー。

相対的に見てみると、左の「Myriad」は、だんだんと小さくなるにつれて中心部が少し頼りなさそうな感じになり、1番上のものと比較してみると違った印象が感じられます。
反面、右の「Myriad Web」の方は中心部に肉付けしているために、安定した感じがしますが、大きくなるに従って肉付けしている部分に違和感が感じられます。
あちらを立てればこちらが立たず、どちらも一長一短な感じです。

では、「Web」用のフォントとはどんなものか、まとめてみると…

• 可読性を高めるためにカウンター（ふところ）を広くしている
• 斜線部分は安定感を出すために少し肉付けがされている
• 小さく表示された場合のデザインを優先している

ということになります。「Web用＝スクリーン用」で表示される文字は比較的小さめに表示される事が多いため、それらを前提に視覚的な調整をおこなっているということでしょう。

電子書籍などが普及していき、スクリーン上で文字を読む機会が増えていく中で、デザイナーとして可読性の高いバランスのとれたデザインをするために、見出しには「見出し用のフォント」と使い分けてきたように、スクリーン上でも状況に応じてWeb用のフォントを使い分けなければいけないということを、より強く意識していかなければならないということになります。

うーん。小さな変化でも見た目の印象はガラリと変わる、「神は細部に宿る」ですね。

Tweet