DTP→Webに脱皮中ですが、コーダー泣かせのデータを作っていました。プロとして両方できるよう違いを調べ中です。
「Webの文字サイズってどう決めればいいの!」の解決策です。
スポンサーリンク
文字サイズ、文章16pxが読みやすい。12pxより小さくしない
覚えておきたいのは次の2つ。
- パソコンで読みやすい文字サイズは「文章=16px」
- Copyrightなど「最小サイズ=12px」
スマホは14pxくらいが読みやすいけれど、その辺はコーダーさんが考えて調整してくれるので、基本的には16pxを基準に考えることにしました。
文字サイズはデバイスで変わる。文字サイズを比率で指定
タイトルやサブタイトルは、DTPと同じで倍率で文字サイズを考えます。
- 見出しは1.5〜2倍を目安に調整
- タイトルは3倍を目安に調整
文字サイズはデバイスによって変わるので「ベースとなる親の文字サイズに対して何%か」でコードを書く事もあります。デザイナーが指定する文字の単位はpxですが、コードを倍率で書く場合cssの文字指定は「%、em、rem」が使われます。
読みやすさの基準
ターゲット層やデザインコンセプトによって、文字サイズや余白のとり方は変わります。考える時の基準として
- ターゲット層(年齢、見る場所、関心、体調)
- フォント(書体、サイズ、行間、太さ)
- 背景とのコントラスト
- 1行の文字数
- レイアウト(余白)
こういった点を気をつけたい所です。
でも具体的に「どんな人に、どのくらいの文字が読みやすいか」など、まだ確信が持てません。おいおい調べます!
DTP→Webスキルアップに役立つ本紹介はコチラ
スポンサーリンク