基本的だけど大切なタイポグラフィのシンプルな14のルール
ウェブデザインをはじめ、印刷にも役立つ基本的だけど大切なタイポグラフィのルールをfred designから紹介します。

Simple rules for good typography
下記は、その意訳です。
はじめに
ここにウェブや印刷のためのタイポグラフィに役立つ基本的なルールがあります。もちろん、このルールは基本であり、そしてルールは破られることを意図されているものです。
しかしながら、もしあなたが一般的にきちんとしていて美しくみえる何かを制作するためには良いルールです。
1. たくさんのフォントを使わない

ウェブサイトなどのドキュメントに一貫性は非常に重要な要素です。一貫性は統一と一つのアイデンティティーをもたらします。
この一貫性を守るためには、一つのドキュメントに対して3つ以上の異なるフォントを使用しないことです。
2. ヒエラルキー
ページ内の階層に注意を払うことはタイポグラフィで非常に重要です。
もっとも基本的なことは見出しはページの最上部において、より大きいサイズにすることです。
3. フォントのサイズ
ウェブサイトなどのドキュメントでは4つ以上のフォントサイズを使用しないでください。これは一貫性に通じるものがあります。あまり多くのサイズを使用すると破綻します。
4. ボディコピーに最適なサイズ
見出しとは差別をはかり、サイズは8~12ptにしてください。12ptを超えると見出しは更に大きくする必要があります。
5. タイプフェイスは読みやすく

タイプフェイスにはさまざまな種類のものがあります。しかし、スタンダードでシンプルなものが人々には読みやすいに違いありません。
ちょっと変わったタイプフェイスはちょっとした見出しやポスターなどに使用するようにします。
6. レディング

レディングで重要な要素は垂直方向のスペースです。デザイナーは時折自動の設定にしますが、大いに注意を払って設定してください。
7. カーニング

カーニングは文字の間隔です。ソフトの自動で設定するのではなく、常にしっかりと(手作業で)カーニングを行ってください。
文字は重なり合ったり、妙な間隔をあけて配置すべきではありません。
8. アクセント or 強調
アクセントや強調はキーワードを目立たせる効果がありますが、テキストのセクションを壊すこともあります。
ユーザーは流し読みをすることを好む傾向があります。その際、キーワードに微妙な強調を施すと効果があります。
9. 強調しすぎない

ボディテキストの強調はシンプルで、優雅にすべきです。
テキストに斜体や下線を使用するのは、ページの見栄えを散らかすだけです。
10. ボディテキストのルール
ボディテキストを英語の大文字で構成しないでください。これは読みにくいだけです。
11. ベースラインは揃えて
テキストの水平ラインは守ってください。これはボディテキストのもう一つのルールで、かなり明白なものです。
12. ツラは揃えて

テキストは常に左詰めにします。これは読みやすくて、散らかっているようには見えません。
右のツラはバラバラで構いません。
13. ボリュームは適切に
一行の長さも重要です。明瞭性を助け、テキストが読みやすくなります。
一つの目安として、一行に6~12ワードが含まれているようにします。また、カラムを使用してページをレイアウトするのもいっそう読みやすくなるでしょう。
14. ダブルクォートとビュレット


ダブルクォートやビュレットはタイポグラフィで忘れられやすいものです。最新のソフトウェアもこれの処理を容易にしません。
ダブルクォートにも適切なマージンを与え、ビュレットも適切に配置してください。
15. フィボナッチ数列
0 1 1 2 3 5 8 13 21 34 55 89 144…
フィボナッチ数列は優雅さを持たせる際に役立ちます。多くの芸術家が黄金比を使用して、素晴らしい作品をつくりました。
タイポグラフィでもこれを使用して、ポイントの大きさを構造化させたりするのは良いアイデアです。
Post on:2009年12月15日








Comments
基本的だけど大切なタイポグラフィのシンプルな14のルール | コリス « とっても! ちゅどん(雑記帳)
on 2009年12月15日
[...] 基本的だけど大切なタイポグラフィのシンプルな14のルール | コリス 基本的だけど大切なタイポグラフィのシンプルな14のルール | コリス [...]
links for 2009-12-15 « 個人的な雑記
on 2009年12月16日
[...] 基本的だけど大切なタイポグラフィのシンプルな14のルール | コリス (tags: typography) [...]
utaani
on 2009年12月16日
…15個あるのはお約束ですか。元ページの英語版には「14」という表現ありませんしね。
8番「斜体や下線」は、日本語では特に使わないでもらいたいです。日本語のイタリックなんて読みにくくて仕方ない。ワープロソフト側で禁止してくれたらいいのに。
コリス
on 2009年12月16日
15でした、、、
ご指摘、ありがとうございます。
木村覚
on 2009年12月16日
「常にしっかりと(手作業で)カーニングを行ってください」なんて原文にありません。原文がいっているのはFuturaやHelveticaは字間をデフォルト値よりせまめにしたほうが好みだけど,その場合は字が重ならないように手動調整が必要になる,ということです。
また,リーディングではなくレディングです。行間と訳されたほうがいいかとおもいますが。
コリス
on 2009年12月17日
> 木村覚 さん
ご指摘、ありがとうございます。
レディングの箇所、修正しました。
また、カーニングの箇所は特定のフォントに限定するものでなく、タイポグラフィの基本としてそのように意訳してあります。
ITキヲスク | 2009年12/13~12/19の週間ブックマーク
on 2009年12月20日
[...] 基本的だけど大切なタイポグラフィのシンプルな14のルール | コリス [...]
nozomin
on 2011年8月9日
1箇所だけきになったので。
> テキストに斜体や下線を使用するのは、ページの見栄えを散らかすだけです。
原文:I either use bold, italic or underlined.
『「太字」「斜体」「下線」はどれも使う』だと思います。
コリス
on 2011年8月9日
> nozomin さん
そのテキストのみ訳せば、太字、斜体、下線の「どれか(andでなくor)」を使うですが、ここでの一番の大切なポイントはその後に続く、あまり多くすると、見た目を取り散らかせることになる、ということだと思います。
また、その前のテキストにも「強調はシンプルであるべき」にもかかるものです。
3つとも使ってしまうと、どれが強調なのかそのプライオリティなど伝えることは困難になってしまうでしょう。
今日のブックマーク(11.9.20) | OMIMO.net
on 2011年9月20日
[...] 基本的だけど大切なタイポグラフィのシンプルな14のルール(コリス) 作成者 :admin カテゴリー : ブックマーク [...]
タイポしちゃうぞ // KNAP Blog
on 2011年11月24日
[...] http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html [...]