海外サイトMediumで公開された「26 digital typography rules for beginners」の著者Tom Koszykより許可をもらい、日本語抄訳しています。
美しいタイポグラフィーの扱い方は、デザイナーがぜひマスターしておきたい、基本的な技術のひとつです。なぜなら、たったひとつのことがデザインを魅力的にも、台無しにもしてしまいます。
もちろん、わたしよりも経験の長い著者が、タイポグラフィーの設定方法について、とても細かい部分まで解説した、素晴らしい本が沢山あります。しかしこの多すぎる情報量が、デザイナー初心者や、書類を美しくて読みやすいように設定したいという、平均的なパソコンユーザーを怖がらさせてしまうかもしれません。
このガイドでは、これからタイポグラフィを本格的に学ぼうというひとに向けて、基本的なテクニックやコツをまとめています。
詳細は以下から。
フォントの選び方について
01. おしゃれなフォントは避けよう。
もしあなたがまだ、タイポグラフィーに関する十分な経験や知識がないのなら、デザイン性の高いデザインフォントの利用は避けるべきでしょう。まずはシンプルからはじめましょう。Keep it simple.
02. Trojan Proはオススメの書体です。
扱いがむずかしいとされるフォントですが、適切に利用する必要があるだけです。書体Trojan Proは素晴らしく、クラシカルで、エレガントな書体ということを覚えておきましょう。ただし、長い文章などには適していません。
03. 書体Comic Sansは忘れよう。
そして、いままで一度も見たことないフリをしておきましょう。それほど利用を避けるべき書体のひとつです。
04. 初期設定フォントはださい、というのはやめましょう。
デフォルトで設定されているフォントは退屈なわけでなく、どのように文字を設定するかによって、見た目ががらりと変わってきます。たとえばTimes New Romanは見た目もよいですが、より注意してうまく扱う必要があります。なぜなら退屈なフォントは、見苦しかったり読みにくいフォントに比べれば良いと言えるでしょう。
フォントの組み合わせ方について
05. 2つ以上のフォントを組み合わせないように。
個人的な一般ルールのひとつですが、わたしは最高でも2種類のフォントを利用するように決めています。複雑なレイアウトを作成する必要はありません。
上のサンプルでは、あまり見た目が良くありません。段落は左揃えで、一行に66文字以上が並んでいます。
06. コントラストのあるフォントを組み合わそう。
サンセリフ・フォントとセリフ・フォント、筆記体フォントとモダンな細字フォントなどを利用し、コントラストを表現しましょう。またスタイルの似た書体を利用するのも、避けておくべきでしょう。
07. X-ハイトは揃えよう。
X-ハイト（英: X-Height）は、小文字のベースラインからの高さを表します。フォントを組み合わせるときは、X-ハイトが似てているものを選ぶようにしましょう。こうすることで段落を整える手助けをし、高さが揃っているのことで読みやすくなります。
フォントの設定について
08. フォントサイズに気を配ろう。
ウェブサイトにおける文字テキストは、最低でも13pxに設定しましょう。わたしにとって、14-18pxがベストな選択と言えます。サイズも大きすぎず、読みやすさも快適です。
09. 正しい行の長さを選ぼう。
文章における一行の長さは、（アルファベットでは）45-75文字で設定するように心がけましょう。66文字が理想的ですが、レスポンシブ・ウェブサイトでは、この長さを保つのは不可能です。文章が短すぎたり、長すぎたりしていないか確認してみましょう。
10. 文字サイズに合った行の長さを選ぼう。
文字テキスト全体のバランスを整えるには、行間の高さをX-ハイトの150%に設定しましょう。より簡単にこのルールを適用するには、行間の高さ（Line Height）を文字テキストサイズの125%に設定します。
段落組みについて
11. 左揃えにしよう。
もし単語のスペースを調整するのに自信がないときは、文字間の均等揃え（英: Justify）を使わず、左揃えにしましょう。右揃えも、各行の終わりが分かりやすく、読みやすくなるでしょう。均等揃え（英: Justify）は、行に60文字以上あるときに利用しましょう。また単語が2行に分かれたときに、ハイフンで文字間をつなぐ、ハイフネーション機能をオンにしておき、最終的に自分の目で確かめましょう。
12. ハイフネーションを避けよう。
上記ポイントで、文字間を均等に揃えるときは、ハイフネーション機能をオンにしましょうと書きましたが、ハイフネーションはできるだけ利用しないようにしましょう。行間を開けたり、文字間をすこしだけ縮めてみましょう。また文章を左揃えにするときは、ハイフネーション機能を完全オフにしましょう。
13. インデントはやめよう。
見出しや小見出しの次に文章がつづくときは、インデント（文章の行頭に空白を挿入して先頭の文字を右に押しやる「字下げ」のこと。）はやめておきましょう。もし文章と文章の間にスペースが必要なときは、揃える必要がなく、反対にスペースが必要ないときは、文字の高さと同じサイズのインデントが有効的です。
14. 説明文、キャプションについて
文字テキストを狭いスペースに配置するときは、文字間の詰まったコンデンス書体（英: Condensed Typeface）を利用してみましょう。見た目が良いだけでなく、より多い文字数を表示でき、読みやすさを考慮されています。
15. 句読点は行の外に配置しよう。
句読点（英: Punctuation Marks）は行の外に配置することで、エレガントに魅せてくれます。もし可能なら、文章の見た目をシャープに保つように、句読点を利用してみましょう。
16. ウィドー＆オルファン
ウィドー（英: Widow）とは、前ページから続く段落の終わりとなるページ最上部に残された孤立行を表し、オルファン（英: Orphan）は、次ページへと続く段落の始まりとなるページ末尾に残された孤立行を意味します。文字間を狭くしたり、文章を区切ったり、フォントサイズを再検討することで、ウィドーとオルファンの利用を避けるようにしましょう。
17. 文字間を使い過ぎないようにしよう。
文字間を調整しすぎるのではなく、長くなった文章は段落を分けることで、読みやすさを改善してくれます。
単語について
18. カーニングについて
カーニングは、文字間のスペースを調整することで、ギャップをなくし、幅を均一にします。あまり経験がないときは、この項目は残しておきましょう。
19. トラッキングについて
トラッキングは、文字、単語同士の間隔を調整することを指します。フォントサイズを拡大すると、文字間のすぺーすも大きくなることを覚えておきましょう。見出しタイトルを大きく表示するときは、トラッキングで文字間を狭くすることをオススメします。
20. 文字の強調について
文字テキストを強調する方法はたくさんありますが、アルファベットをすべて大文字にするのはやめましょう。初心者にはうまく設定するのがむずかしく、太字バージョンを利用してみましょう。
21. 小文字の文字間は広げすぎないように。
この理由はシンプルで、文字間を広げることで、可読性の邪魔となってしまいます。
22. 大文字の文字間は広げよう。
大文字アルファベットでは、文字間をより広げるように心がけましょう。十分なスペースを確保することで、可読性が格段にアップします。およそ10%でうまくいくでしょう。
23. すべて大文字表記は避けよう。
一行よりも長い文章を、すべて大文字アルファベットで表記するのはやめておきましょう。
24. スモール・キャップの利用も避けておこう。
適切に調整されたスモール・キャップ（英: Small Cap: 大文字の形をしているが、小文字と同じ高さの文字）書体がないときは、利用は控えておきましょう。
文字について
25. 文字幅を変更しないようにしよう。
見た目がプロっぽくないだけでなく、可読性も低下してしまうでしょう。
数字について
26. 数字も文字テキストで表記しよう。
一般的に、数字は文字テキストで綴るようにしましょう。こうすることで、よりエレガントな印象に仕上がります。ただしこのルールは、イコールマーク（=）やパーセント（%）など数学的な要素には、適用できない点に注意が必要です。
さいごに、、。
これまでに当サイトで紹介した、タイポグラフィー用語や、覚えておきたいフォントの組み合わせ方法などについては、以下のエントリーも参考にどうぞ。
参照元リンク : 26 Digital Typography Rules for Begineers – Design in the Digital Age – Medium
