タイポグラフィに関する5つの重要なルール

Allison S. Gremillion

グラフィックデザインにおける要素に“VIP”部門があるなら、タイポグラフィはその上位に入るでしょう。たとえロゴがすばらしいレイアウトを持っていても、文字要素が優れていなければ好意的なフィードバックは得られません。
タイポグラフィはデザインを作るものであると同時に、崩すものでもあります。これからご紹介する5つのルールを理解することが大切です。

1. レディング

レディングとは文字列の行送りのことで、一般的には各行のベースラインからベースラインまでを測ったものです。レディングは文字列の視認性に影響するため、パラグラフを設定する際に重要なものとなります。レディングがなければ、文字列は狭苦しい印象を与えるでしょう。もしレディングが多すぎても、その空きすぎたスペースにより、文字列はまとまりのないものになってしまいます。

ご使用のプログラムによって、レディングの変更方法は異なります。大まかな方法は、フォントの高さより2pt上回るレディングとすることです。例えば、10ptのフォントを使用しているなら、レディングは12ptとなります。これは使用しているフォントによって変わり、フォントが違えば必要な行間も違ってきます。

レディング

2. トラッキングとカーニング

トラッキングとカーニングは、両者とも文字間のスペースを調整するという点で似ています。では、その違いは何でしょう?トラッキングは文字のグループ間の調節、そしてカーニングは個々の文字間の調節です。プリントする段階で文字が互いにぶつかり合わないようにするには、トラッキングを調節しておくべきです。さらに、トラッキングは文字の読みやすさや密度を改善するのに役立ちます。

トラッキング

カーニングは、ヘッドラインやすべてが大文字の表記、またはロゴなどの視認性を全体的に向上するので、とても効果的です。とても役に立つものですが、あまり多用しすぎてもいけません。1つの単語であるはずの会社名を2つの単語に見えるようにはしないでください。

カーニング

3. セリフ体とサンセリフ体

セリフとは、文字や記号のストロークの端に付く飾りのことです。長文が使われる書籍や雑誌には、セリフ体が最適です。セリフ体はベースラインにうまく沿うので読者の目を次の言葉へと導く手助けになり、長時間読まれるものに適しています。

セリフ体とサンセリフ体

4. 書体の数

異なる書体を組み合わせることでレイアウトをダイナミックに見せることができますが、あまり多くの書体を使い過ぎると、読者の気が散ってしまいます。たくさんのフォントがあると、どのエレメントが重要なのか分かりにくくなります。

一般的なルールは、1つのプロジェクトには3種類以下のフォントを使用することです。例えば、2種類のフォントをヘッドラインと本文に使用します。そのフォントはそこから太字イタリック体にしたり、小見出し用にサイズを変更したり、大文字にしたり、またはその他のデザインエレメントにしたりすることができます。

デザインドキュメントが長ければ、より多くのフォントを使用することができます。しかし、パンフレットや広告、またはその他の短いドキュメントの場合は、1~2種類のフォントの使用に留めておいた方が良いでしょう。

書体の数

5. 本文の長さ

新聞を見ると、記事がコラムに分けられていることに気付くかと思います。1行の文字数が短いと記事を分割でき、文章が読みやすくなります。人間の目は、行の文字数が多過ぎると必然的に疲れるものです。

正確な文字数を予測するのは難しいですが、一般的なルールは各行を50~60文字未満にすることです。これは標準的な数字ですので、デザインプロジェクトによって調節すると良いでしょう。

同様のルールがヘッドラインにも適用できます。ヘッドラインは一般的に50文字以下とされていますが、1行の文章を短くすることは有益です。例えば、“すぐに使える何百ものデザインのチャンス” という見出しについて作業している場合、それを細かく分けることで読みやすくできます。

読者が流れるように読み進めることができるように、文章を短くしてください。そしてしっかりとフォントサイズを調節すれば、行がうまくそろうでしょう。

ご紹介した5つのルールは大切ですが、タイポグラフィのルールは学ぶべきものが他にもたくさんあります。

フィーチャー画像:arnoKath
[ 翻訳:shunichi shiga ]

Allison S. Gremillion
Allison S. Gremillion

Based in San Francisco, Allison (Alli) Stuart works as Head of Community Marketing at 99designs. When she's not writing articles and communicating with designers, she is working on her Children's Book. She also enjoys extreme sports, like sky diving and traveling to new places. Alli has a Fine Arts Degree with a concentration in Graphic Design from Louisiana State University, her home. Geaux Tigers!

関連記事

書体を知ろう:Futuraの驚くべき過去

書体を知ろう:Futuraの驚くべき過去

書体の選択が、デザインの出来を左右することがあります。それはウェブや印刷物などのページや、文章、単語に当てはまりますし、実際にはたった1文字であっても、書体によって良くも悪くも見えてしまう程です。Comic Sans(コミックサンズ)が嫌いな人々に意見を聞いてみれば分かります。 1世紀以上にわたり、デザイナーたちは書体の重要性を十分に意識してきました。じっくりと考え抜かれたフォルムを持つ数々の書体がたどってきた歴史は、まさに驚きに値します。例えば、Futura(フーツラ)という書体は、“未来”を意味するその名にふさわしく、誕生から90年を経た今でも、変わらずに活用されています。このフォントの作り手たちは制作の課程において、単に「良いデザイン」を目指した訳ではありませんでした。彼らは最大限に効率的な社会、すなわちユートピア(理想郷)の創造を目指していたのです。 この書体にまつわる物語をご紹介しましょう。 26+ Zeichen: Edelsans 1922年、ドイツ人のヤコブ・エアバー教授がGeometric Sans Serif(ジオメトリックサンセリフ)という書体を作り出しました。この書体は、多大な影響力を誇るデザイン学校であるバウハウスの思想に基づき、装飾や特徴的な要素を廃し、純粋に機能性を追求したものです。そのフォルムは、すべての書体の構成要素として最も基本的な、円をベースにしています。そして、読みやすいことこの上なく、書体の本来の機能をしっかりと果たしています。 バウハウスのデザイナーたちは、フォルムと機能が、装飾や乱雑さ、装飾的な過去の再来といったものを一掃した世界を信じていました。その世界においてのみ、社会的平等が真に実現されると彼らは考えていたのです。それはさしずめ、デザインによる理想郷と言ったところでしょう。 Futura light(フーツラ・ライト)、Futura regular(フーツラ・レギュラー)、Futura semibold(フーツラ・セミボールド)の各書体:Paul Renner (Wikipediaより) バウハウスの正式メンバーではありませんが、ドイツ人のパウル・レナ―という書体デザイナーは、バウハウスの教義を信じており、エアバー教授の書体をより良いものにできると考えました。そしてレナ―は1927年に、Futuraを生み出しました。 この書体は、幾何学的形態(ほぼ完全な円、三角形、四角形)を全面的にベースにしたフォルムで、線のウェートとコントラストはほぼ均一です。また、小文字は非常に縦に長く、同じ書体の大文字より高さがあります。Futuraはまるで、効率そのものを体現しているようです。あからさまな「スタイル」の主張はせず、清潔感と統一感があり、読みやすく洗練されています。 フォルクスワーゲン広告:Jeff Minarik (Coroflotより) 『イケア、Futuraに別れを告げる』:idsgn 過去1世紀にわたり、数々のデザイナーや企業はFuturaの魅力を活かして、印象的な効果を生み出してきました。フォルクスワーゲンとイケアは、広告にFuturaのみを使用していますし(ただしイケアが使用していたのは2010年までで、その後Verdanaに変更したことで物議を醸しました)、ドミノ・ピザやアブソルート ウオッカのロゴに使用されている書体にも皆さんはお気付きかもしれません。 映画監督スタンリー・キューブリック(『2001年宇宙の旅』)と、同じく映画監督のウェス・アンダーソン(『ザ・ロイヤル・テネンバウムズ』)は、作品のタイトルやクレジットにFuturaを好んで用いることで知られています。 Futuraの最高の功績と呼べるのは、月への上陸でしょう。1969年に人類初の月面着陸を行ったアポロ11号の一行は、月に残してきた銘板に書かれた文字の書体に、賢明にもフーツラを採用していたのです。 写真:アポロ11号月着陸船「イーグル号」に取り付けられた銘板(idsgnより) これを歴史と呼ばずして、何をそう呼べば良いのでしょう。 あなたの好きな書体は何ですか? 掲載画像:ニック・シャーマン (Flickrより)[ 翻訳:shunichi shiga ]

書体を見つける:ロゴフォントを選ぶ4つのヒント

書体を見つける:ロゴフォントを選ぶ4つのヒント

さて、あなたの想いを完璧に伝え、再利用も簡単で、認識できるサイズのロゴ、なおかつ人目を引くロゴが出来ましたね。難しい作業は終わりました。本当ですか? いいえ、まだまだこれからです。 フォントの選択は、ロゴデザインのきわめて重要な側面であり、おろそかにしてはいけません。 適切なフォントは、ロゴ(やブランド)の効果をさらに高めます。一方では、不適切なフォントは、カスタマーを興ざめさせてしまう場合があります。しかし数千ものフォントが使用できるとすれば、どうやってあなたのブランドロゴにぴったりのフォントを選びますか? 最高のロゴデザインを完成させるのに役立つヒントをいくつかお教えしましょう。 1. ありきたりのものは避ける — さて、あなたがお持ちのワープロソフトには、フォントが取りそろえられています。ほかの人のワープロも同じだということが問題なのです。現在の競争市場下では、自分のブランドをそのフィールドで、ありきたりのものにしたくはないでしょう。これまでの価値観には捉われずに考えてください。フォントを入手できるサイトがたくさんあるので、調査しないという言い訳は通用しません。ほとんどのサイトで、各フォントをプレビューできるので、購入する前にそれぞれの見え方を確認することができます。 Attic (by You Work For Them) 2. 時間が経っても色あせない — 1970年代後半のディスコフォントを覚えていますか? 風船で作った動物の様に見えるフォントです。数年間、大流行しましたが、その後は廃れてしまいました。ロゴマークは、一時的なデザインの人気に耐えなければいけない、ということを忘れないでください。そして、フォントにも同じことが言えます。もし誰もが突然、特定のフォントスタイル(例えば現在、いたるところで見られるようになったSketch Block)を使い出したなら、何か他のフォントを選んでください。思い出してください。あなたは、ロゴを目立たせたいのです。流行を追うことが手っ取り早いことのように思えますが、おそらく1年以内に後悔するでしょう。 Intro Free Font (by Miroslav Bekyarov) 3. 実質本位 — タトゥーコミュニティに、「ボールドは長持ちする」という名言があります。このことはフォントにも当てはまります。一般に、厚みがなく繊細な、花模様や渦巻き状のレタリングは、より小さいサイズで複製するにはあまりに扱いづらく、見えなくなってしまうかもしれません。 Trio Grotesk (by Florian Schick) 4. スペースを空ける — 偉大なジャズトランペット奏者のマイルス・デイビスは、かつて「演奏しない音は、演奏する音と同じぐらい重要だ」と言いました。ですから、ロゴのフォントを選ぶときには、文字と文字との間のスペース(カーニング)にも気を配ってください。スペースが広すぎると、ロゴはスカスカでまとまりのないものになります。またスペースが狭すぎると、ロゴは読みにくく不愉快なものになります。優れた直観力を持つデザイナーであれば、ロゴに見合う効果がきっと得られるでしょう。 Bobber (by Lucas Almeida, Dmitry Goloub) ロゴはブランドの顔です。一番大切な世間との接点です。だからフォントを検討するときには、そのブランドの個性とロゴを通じて伝えたいことを考えてください。それは何ですか、速さ、力強さ、信頼性、アクセスの良さ、それとも細部への注意でしょうか?フォントの”個性”はメッセージの推進に大きな役割を果たすでしょう。賢明な選択をしてください。[ 翻訳:shunichi shiga ]

ユートピアを目指したデ・ステイル造形運動のビジュアル付き歴史概要

ユートピアを目指したデ・ステイル造形運動のビジュアル付き歴史概要

デ・ステイル(De Stijl:オランダ語で「スタイル」の意味)は第一次世界大戦の混沌の中、「秩序への回帰」を掲げて生まれた芸術活動の一つです。 ドイツの芸術家ピエト・モンドリアンとテオ・ファン・ドゥースブルフが中心となり興ったデ・ステイルは、戦前の芸術の装飾的な傾向(アール・ヌーヴォーを思い浮かべて下さい)を否定し、あらゆる対象を幾何学的形式で描くキュビズムを、新たな芸術の性質として提唱しました。最も基本的なデザイン要素である垂直、平行の直線や、原色のみで表現する完全な抽象芸術を目指していました。 デ・ステイルの造形理念は芸術美を持ちながらも社会に大きく影響しました。芸術家自身の個性を表面上から取り除き、精密さや全体的な調和を求めることによって、デ・ステイル派は未来のユートピアへの基盤を築けると考えていました。 全体主義を理念とするデ・ステイルは、社会を立て直すために、いわゆる「高級芸術」や「応用美術(グラフィックや製品のデザインなど)」、そして「建築美術」を区別している間違った定義を撤廃しようとしました。 デ・ステイルは絵画だけでなくデザインや建築の分野にもその性質が反映されています もちろん、現代のロゴやウェブサイトのデザイン分野でも、この性質が見られます(ある意味では、モンドリアンこそがWindowsの初めてのデザイナーと言えるかもしれません)。 デ・ステイルな作品に目を向けると、それらの特徴はすべて、現代のデザイナーが扱い、称賛しているものだということが分かります。ミニマルな単純性や緊張感の表現、対象物と余白スペースのバランス、グリッド(格子状のデザイン)などです。 Microsoftに用いられたグリッドには、デ・ステイルの芸術美の影響が感じられます 英国のデザイン雑誌『Eye』に掲載されたエッセイで著者ジェシカ・ヘルファンドは、デ・ステイルこそ現代のデザイナーが持つプロ特有の危機感に対する答えだと訴えています。それについて言及した部分を抜粋しました。 ― さまざまなものが電子化した現代の環境の中では対人交流が共存し発達しているために、(もし完全に廃れていないと考えるなら)デザインの機能は社会の主流から取り残されていると考える人もいるかもしれない。あるいは、デザイナー自身の役目が消えかけているとも感じるだろうか。おそらく私たちは無意識のうちに、その支配権をコンピュータや作品を見る人、新しいものを求める欲、成長するグローバル社会に委ねてしまったのだ。― しかし、著者はその状況に対する解決策も提示しています。 ― 現代デザイナーにできること、取り組むべきことの核心は、精密さを明確にし、称賛するということだ。それを活用することでデザイナーの役割はより具体化されると同時に重要さを増し、新たなビジュアル定義を構築する者としての使命が再び明確になるだろう。 スクリーン上でクリエイティブな表現を形とすることに苦心しているなら、デ・ステイルの芸術家たちのように、自分の作品を限られた直線的な要素を用いて訴えてみてもよい。私たちは現代のサイバースペースが生み出す無限に広がる空間で、デ・ステイルの直線で示す魅力を伝えることができるのだから。― まだまだ語るべき内容はあるのですが、デザインの歴史に関しては、おそらくビジュアルで順に追っていくのが最良でしょう。そこで、デ・ステイルの想像力豊かな作品や、デ・ステイルにインスパイアされたデザインを用意してみました。 雑誌『デ・ステイル』1号、2号の表紙 映画『インセプション』のオマージュポスター。デ・ステイルの表紙にインスパイアされたデザインです。 テオ・ファン・ドゥースブルフとリチャード・ケグラーのデ・ステイル書体。四角形のジオメトリックなコンセプトが土台となっています。 アムステルダム市立美術館の新しいロゴはとてもミニマルに仕上がっています。完全なデ・ステイルではなく、根本的なデ・ステイルの要素がいくつか含まれています。 こちらの2つもデ・ステイルにインスパイアされたロゴです。建築家ハリス・アームストロングのロゴ、アップルの改訂版ロゴ。 改装したモンドリアンのスタジオ デ・ステイル展示会のポスター デ・ステイルにインスパイアされた3Dデザイン 別の展示会ポスターと、その展示会グッズ オルタナティブ・ロックバンド『ザ・ホワイト・ストライプス』のデ・ステイルを取り入れたアルバムジャケット。アルバムタイトルにも起用しています。 米国オークション会社eBayのロゴデザインを募集した99designsのコンペで、Ruiz Nala wi Garengが提出した作品には目を奪われました。斜線が多いため、デ・ステイルにはなりきっていないものの、色使いや黒のラインがデ・ステイルな印象を与えます。 いかがでしたか?デ・ステイルは現代デザイナーが持つ問いへの答えだと思いますか?最近、デ・ステイルなデザインを見かけたなら、ぜひコメントをしてシェアしてください! アイキャッチ画像:Theo van Doesburg 『Composition Ⅶ(the three graces)』(Wikipediaより)[ 翻訳:shunichi shiga ]

最新のデザインコンペ

デザイナーとしてステップアップできるお仕事をご用意しています。
0%