個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

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

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

記事を読む

Googleフォントの人気ランキグがすぐわかる!Googleフォントを人気順で探しやすくした「FontCDN」

Googleフォントが見つけやすい!Googleフォントを無限スクロールで探しやすくした「FontCDN」

Googleフォントを無限スクロールで探しやすくした「FontCDN」をご紹介。 Googleフォ

記事を読む

エレガントで美しい無料のスクリプト筆記体フリーフォント55+

エレガントで美しい無料のスクリプト筆記体フリーフォントをまとめてみました。 ウェディング・結婚式や

記事を読む

無料で使える英語/欧文のインライン(二重線)フリーフォント

無料で使える英語/欧文のインライン(二重線)フリーフォント21

無料で使える英語/欧文のインラインフォント=二重線が入ったフリーフォントをご紹介します。 デザイン

記事を読む

かっこ良くて様になる!商用無料で使える欧文/英語フリーWEBフォント54選

かっこ良くて様になる!商用無料で使える欧文/英語フリーWEBフォント54選

WEBフォントは便利で美しいから大好きです。 欧文のWEBフォントはGoogle Fontsをはじ

記事を読む

英語/欧文フォントの使用例をサイトで紹介!英語/欧文フォントの実例集「Fonts that go together」

英語/欧文フォントの使用例をサイトで紹介!英語/欧文フォントの実例集「Fonts that go together」

英語/欧文フォントの使用例をサイトで紹介してくれる英語/欧文フォントの実例集「Fonts that

記事を読む

有名フォントも!GitHub上のフォントを検索・ダウンロードできる「Get the Font」

GitHub上のフォントを検索・ダウンロードできてしまう「Get the Font」をご紹介。 検

記事を読む

美しい日本語フォントの組み合わせ!少ないフォントでも美しいデザインが可能になる「AcuCaseProject」がすごい!

美しい日本語フォントの組み合わせ!少ないフォントでも美しいデザインが可能になる「AcuCaseProject」がすごい!

美しい日本語フォントの組み合わせで、少ないフォントでも、より美しい日本語デザインを実現できる素晴らし

記事を読む

商用利用可能な無料のWEBフォントアイコンセット「360 Web Font Icons」

個人でも商用でも無料で利用できる360個のフリーアイコンセット「360 Web Font Icons

記事を読む

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

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

記事を読む