[デザイン] 欧文書体(フォント)についてざっくり整理してみた

1.書体(Typeface)とフォント(Font)の違い

まずこれの違いについて確認します。

ざっくりと言えば、

  • 書体(Typeface): 文字の形の世界観を表す
  • フォント(Font): その文字たちを実際に表示・印字する際のより細かな規則を表す

ということかなと思います。

具体的に言うと、Helvetica や Times New Roman が書体です。
Helvetica Bold 50px や Times New Roman Regular 10px など、
大きさや線の太さなど表示・印字するときに必要な情報まで含めたのがフォントとなります。

他のブログを見ると
現在だとほぼ同義のように使われているため、(書体の専門家でなければ)それぞれ言い換えても全然伝わるでしょう
と言う感じのようですね。

1-1.フォントの語源

上記のように、現在だと「書体」との境界線が曖昧になりつつありますが、
昔ははっきりと使い分けがなされていたようです。

フォントとはその昔「活字印刷する際に利用する活字たちの一揃い」の事を指していたようです。

印刷するときには活字たちを一文字ずつ手作業で並べる必要があったと思いますが、
その際文字の大きさが違っていると、正しいものに入れ替えをする必要があり労力がかかりますね。

印刷する時にフォントを同じものにするには今よりはるかに注意が必要だったと思うので、
きちんと使い分けられていたのだと思います。

2.欧文書体の大まかな分類

分類方法は特に定まったものがなさそうなため、以降の分類は一例として捉えてもらえれば。

欧文書体はまず大きく分けて以下の4つに分けることができそうです。

  1. セリフ体 (ローマン体)
  2. サンセリフ体
  3. スクリプト体
  4. 装飾体

参考: Fonts.com: Type Classifications

3.セリフ体とサンセリフ体の違い

セリフ体とサンセリフ体の違い
  • セリフがあるのがセリフ体
  • セリフがないのがサンセリフ体

セリフ(Serif)とは、文字の端にあるひげのような装飾です。

サンセリフ(Sans-Serif)のサン(Sans)はフランス語で「無い」という意味になります。
ですのでサンセリフはセリフがない書体という意味になります。


では以下、先述の4つの分類について更に細かく分類します。

4.セリフ体(ローマン体)

セリフ体

上述の通り、文字の端にひげのような装飾のある書体です。
和文書体で言うと明朝体に近いです。

4つに分類する場合、例えば以下のような分類ができます。

  1. オールドローマン
    1. 主な特徴: 古めかしい印象。
      ひげが太い。oが傾いている、eの横棒が斜めになりがち など。
      更に2つに細分化する場合は以下のようにもできる。
      1. ヴェネチアン・ローマン
        1. 主な特徴: e の横棒が斜め、oが傾いている、ひげが太い(Bracket Serif) など
        2. (Adobe) Jenson
        3. Centaur
        4. 他にも TrajanITC Berkeley OldstyleBriosoHightowerSchneidlerLutetiaSpira など
      2. オールド・ローマン
        1. 主な特徴: e の横棒が真横、oが少し傾いている、ひげが太い(Bracket Serif) など
        2. (Adobe) Garamond
        3. Caslon
        4. 他にも PalatinoBemboSabonVan DijckGalliardGranjonGoudy Old StyleMinion など
    2. 英語版のWiki: オールド・ローマンの一覧
  2. トランジショナル・ローマン
    1. 主な特徴: オールド・ローマンと以下のモダン・ローマンの中間。
      変遷中という意味でトランジショナル。トラジショナル(伝統的)という単語ではない。
      e の横棒が真横、oが直立、ひげがやや太い(Bracket Serif) など。
    2. Baskerville
    3. Times New Roman
    4. 他にも CenturyFreight TextFournierBookmanPerpetuaGeorgiaPlantin など
    5. 英語版のWiki: トランジショナル・ローマンの一覧
  3. モダン・ローマン
    1. 主な特徴: 都会的で洗練された印象。
      e の横棒が真横、oが直立、ひげがとても細い(Hair Serif) など
    2. Didot
    3. Bodoni
    4. 他にも Walbaum など
    5. 英語版のWiki: モダン・ローマンの一覧
  4. スラブ・セリフ
    1. 主な特徴: エジプシャンとも呼ばれる。
      モダン・ローマンとは逆で、ひげがとても太い(Slab Serif)。
    2. Rockwell
    3. Egyptienne
    4. 他にも ClarendonTrilbyCourierPrestige EliteIonicMemphisBetonSerifa など
    5. 英語版のWiki: スラブ・セリフの一覧

1.ヴェネチアン・ローマン から3.モダン・ローマンに向かって年代が新しくなります。

セリフ体の詳細な解説は以下のサイトたちがとても参考になりそうです。

5.サンセリフ体

サンセリフ体

こちらは文字の端にひげがない書体となります。
和文書体で言うとゴシック体に近いです。

4つに分類する場合、例えば以下のような分類ができます。

  1. グロテスク
    1. 主な特徴: エレガントなセリフ体との対比からグロテスク。ゴシックとも呼ばれる。線の太さが不均一。
    2. Akzidenz Grotesque
    3. Venus
    4. その他にも Franklin GothicDINMmonotype GrotesqueNews Gothic など
    5. 英語版のWiki: グロテスクの一覧
  2. ネオグロテスク
    1. 主な特徴: 線の太さがより均一、没個性的、汎用的
    2. Helvetica
    3. Folio
    4. その他 UniverseApercuRobotoArialAcumin など
    5. 英語版のWiki: ネオグロテスクの一覧
  3. ジオメトリック
    1. 主な特徴: より幾何学的な形。そのため可読性はあまりよくない場合が多い
    2. Futura
    3. Kabel
    4. その他にも Bernhard GothicErbarAvenirGothamAvan Garde GothicBrandon Grotesque など
    5. 英語版のWiki: ジオメトリックの一覧
  4. ヒューマニスト
    1. 主な特徴: セリフ書体の影響が強く、人間的。
    2. Gill Sans
    3. Optima
    4. 他にも FrutigerJohnstonMyriadTahomaTrebuchet MSVerdanaOpen SansSkia など
  5. 英語版のWiki: ヒューマニストの一覧

サンセリフ体の詳細な解説は以下のサイトたちがとても参考になりそうです。

6.スクリプト体

スクリプト体

こちらは手書きに似せたフォントになります。
2つに分類する場合、例えば以下のような分類ができます。

  1. フォーマルスクリプト
    1. 主な特徴: エレガントで風格がある。羽根ペンのような筆跡となる。
    2. Bickham Script
    3. Shelley Script
    4. その他にも Snell ScriptKuenstler ScriptSnell Roundhand など
  2. カジュアルスクリプト
    1. 主な特徴: 親しみやすく格式ばらない形。ペンやブラシで素早く書いたような筆跡となる。
    2. Brush Script
    3. Kaufmann
    4. その他にも ZapfinoMistral など

読みづらくはあるので、地の文で使うことは少なそうで、
表彰状や招待状などエレガントで高級な世界観を表現するときによく使われるようです。

ちなみにとても荘厳な趣のあるブラックレターという書体も、スクリプト体の一部です。

ブラックレター

スクリプト体の詳細な解説は以下のサイトたちがとても参考になりそうです。

7.装飾体

装飾体

看板や見出しなどに使用される、印象的なフォント。
インライン、グランジ、ステンシルなど様々な形態が内包されています。

  1. Ostrich Sans Inline
  2. Astonished
  3. Stencil

などがあります。

多様なため一括りに語れませんが、
インパクトを与えたいキャッチコピーなどに使うのがよさそうです。

可読性はよくないと思うので、通常は本文に使うのは避けた方がいいかもしれません。

8.最後に

ざっくりとまとめてみました。

ロゴやWebのデザインに活かせればと思います!

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。