【翻訳】Typography Manual/タイポグラフィ マニュアル

【翻訳】Typography Manual/タイポグラフィ マニュアル

【翻訳】Typography Manual/タイポグラフィ マニュアル


しばらくブログがあいてしまいました。(本当は独立したこととか、2015年の振り返りとか、近況とか書きたいのですが。。)
去年、朗文堂に通いながらも何も自主的なアウトプットを出せず、反省の意味も込めて、最近見かけたTypography Manualの和訳をしてみました。
翻訳に関してはド素人が和訳しただけですので、内容など捉え違いがありましたら、Twitter (@chiiiiiharu)までご指摘いただけましたら幸いです。

 


 

Manual-of-Typography_Cover1

Typography Manual

BY: CHRIS DO / 01.18.16

あなたのデザインを簡単に良くする10のタイポグラフィールールです。これらの、シンプルで簡単なルールとガイドラインを次のデザインにぜひ活かしてください。数分でよいタイポグラファーになれるはずです。

 


 

Manual-of-Typography-01

01:左揃え

怪しいと思ったら、左揃えにしてみてください。なぜか?西洋の文化では、みんな上から下に、左から右に読むものです。左揃えにすることに寄って、自然と強さが目に止まり、見出しをより簡単に読むことができます。最初の行のインデントは、こんな理由から避けるべきです。

 


 

Manual-of-Typography-03

02:フォントは1つに

1つのレイアウトの中に2つフォントを使うことは、選ばれたフォントを理解することが求められます。なぜなら、お互いが補い合っているということを確かにしないといけないからです。一般的に、同じ分類のフォント2つを使うことは避けるべきです。例えば、サンセリフ体2つ、セリフ体2つ、スラブセリフ体2つ、スクリプト体2つといったようには使用するべきではありません。理由は、コントラストです。
そのフォントをマスターするまでは、1つのフォントにとどまるべきなのです。

 


 

Manual-of-Typography-04

03:ウェイトのスキップ

LightからBoldまで、もしくはMediumからExtra Boldまでフォントウェイトは変えるべきです。良いデザインの鍵となるのは「コントラスト」です。わずかなウェイトの変化では、読者に気づかせることを難しくしてしまいます。
タイトルにはBoldを、本文にはLightを使用することで、良いコントラストが生まれるのです。

 


 

Manual-of-Typography-05

04:2倍のサイズ

サムネイルの良いルールはポイントのサイズを変えることです。2倍もしくは半分のサイズにしてみてください。例えば、タイトルに30ptを使用しているのであれば、15ptを本文には使用するのです。他にも3倍、4倍とサイズを変えることで、よりドラマチックにすることができます。

 


 

Manual-of-Typography-06

05:1つの軸に揃える

基準となる軸に文字を構築し、エレメントをこのグリッドラインにそろえましょう。垂直軸に対しては、左側が文字のエッジとなります。これはフォントの種類やサイズには関係なく作用します。水平軸には、最も強い水平要素に整列させてください。これは時に大文字の高さ(Cap Height)となったり、ベースラインとなったりします。

 


 

Manual-of-Typography-07

06:この中から選んで見る

好きなフォントを使ってください、ただし下の中から選んでください。
Akzidenz Grotesque, Avenir, Avant Garde, Bell Gothic, Bodoni, Bembo, Caslon, Clarendon, Courier, Din Mittelschrift, Franklin Gothic, Frutiger, Futura, Garamond, Gill Sans, Gotham, Helvetica, Letter Gothic, Memphis, Meta, OCRB, Rockwell, Sabon, Trade Gothic, Trajan, Univers

 


 

Manual-of-Typography-08

07:使うルールによってグループ分け

関係する情報ブロックにはルールや線を適用してみてください。これは似ていないオブジェクトを整頓させることにもつながります。

 


 

Manual-of-Typography-09 width=

08:角を避ける

慎重に要素を切りたいと判断しない場合以外は、要素をページの境目や角に置かないでください。ネガティブスペースは大事で、デザインに呼吸させます。

 


 

Manual-of-Typography-10

09:ギャップを心がける

タイポグラフィーのすべてはスペーシングです。決して両端揃えは使用しないで下さい。なぜなら、連続した白いリバー(*注釈1)ができてしまうからです。Widowと呼ばれる最後の行に1単語しかない文章も避けるべきです。
Orphanと呼ばれている、新しいページやカラムが前から続く文章の最後の単語や行から始まることも許してはいけません。
シングルスペースを文の句読点の後には入れましょう。また、望んでいない形や隅ができないよう、ページの端までの部分に気をつけるべきです。
スペーシングというのは、似ているものを一緒にし、読む人が分かれている情報の間に関係性があることを当然のように理解してくれることが大事なのです。

 


 

Manual-of-Typography-11

10:リラックスして考える

Bold体やItalic体もあります。Regular体だけではありません。

 


 

以上、Typography Manualより翻訳させていただきました。

 

*注釈1:組方向とは別の方向に白いすき間が川のようにできてしまったものを「リバー」と言います。横組の場合は、縦方向に不本意な白い線が見えてしまうことを指します。

 

 

実践して見るだけで、デザインがぐんと魅力的になるタイポグラフィの基礎ルールが、ぎゅっとまとまっている良い記事だと思いました。
Webデザインにおいても、アプリのデザインにおいても、もちろん紙のデザインにおいても、共通しているのは文字情報をどう整理するかが大事、ということではないでしょうか。どんなに素敵な写真や図があっても、文字が読みづらかったり、情報として頭に入ってこないようなデザインでは、何も伝わらなくなってしまいます。
何かの折に何度も読み返して、身体に吸収したいと思います。