Webフォント普及の前に、素人でも知っておきたいフォントの基本

心得其の296

勝手にランキング

元日は親戚づきあいもあり、始終酔っぱらっているのですが、翌2日の恒例行事が年賀状の査定です。査定するのは文面やデザインではありません。プリンタによる印刷宛名です。ちなみに手書きはすべて「合格」。私に手書き文字の美醜を語る資格がないのは以前述べた理由からです。

住所と名前のバランスをみます。採点基準をここで晒すと、いろいろと支障がでるので割愛しますが、神は細部に宿るというように、「様」を名前よりひとまわり小さくするといった「工夫」は加点対象です。それがもっとも表れるのが「フォント」です。書体のチョイスに性格とセンスが表れます。ただ、最近は「楷書体」が増えたので面白味もなくなりました。かつては行書や草書、さらにはPOP体で送ってきたのはかつての勤務先の上司です。

というわけで今回は「フォント」の話。

宛名にあう書体

Webブラウザは通常、閲覧するパソコンにインストールされている「フォント」を呼び出して文字を表示しています。しかしいま、インターネット業界ではCSS3から本格投入された「font-face（フォントを指定するためのスタイル）」によって、Webサーバーにアップしたフォントファイルが利用可能になり、今後はWeb上で自在にフォントが指定できるようになるのではないかと期待されています。

普及が進むには、フォントのライセンスの問題や、読み込みにかかるサーバーの負荷など、解決しなければならない問題が残されていますが、実際に普及した後の問題を私は懸念します。それが先の「POP体の宛名」です。

宛名には敬意を込めます。これをPOP（ポップ）に飾るなど部下に宛てたものでも本来は論外。パソコンというツールによって「面白い形の文字」を手にした興奮からの勇み足ですが、さまざまなフォントを気軽に使えるようになったときに、求められるシーンに適さないフォントを使う「Web担」が現れる……かもしれません。

フォントの大原則

そもそもフォントは使いすぎると与える印象が散漫となります。フォントとは文字をデザインしたもので、それぞれに個性があるからです。フォントの多用をマンガでいえば「スラムダンク」の井上雄彦と、「ドラえもん」の藤子・F・不二夫、そして漫☆画太郎のキャラクターが同じページに混在しているようなものです。

特にPOP体のような、躍動するフォントの多用は厳禁で、画面が「うるさく」なってしまいます。素人が「ワード」で作ったチラシが野暮ったいのは、フォントの多用によってフォントを見せるためのデザインという本末転倒に陥るからです。

1つのコンテンツで使用するフォントは2～3種類に絞り込むのが基本です。

基本的な使い分け

コンテンツにおいてフォントが果たす役割は「見出し」と「文章」に分けられます。それぞれのスタンダードな割り当ては、見出しはゴシック体系、文章は明朝体系です。DTPの経験者なら当たり前に過ぎることなので、だからこそ本稿の趣旨にあうと臆面もなく記します。

WebにおいてはWindows以降、「MSゴシック」がデファクトスタンダードとなり、本文にゴシック体を使うことに違和感を覚える人は減りました。しかし「本文は明朝」はDTPにおいてはいまでも基本で、それは可読性によります。

明朝体はながらく活字用の文字として改良されてきました。新聞、雑誌、書籍などで使われるフォントは、それぞれ会社によって微妙に異なりますが、大きな括りとして本文は「明朝体」です。特に新聞に顕著で、リードも含めた本文は明朝体で、見出しは縦書き横書きを問わずにゴシック系を採用しています。

Webでも有効な使い分け

そしてこの基本はWebでも有効だと「TypeSquare」を利用して確信に至ります。TypeSquareとは日本語フォントの雄「モリサワ」が提供するクラウドフォントサービスで、出版・DTP業界ではお馴染みの「新ゴ」や「リュウミン」といった「モリサワフォント」をWebで再現するものです。今年の末（2013年12月31日）までは無料キャンペーン中で、好きなフォントを自由に利用できます。これを自分の「ブログ」で試します。見出しは「新ゴ」にして、本文を「リュウミン」にします。

……圧倒的に可読性が高まることに驚きました。活字好きというのもあるのでしょうが、あらためてフォントの力を見せつけられた思いです。見出しの新ゴは当たり前すぎると、いまは気分で変えて遊んでいますが、それができるのもフォントを選べるCSS3の魅力といえます。

昭和の基本

1つのコンテンツで使うフォントは2～3に絞り込むのがベストとしましたが「（フォント）ファミリー」は例外です。「TypeSquare」のゴシック体の新ゴには、「ウルトラ（U）」という超極太から、「エクストラライト（EL）」という超極細までの8つの線の太さ（ウエイト）によるバリエーション（JIS2004は重複として除いています）があり、これらをまとめて「ファミリー」と呼びます。

互いに印象を邪魔することがないので、ファミリーをつかって表現力を高めることができます。たとえば、見出しタグの1～5の表現を、それぞれを同じフォントファミリーの「太さ」で変えるといったようにです。もちろんこれはDTPにも通じます。

最後にフォントに関する「昭和の教え」を1つ。かつてチラシの「金額（数字）」は「ゴシック」で揃えました。文字の粒が揃い、各線が均一であることから、数字を認識しやすいからです。価格の誤解はもっともトラブルに発展しやすく、かつては常識とされたものです。いまはPOP体なども使われますが、基本的に線の太いフォントを使うのは「昭和の教え」に沿ったものでしょう。

Webにおいて、フォントは粗雑に扱われてきました。しかし、CSS3によってフォントの表現力が、コンテンツのクオリティを左右する時代がやってくるかもしれません。ちなみに今年の年賀状宛名ランキングの1位は、某デザイン事務所から届いた総ゴシック体の宛名でした。デザイン事務所にあるまじき、実直さだけが目につく直線だけで構成された文字の配列に性格がにじみ出ます。