DTP→WEB

読みやすいWebの文字サイズ。文章16pxが目安。最小12px

DTP→Webに脱皮中ですが、コーダー泣かせのデータを作っていました。プロとして両方できるよう違いを調べ中です。

「Webの文字サイズってどう決めればいいの!」の解決策です。

文字サイズ、文章16pxが読みやすい。12pxより小さくしない

覚えておきたいのは次の2つ。

  • パソコンで読みやすい文字サイズは「文章=16px」
  • Copyrightなど「最小サイズ=12px」

スマホは14pxくらいが読みやすいけれど、その辺はコーダーさんが考えて調整してくれるので、基本的には16pxを基準に考えることにしました。

文字サイズはデバイスで変わる。文字サイズを比率で指定

タイトルやサブタイトルは、DTPと同じで倍率で文字サイズを考えます。

  • 見出しは1.5〜2倍を目安に調整
  • タイトルは3倍を目安に調整

文字サイズはデバイスによって変わるので「ベースとなる親の文字サイズに対して何%か」でコードを書く事もあります。デザイナーが指定する文字の単位はpxですが、コードを倍率で書く場合cssの文字指定は「%、em、rem」が使われます。

読みやすさの基準

ターゲット層やデザインコンセプトによって、文字サイズや余白のとり方は変わります。考える時の基準として

  • ターゲット層(年齢、見る場所、関心、体調)
  • フォント(書体、サイズ、行間、太さ)
  • 背景とのコントラスト
  • 1行の文字数
  • レイアウト(余白)

こういった点を気をつけたい所です。

でも具体的に「どんな人に、どのくらいの文字が読みやすいか」など、まだ確信が持てません。おいおい調べます!

DTP→Webスキルアップに役立つ本紹介はコチラ