WEBCRE8.jpウェブクリ8.jp

webデザイナーによる、デザインとwebを楽しむ情報ブログ

調べる。

備忘録としてwebやデザインについて調べたり
新しく知ったことなどを書き残していくカテゴリです。

[フォント]文字デザインの分類(欧文編)

この記事は約18分ぐらいで読めます

Akzidenz-GroteskとHelvetica
フォントってたくさんありますけど、それらにはある程度の共通点や系統があります。一つの軸では語れない分類を一度整理してみようと思います。

フォントの種類ってめっちゃめちゃありますよね。こんなもん当然一つ一つ覚えてられません!

ですが、フォントの種類がそれぞれどのように成り立ち、どんな目的があって作られてきたのかが分かれば、新しく知るフォントも体系立てて覚えることが出来るのではないでしょうか。そして、覚えることより、フォントを相応しい場所で使う、またはどこまで考える必要があるのか…それを判断する事が出来るようになるのだと思います。

というわけで、フォントがどのように分類されるのかザーッとまとめてみます。

フォントの時代、様式に関する分類

フォント、書体というものは文化とともに作られ、必要とされて生まれてきています。

…この章は一応必要だから書きますけど、調べているうちにほぼこの記事で完結しているというレベルの記事を見つけてしまったので、さらっと触れるに留めます(って思ってましたけど結局長いです)。

書体の分類 書体の世界

ブラックレター

名前の由来は、この文字で書かれたものは紙がほとんど真っ黒になるから。中世ファンタジーとか好きな人にウケのいい文字ですw

思い返してみると私が中学生の頃、書体の中では真っ先に書くのを練習した文字ですね。ちょっと特定のフォントが浮かばないのでイメージに一番近くスタンダードっぽい見た目のFette Gotischを挙げておきます。

Fette Gotisch

Fette Gotisch

この種類は海の向こうではこれの事をゴシック体とも言います。実際、ゴシックという言葉で思い浮かぶ美術のイメージにはこのブラックレターが似合っていると感じますね。

日本ではゴシック体という言葉がサンセリフ書体を表すようになってしまったので、混同を避ける為にブラックレターという言い方のほうが使われているのではないかと思います。

時期的にも12世紀からあり、実際に使う場合も中世的なアンティークの銘であったり、古めかしく伝統を感じさせるような表現に向いているでしょう。デスノートのLのマークはこんな感じでしたね!w

Fette Gotisch – Fonts.com

セリフ

セリフ(ヒゲ)のついた書体のことです。当然色んな種類のものがあり作り出す雰囲気も様々ですが、ここではスタンダードなものを代表として挙げます。Times New RomanBodoniなどです。

Times New RomanとBodoni

Times New RomanとBodoni

セリフはサンセリフが生まれるまでは文字につくのが当然だったパーツです。ローマン体という言い方もします(特徴から付いた分類か成り立ちから付いた分類かの違いでしょう)。更に生まれた時期によってオールド・フェイス、モダン・フェイス、トランジショナルといった分類がされています。

文字にフォーマルな雰囲気を持たせますが、セリフの形によってやはり色んな表情を持っています。

Times New Roman® Regular – desktop font – Fonts.com
Bodoni Roman – desktop font – Fonts.com

スクリプト

スクリプト書体とは筆記体のフォント全般を指します。有名なのはZapfino、私はChopin Scriptというフリーフォントが好きです。

ZapfinoとChopin Script

ZapfinoとChopin Script

主にスクリプトという時はカリグラフィーペンで書いたような綺麗な書体のことを指していることが多いと思います。ペンで書いたような比較的新しいスクリプトは雰囲気も大きく違うので、ちょっと紹介を分けました。

こちらも非常に様式的というか、雰囲気を出すために使われている場合が多いと思います。可読性は少なくとも日本人にとっては低いですしね…。

Zapfino Extra Family Pack – desktop font – Fonts.com
Chopin Script Font | dafont.com

サンセリフ

セリフのない書体です。これまで文字というものはほぼ例外なくセリフがついていたのに対し、Akzidenz-GroteskFuturaといったフォントにはセリフがありません。

Akzidenz-GroteskとFutura

Akzidenz-GroteskとFutura

これらサンセリフは欧米ではグロテスクとも呼ばれます。日本ではサンセリフをゴシックと呼びますが、様式としての表現はこのグロテスクという呼称が妥当かと思われます。

これもひとくくりにするには種類が多いので後述しますが、全体的にセリフの付いたフォントよりモダンな雰囲気を持ちます

Akzidenz-Grotesk® – Fonts.com
Futura® – Fonts.com

ハンドライト

言葉の通り手書き感のあるフォントです。Comic SansITC Bradley Handなどがそれにあたります。ペンで書いたようなスクリプト体も、言ってしまえば手書きフォントですし、他の手書きフォントに近い雰囲気を出します。

Comic SansとITC Bradley Hand

Comic SansとITC Bradley Hand

きっちりとしたスクリプトと違い、極めてカジュアルでラフな雰囲気を作ります。特に紙を思わせるアナログな表現に向いていますね。

ITC Bradley Hand™ – Fonts.com
Comic Sans® – Fonts.com

ディスプレイ

ひとくくりには出来ないバリエーションを表す分類で、分類というよりその他と言ったほうがいいかもしれません。デザイン書体と言われたりもします。私がパッと思い浮かぶのはCooper StdRosewood Stdなどですかね。

Cooper StdとRosewood Std

Cooper StdとRosewood Std

表したいシチュエーションや雰囲気によってデザインも大きく変わり、使われる局面も限られるため、それぞれのフォントが特に有名になったりはしにくいですね。フリーフォントで様々なフォントが作られています。何か一つの用途のためのみに作られたフォントは極めてコンセプチュアルです。

Cooper Black™ – Fonts.com
Rosewood® – Fonts.com

フォントのセリフに関する分類

セリフについては更に細かい分類が存在するので章を分けて解説します。

ブラケット・セリフ

CaslonとGaramond

CaslonとGaramond

セリフとセリフの間になめらかな曲線のついたセリフで、オールド・フェイスなどと呼ばれるフォントに多く見られます。CaslonGaramond等は古くからあるセリフフォントですし、実際伝統のある印象を与えやすいです。

Adobe Caslon™ – Fonts.com
Monotype Garamond – Fonts.com

ヘアライン・セリフ

DidotとBodoni

DidotとBodoni

セリフが細く、主線に対してまっすぐになっているセリフです。モダン・フェイスとも呼ばれ、DidotBodoniなどはそれにあたります。

Bodoniに関しては@sivacchiさんのかわいいんだけど、芯は強いの。Bodoni #LOVEFONTという記事が未だに記憶に新しいです。

モダンと言われる通り、ブラケット・セリフより少し近代的なニュアンスを持ちます

Didot – Fonts.com
Bodoni – Fonts.com

スラブ・セリフ

RockwellとAmerican Typewriter

RockwellとAmerican Typewriter

セリフが主線とほぼ同じ太さを持っています。RockwellAmerican Typewriterなどが浮かびます。

こちらはこれまでのセリフよりもセリフの印象が強くなります。セリフがセリフに見えないため多少可読性は落ち、使いづらくなりますが、見出しに映えます

Stocker.jpではこのRockwellによく似たChunkFiveというフリーフォントを使っているのだと思います(違ったら教えてくださいw)。太いとどっしりとしていて欧米的な感じがしますね!

Rockwell® – Fonts.com
ITC American Typewriter™ – Fonts.com

タイニー・セリフ

Copperplate Gothic

Copperplate Gothic

小さなセリフです。私の愛するフォント、Copperplate Gothicがこれにあたります。すでにゴージャスで美味しいフォント「Copperplate Gothic」 #LOVEFONTで記事にしています。小さいのに、これがあるのとないのとでは大違いなんですよ…!

例えば実際にこのフォントのほとんどセリフがないだけバージョンであるSackers Gothicというフォントがありますが、よく似ているのにこのフォントにはCopperplate Gothicの持つゴージャスさがありません。飲食店のロゴによく使われるのは共通してますけどw

Copperplate Gothic – Fonts.com

フォントのサンセリフに関する分類

次にサンセリフの細分化です。

グロテスク

Akzidenz-GroteskとHelvetica

Akzidenz-GroteskとHelvetica

サンセリフの発祥のフォントデザインです。Akzidenz-Groteskはサンセリフの極めて初期のフォントです。さすがに野暮ったい印象も受けますが…スタンダードな形状は落ち着きを感じさせますね。

また、グロテスクからヒューマニストへの変化の途中である時期のものをネオ・グロテスク、またはトランジショナルと言います。Helvetica等がここに分類されます。

グロテスクとネオの体系的な特徴の差は、私はまだはっきりわかっていないので一緒に分類していますが、誰かアドバイスもらえると嬉しいですw

Helvetica® – Fonts.com

ヒューマニスト

OptimaとFrutiger

OptimaとFrutiger

グロテスクの直線のラインがキレイな直線で線幅も常に同じだったものから、太さに変化をつけたり変わった形状を持たせた人間味のある形状、それがヒューマニストです。OptimaFrutigerなどですね。

特にOptimaはサンセリフでありながらセリフの上品さも持ち合わせている美しいフォントです。好きです、Optima。

Optima® – Fonts.com
Frutiger® – Fonts.com

ジオメトリック

GothamとCode

GothamとCode

CBCNET : TOPIC » 米大統領選挙と映画タイトルでよく使われるフォントのお話

サンセリフの中では一番好きなカテゴリーです。幾何学図形を元にした形状を持ち、フォントの中でも極めて近代的、未来的な形状を持っています。前述のFuturaGotham、フリーフォントのCodeなどがこれに分類されます。

ヒューマニスト・サンセリフが人間的な感覚で作られたフォルムであるのに対してジオメトリック・サンセリフは計算された数学的な形状を持っている…と私も思っていたのですが、実際のところ完全に幾何学図形で構成すると人間の目の錯覚で結果的に幾何学的に見えなかったり歪に見えてしまうため、若干ですが人の目に対応したフォルムをしているそうです。

恥ずかしながら私はこれは最近まで知らず、先日お会いした([クリエイター]英Monotype社の書体デザイナー大曲都市さんに会いにいってきましたを参照のこと)都市さんの記事、» 佐藤可士和氏のGU新ロゴ Toshi Omagariにより主題とは別の所で勉強させてもらいました。

実はWEBCRE8.jpのロゴは自作で幾何学図形のフォントに挑戦したものなんですが…通りで何度やってもぱっとしなかったはずです(涙)。リニューアル時にもう一度挑む予定ですが、その時は無理にこだわらず、体感の形状を基準に作ってみたいと思います…。

Gotham | Hoefler & Frere-Jones
Code Font | dafont.com

フォントのスタイルに関する分類

ここからは、フォントのスタイルについての分類です。

フォントのスタイル、ファミリーのパターン

フォントのスタイル、ファミリーのパターン

通常フォントは何種類かのスタイルをフォント・ファミリーとして持っています。また、仮に持っていなくてもデザインソフトは無理やり斜体にしたり太字にすることである程度のバリエーションが持たせられるわけです。

ローマン

通常の立体と呼ばれる真っ直ぐなスタイルのことをこう呼びます。フォントの名前のMedium、Regular、Stdといった言葉が付いているのもそうです。

ボールド

太字のスタイルです。通常は太字にするにあたって、ちゃんと太字にあったデザインが施されていますが、デザインソフトの太字は場合によって用いますね。

反対に細いものもありますのでまとめて挙げると、細い順にUltra Light、Light、Thin、Medium、Semi Bold、Bold、Extra Bold、Heavy、Black…などのような太さの種類をファミリーで持っていたりします。

当然インパクトを強めたいときに太字にするわけですが、見た目の変化をつけるためにより細いフォントが必要になることもあります。

イタリック

斜体です。これも単に立体の文字を斜めにしただけのObliqueと、ちゃんと斜体用のデザインを施したItalicとがあります。デザインソフトの斜体ボタンやCSSにおけるイタリックは、あくまでオブリークに過ぎません。

ナナメウエのすずきさん(@suzukisan__)さんががこれについては記事を書いているので参考にするといいと思います。

ObliqueとItalicって結局なにが違うの?ってお話 | ナナメウエblog

デザイン上、他のテキストと区別したいときや、斜めにしたことによって生まれる疾走感などを取り入れたいときに使います。

コンデンスド

ぎゅっと横に詰めて、縦に伸びたようになっている長体です。文字を組むときに横幅が小さい場合などに、キレイに並べることができますね。使いドコロが難しいとは思いますが…。

エクスパンデッド

エクステンデッドとも言います。今度は横に長いスタイルです。日本語ではなんて言えばいいんでしょうか…。文字数が足りないときなどにカーニングと一緒にいじったりします。私はそもそも横に広い書体が結構好きなので、わざわざ横に伸びたバージョンを使おうとはあまり思いませんが…。

ラウンデッド

角丸です。都市さんの話によると今欧米では角丸フォントが流行っているらしく、もしかしたらこれから頻繁に目にするかも知れませんね。角丸が与える印象については[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析したで猛烈に長く語っていますが、文字にも近いことが言えると思います。

分類を知ることの意義

さて、実際のデザインにおいてこれらを知ることに一体どんな意義があるんでしょうか。もちろん知識として歴史を知ることには意味がありますが、そうではなくもっとデザインにおける意義としてです。

全容の把握

例えばもしあなたがこれから食べる食事にもっとも合ったお酒を選ぶとします。そのときにあなたがビールと日本酒しか飲んだことがなかった場合、その二つから選ばざるを得ないでしょう。

ですがあなたが他にもカクテル、ワイン、ウィスキーを嗜んでいたとしたら、仮に結局最初の選択肢にあったビールを選ぶことになったとしても、より妥当なものを選んでいる可能性が高いはずです。

これは、ビールやワインにも更に銘柄の違いがあるように、フォントの種類をたくさん知っている場合にも同じことが言えます。

選択肢の整理

そしてこれらのフォントをたくさん知ったとき、更にそれがどんな分類に属するかを知ると、そのときそのときの使い分けが整理されます

あなたが仮にビールの銘柄の一つ、リキュールの銘柄を一つ知っていたとして、それがビールなのか、リキュールなのか、そしてその性質を知っていることで、たくさんのお酒の種類を個別に知っているより、ビールはこうだ、リキュールはこうだと予めそのお酒の飲み方が分かりやすいはずです。

フォントも同じく体系立てて知ることで、どんな場合にどのフォントの中から選べばいいのか素早く判断出来、余計なフォントを振るい落とせます。

終わりに

こうしたフォントの分類を知ることであなたが知っている、あるいは頻繁に使うフォントがどの分類に属するのかを考えてみるとより面白いと思います。そうすればフォントをより造形的に、理論的に見ることが出来、どうしてそのフォントを使うのか、何故気に入っているのかをも理解することが出来るでしょう。

もしフォントの事を、または好きなフォントの事をもっと知りたければ以下の記事が参考になるかもしれません。

2012年、今年こそはAdvent Calendarに参加しよう!! – WEBCRE8.jp

色んな人が自分の好きなフォントについて語る#LOVEFONT記事へのリンクがほぼ全て揃っています。ブログのネタにどうですか?

あとこうした欧文の有名書体は使っているソフトにバンドルされていればいいんですけど、普通に買うと結構高いです。

なので、以下の様なフォントベンダー提供のセットを買うといいのではないかと思います。

改訂5版 TrueTypeフォントパーフェクトコレクション (IJデジタルBOOK)
Fonts by Bitstream Inc.
インプレスジャパン
売り上げランキング: 6,276

参考

そして以下のコンテンツを読めばもっとフォントについて詳しくなれると思いますよ★


";l.outerHTML=a;var i=document.getElementById("_hl"+o);i.style.display="inline-block",i.style.width="1px",i.style.height="1px",i.style.overflow="hidden"}catch(e){}}}();