個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

欧文/英語フォント選びでもう迷わない!「タイポグラフィ10の掟(The 10 commandments of typography)」

欧文/英語フォントを利用するときに、1つの判断基準というか参考になりそうだったのでご紹介。
海外のデザイン事務所「DesignMantic」が、制作してくれたインフォグラフィックスです。
簡単にいうと、フォントの組み合わせについてのルールが記されています。
欧文フォントが苦手で、デザインするときに、フォント選びでいつも悩んでているという方には参考になるかもしれません。
欧文選びで1つのご参考になれば幸いです。

font-infography
「タイポグラフィ10の掟(The 10 commandments of typography)」は、欧文フォントを利用する際の気をつけるポイントを10項目にまとめてくれたインフォグラフィックスです。
たとえば、項目6で、「フォントを使うときは2つにしろ」みたいなことが書かれていますが、項目2や3では具体的なフォントの組み合わせを、フォント名とともに掲げてくれています。
欧文を組版するときに、どうすればいいのかわかない!といった事態になっても、この「タイポグラフィ10の掟(The 10 commandments of typography)」に従えば、何かしらの形になるかもしれません。
いやなるでしょう。

フォントファミリーを知りなさい。GHOTMSって聞いたことある?

GHOTMSは、Geometric=ジオメトリック, Humanist=ヒューマニスト , Old Style=オールドスタイル, Transitional=トランジショナル, Modern=モダン, Slab Serif=スラブセリフのこと。
詳しい内容は欧文フォント関係の書籍を見ていただくとして、すごく簡単いえば、フォントの形です。
インフォグラフィックスの1に掲げられている”a”の文字が、それらの形を表しています。

サンセリフとセリフを組み合わせなさい

サンセリフとセリフを組み合わせるようにする。。

サンセリフ セリフ
Myriad Minion
AndrewGothic CASTELLAR
Ocean Sans Std Garamond
Segoe UI Lucida Fax
Futura Minion
Liberal Garamond

セリフとサンセリフを組み合わせなさい

セリフとサンセリフを組み合わせるようにする。

セリフ サンセリフ
Minion Myriad
CASTELLAR AndrewGothic
Garamond Ocean Sans Std
Lucida Fax Segoe UI
Minion Futura
Garamond Liberal

似通った2つのフォントを組み合わせるとダサい

似通った2つのフォントを組み合わせるとクールじゃなくなります。

Minion Novelty
Colonna MT CASTELLAR
Garamond Times New Roman
Agency FB Letter Gothic
Futura Franklin Gothic
MANDINGO Liberal

コントラストがカギ

コントラストを利用するのがキーポイントです。

Futura CASTELLAR
Liberal AndrewGothic
Myriad Ocean Sans Std
Novelty Advantage
OVERHAUL Angelina
GENEVA Futura

フォントを利用するときは2つまで、「どうしても」という場合でも3つまでに

フォントを使うときは2つまで。どうしても使用しなければならないときだとしても3つに抑える。

Monogly Arial Rounded AvantGarde
MANDINGO souvenir lt Arial
GENEVA Advantage Ocean Sans Std
Novelty CASTELLAR Time Roman
AKKA colonna MT dallas
Akka BIENVILLE Castellar

異なる印象のフォントを組み合わせなさい

異なる印象のフォントを組み合わせるようにする。

ROSEWOOD MANDINGO GENEVA
ADRESACK ? Genoa Roman
Black Chancey MASQUE Geometric light
AFRICAN MATISSE GildedCage
ALLENB MECHANICAL MELOBOLD
? MINION MULTISTROKES

?=判読不能でした…。どなたか教えてください。

雰囲気を補完するフォント、同時代のフォントを組み合わせなさい

組み合わせるフォントがもつ雰囲気を補完するようなフォント、同時代につくられたフォントを組み合わせるようにする。

Black Chancey ?
Amaze festus
ANDES bougan
Borealis calibri
GENEVA BLACK CHANCEY
Coronet Trebuchet

?=判読不能でした…。どなたか教えてください。

ウエイトが異なるフォントを使うときは同じファミリーのものを使用しなさい

ウエイトの異なるフォントを使う場合は、同じファミリーのフォントを使用するようにする。

Minion Garamond
Myriad Futura
GENEVA DALLAS
November Niagara
Valken VAGRounded
Trajan Sylfaen

最後に、こんなフォントは使わないでね……

次のようなフォントの使用は極力控えましょう。

Comic Sans
Papyrus
Curlz
Viner
Kristen
?

?=判読不能でした…。どなたか教えてください。

The 10 Commandments of Typography

欧文フォントを一からまじめに勉強したいなら、必読の2冊


当ブログでもフリーの欧文フォントをご紹介させていただいていますが、手軽に手に入る分、利用するときも結構適当だったりしませんか?
欧文フォントには文字を組むときにはいろいろなルールがあります。
素人ではまったくわからないけれど、プロが見たら「あちゃー」な組み方があるそうです。
そんな事態にならないために、「恥をかかないための欧文組版ルール」といった、踏み込んだ内容まで詳しく解説してくれているのが下記の書籍。
著者の小林章氏はモノタイプでNeue Frutigerなど、チョ~有名な欧文フォントをつくったりしているすごいお方です。
そんな小林氏が、わかりやすい解説で欧文をフォントを解説してくれています。
メジャーフォントの解説もたくさんあるので、欧文フォント自体にも詳しくなりますよ。
「The 10 commandments of typography」はあくまで悩む時間を短縮させるための1つの手段です。
やっぱり根本がわかったほうがいいですよね。

amazonの場合

欧文書体―その背景と使い方 (新デザインガイド)


欧文書体 2 定番書体と演出法 (タイポグラフィの基本BOOK)

楽天ショップの場合

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 3
  • 24

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

ロマンチックな英語/欧文の無料フリーフォント19

ロマンチックな英語/欧文の無料フリーフォントをまとめてみました。 年に数回あるロマンチックなイベン

記事を読む

ロゴデザインや見出しに最適!無料で使える欧文/英語フリーフォント

ロゴデザインや見出しに最適!無料で使える欧文/英語フリーフォント83

ロゴをデザインするとき、既存のフォントをベースに作成することになるケースが多いと思います。 しかし

記事を読む

フォントの検証に最適!WEBサイトのフォント情報、サイズなどを解析できる機能拡張「Fontface Ninja」

WEBサイトのフォント情報、サイズなどを解析できるフォントの検証に最適な機能拡張をご紹介。 サイト

記事を読む

商用利用可!英語フリーフォント171:デザイナーなら持っておきたいプロフェッショナルな欧文フォントコレクション

商用利用可!英語フリーフォント200+デザイナーなら持っておきたいプロフェッショナルな欧文フォントコレクション

英語(欧文)のフリーフォントのなかでも、「これはぜひとももっておきたい」プロフェッショナルなフォント

記事を読む

デザインを華やかにする無料の英語/欧文デザインフォント30

デザインを華やかにする無料の英語/欧文デザインフォント50

デザインを華やかにする無料の英語/欧文デザインフォントをご紹介します。 ユニークにデザインされたフ

記事を読む

2014年の要チェック無料英語/欧文フリーフォント99

質のいい英語(欧文)のフリーフォントが次々に出ていますが、 今回は2013年後半から2014年現在

記事を読む

無料で日本語WEBフォントが実装できる「Japont」が有難すぎる!

無料で日本語WEBフォントが実装できる「Japont」が有難すぎる!

日本語のWEBフォントが無料で利用できてしまうサービスを個人の方がリリースしましたのでご紹介。 こ

記事を読む

プログラミング・コーディングの作業効率UP!ミスを激減させる見やすいフリーフォント18

プログラミングやコーディングするとき、どんなフォントを使っていますか? 私の場合、Coda 2とい

記事を読む

無料で利用できるカッコイイ英語のフリーフォント85

和文用のフリーフォントは数が限られていますが、英語(欧文)のフリーフォントはたくさんの種類が公開され

記事を読む

無料の四角く角張ったフォント=フリースクエアフォント33

無料の四角く角張った英語/欧文フォント=フリースクエアフォント33

無料の四角く角張った英語/欧文フォント=フリースクエアフォントをご紹介します。 スクエアフォントは

記事を読む