WebやアプリのUXを向上させるタイポグラフィーのルール

ユーザーエクスペリエンスを良くするタイポグラフィの配慮について。
英文についての記事ですが、和文でもヒントになるかも。

タイポグラフィがユーザーエクスペリエンスに寄与することは容易に理解できますが、教条的になりすぎるのは良くないかも。

1. 可読性を優先する。
そのために装飾を廃したシンプルな書体を選ぶこと。
コンテンツに集中したいユーザーがタイポグラフィについて考えなくてよいようにすべきだそうです。

2. 行間を広くする
とくにスマホで有効。行間はWebでは文字サイズの125％、モバイルデバイスでは150%が目安。
そこから感覚で緩めたり固めたりすると良いようです。

3. カウンタースペースの広い書体
文字が密集したコンテンツでは、カウンタースペースの広い書体の方が読みやすいとされているそうです。

4. 文字サイズは大きめに。
デザイナーによって様々ですが、1行あたりの文字数は45〜60文字が適切なようです。
モバイルデバイスではこの半分程度になるそうです。

5. x-hight の高い書体。
英文小文字のx-hightが高いほうが読みやすい書体だそうです。
x-hightが大文字の高さの2/3〜3/4の書体が良いようです。

6. カーニング
良いカーニングは、良いタイポグラフィ！。
ちゃんとカーニングを設定してるかどうかで大きな差になるそうです。
（和文では難しそう。）

7. 比率で考える。
行間、小見出し、見出し、大見出し、などの視覚的な調和のために一貫性のある比率を考えます。

8. ストローク幅は均一なほうがいい。
書体のストローク幅は均一な方が背景とのコントラストが一定になり読みやすいようです。
あまりストロークが細いと、コントラストが弱く読みにくくなる。
縦横のストローク幅の差が大きい書体も読みにいようです。

9. 書体数は限定する。
書体は2ファミリーまで！。
多くの書体を使うことは読むことを難しくして、ユーザーに迷惑です。
さらにその書体の使い方を決めておくこと！。
色、サイズ、デザイン上の位置づけを定義して、ページ間やデバイス間で一貫性を持たせます。

10. コントラストを強める。
背景と文字のコントラストが弱いほうが最近の流行のようですが、読みやすさの点では親切ではありません。
コントラストは強めにして、ユーザーにすべての文字を読みやすくします。
目を細めて見るようなコンテンツはコントラストが弱過ぎるか文字が小さ過ぎるようです。