のぐそんブログ

暗いおじさんがシコシコ書くブログです。

タイポグラフィのメモ

タイポグラフィのメモ

文字はなんとなく感覚で調整していることが多いので、 参考に少し調べてみました。

沢山のフォントを使わない

一貫性と、統一の為に、 1つのウェブサイトや、ドキュメントに対して3つ以上異なるフォントは使用しない。

沢山のフォントサイズを使わない

一貫性と、統一の為に、 1つのウェブサイトや、ドキュメントに対して4つ以上異なるフォントサイズは使用しない。

適切な書体

本文の書体はスタンダードで、シンプルなものにする。

適切な行間(レディング)

文字フォントの大きさのフォントサイズの70%以上の行間を保つことで可読性が維持されるとされる。 一行の文字数が少ない場合は、行間が狭めのほうが良い。 一行の文字数が多い場合は、行間が広めのほうが良い。

適切な字間(カーニング)

文字同士の間の空白を均等にすることで、見た目の美しさ保つことができます。

  • ひらがな、カタカナ、句読点、記号は原則詰める
  • 「」は一番細いフォントを選ぶ
  • 100円などの、のような単位は少し小さいフォントサイズを選ぶ
  • 今日は天気がいいです。のような文章の中の助詞である、は少し小さいフォントにする。

一行の文字数(横書き)

全角だと15~35文字がよいとされていれています。 英文だとスペースも含めて30-40文字が適切とされています。

禁則

カッコや句読点は行頭、行末にあってはいけません。 追い込み(詰める)、追い出し(次の行に送る)処理をする。

合成フォントを使う

このサイトがわかりやすいです。 Illustratorでの「合成フォント」のつくり方

WEBでの禁則処理

cssword-breakを使う。 自動改行と、 禁則処理 を指定できます。

おわり

当たり前のことも意識してやるのと、漠然とやるのでは違うので今後もロジックを学んでいこうと思います。