ブロックチェーン・AI・システム開発の株式会社INDETAIL

フォントを語る上で知っておきたい基礎知識10

2017.01.27
F-man

はじめまして! F-man です。

BLOG初投稿となる今回テーマは、デザイン制作をする上で非常に重要な要素となるフォント。デザイナーはもちろん、ディレクターやプランナーなど非デザイナーの方でも知っておくと役に立つフォントの基礎知識10選を紹介します。

1. 明朝体とゴシック体

和文(日本語)の書体は、大きく分けて明朝体とゴシック体の2種に分類されます。明朝体は縦線に比べて横線が細く、横線の右端や曲がり角の右上に「山」がある書体です。ゴシック体は基本的に線の太さは一定で、「山」のない書体です。

2. セリフとサンセリフ

欧文(アルファベット)の書体も、和文が明朝体とゴシック体に分かれるのと同じように「セリフ(serif)」「サンセリフ(sans-serif)」に分類されます。

セリフは、字体の曲がり角にある飾り(うろこ)を示す言葉で、セリフのある書体がセリフ体となります。サンセリフは「セリフ」がない書体です。「sans-(サン)」とはフランス語で「無い」という意味となり「セリフが無い」の直訳ですね。

なお、Webページでは標準フォントとして「sans-serif」が設定されていることが多いです。なぜなら和文のゴシック体のように、小さな文字でも可読性が高いためです。

3. 等幅フォントとプロポーショナルフォント

等幅(とうはば)フォントは1文字1文字が全て同じ幅になっているフォントです。プロポーショナルフォントは1文字づつ適正な幅が設定してあるフォントです。

和文フォントでは、フォント名に「P」がついているものは、ほとんどの場合プロポーショナルフォントを意味しています。例えば「MS Pゴシック」の「P」です。

印刷やWebでの表示に使う場合は、基本的には文字の特性を考慮した「プロポーショナルフォント」の方が読みやすいと言えます。

しかし、MacのターミナルやWindowsのコマンドプロンプトなどプログラム言語の表示は「等幅フォント」に設定しないと非常に読みづらくなる場合もあり、どちらを選択するかはケースバイケースとなります。

4. フォントファミリー

大抵どのフォントも太さ(bold, thin)や傾き(Italic, oblique)、細さ(Condensed, Extended)など複数のバリエーションが用意されています。ベースとなるフォントとそのバリエーション全てをまとめたグループが「フォントファミリー」です。一つのコンテンツ内で複数のフォントを使用する際に、同一のフォントファミリーで統一すると、綺麗にまとまった形となります。

※Avenir(アヴニール)はフランス語で「未来」という意味。

ちなみに、CSSのプロパティにもfont-family(フォントファミリー)がありますが、こちらは使用するフォントの優先順位を設定するもので、このフォントファミリーとは別物です。

5. オブリーク体とイタリック体の違い(oblique/italic)

いきなりですが、この2つの違いわかりますでしょうか?

2つともHelveticaを文字を斜めに傾けた書体ですが、オブリーク体の方は「O」や「D」の文字に違和感(バランスの悪さ)を感じると思います。パタンと倒れてしまいそうな落ち着きの無さ。オブリークはベースフォントを機械的に傾けただけのフォントとなり、傾けた際のバランスの悪さなどを丁寧に微調整したのがイタリック体となります。

イタリック体の方がフォントとして洗練されてますねっ

6. スクリプト書体

全体的に滑らかな曲線で描かれた、手書きのような欧文書体の総称です。筆記体と呼ばれることもあります。

装飾的で独特な表情を演出できる書体ですが、Webテキストや文章としては読みにくいデメリットもあります。タイトル文字やアクセントとして使用すると効果的です。

7. 従属欧文と合成フォント

「従属欧文(じゅうぞくおうぶん)」とは和文フォントに含まれている欧文フォントのこと。従属欧文も昔に比べてかなり洗練されてきてはいますが、やはりアルファベットは欧文書体の方が美しく視認性も高いと言われています。個人的な印象ですが、新ゴのアルファベットは特に読みにくい。。。

「合成フォント」とは、複数の書体を組み合わせたフォントのこと。デザイン制作においては、和文フォントと欧文フォントのそれぞれの特性を活かすために、両者のフォントを織り交ぜた「合成フォント」を使用するケースも多々あります。

合成フォントの作成において、単語ごとにフォントを変更するのは非常に大変なため、Adobe製品の「InDesign」「Illustrator」に実装されてある「合成フォント機能」を利用するのが便利です。今のところ「Photoshop」には未実装です[2017年1月現在]。

※複数のフォントを組み合わせることを「混植(こんしょく)」とも言います。

8. 1階建て、2階建て

アルファベットの「a」と「g」には1階建て、2階建ての2種類が存在します。

そう言われてみれば!と再認識される人もいるのではないでしょうか。両者に意味の違いはないですが、タイトル字として使う場合はちょっと意識してみてはいかがでしょうか?

9. OpenTypeフォント

AdobeとMicrosoftが共同開発したフォントのフォーマットのひとつ。現在のデータフォントはほぼOpenTypeフォントです。

【OpenTypeの特徴】
・ MacとWindowsの両プラットフォームで同一の表示が可能
・ 最大約65,000文字が登録可能
・ アプリケーションなどによって文字の位置や並びが一定にならない問題を解決

OpenType以前は「PostScript Type(Adobe社)」、「TrueType(Apple社とMicrosoft社)」の2種が主な形式でしたが、OpenTypeはTrueTypeをベースにし、両者の利点を取り入れたフォーマットです。

10. 約物(やくもの)

句読点、鍵カッコなどの記号類の総称。

実はこの「約物」、DTPデザイナー(主に書籍系)の鬼門でして。。。約物は禁則文字(行頭においてはいけないなどの制限)として処理される場合が多いなど、「約物」をどう扱うかはデザイナーにとって非常に頭を悩ますところです。

DTPで使用するAdobe製品に InDesign, Illustrator の2種が有名ですが、約物の取り扱いに優れているのは、圧倒的にInDesignです。一度設定すれば自動でいい感じに処理してくれる機能が充実しているってわけですね。

ただ、Illustratorの方が図形を作成するには優れています。グラフィックデザインはIllustratorで、文字組みはInDesignで作業するのが理想です。

あとがき

フォント関連の基礎用語を10個あげましたが、当然これら以外にもまだまだありますし、これら一つ一つで1記事にすべき深い内容があります。いずれ機会があれば掘り下げた内容を紹介させてもらいたいと思ってます。

まずは、フォントの全体像を把握していただくために基礎知識をサラーっと強引にまとめさせていただきました。

《参考文献》
『+DESIGNING 実践文字組講座』 マイナビムック
『TYPOGRAPHY 03, 06, 08』 グラフィック社

関連タグ:

F-man

デザイナー。好きなことは人から薦められた漫画を読むこと。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。