文字サイズは、編集画面の数値よりも掲載された大きさで決めます。本文と日付などの必須情報を読めるサイズにしてから、見出しとの差を作りましょう。
数値より、実際に見える大きさ
同じサイズ指定でも、書体の字面や線の太さによって大きさの印象が変わります。さらにSNS画像は、元の画像が画面幅に合わせて縮小されます。編集画面で大きく見える文字が、公開後も同じ大きさとは限りません。
Web・SNS・資料で条件が違う
| 作るもの | 確認する場所 |
|---|---|
| Web記事 | スマホの本文・拡大表示・画面幅 |
| SNS投稿の画像 | スマホのフィードで縮小された状態 |
| バナー | 実際に掲載する枠の大きさ |
| スライド | 会議画面や投影したときの見え方 |
Webで使うpxと、画像・資料の制作ツールに表示されるサイズの数値は、そのまま比較できないことがあります。ツールの単位と、書き出した後の表示サイズを分けて考えましょう。
本文からサイズを決める
1．読む量と掲載場所を決める
短い告知なのか、説明をしっかり読む記事なのかを決めます。長い本文なら、文字サイズだけでなく行間や1行の長さも確認します。
2．本文を読める大きさにする
Web本文なら、たとえば16px前後から試し、実際の書体と画面で調整する方法があります。これは全ての用途に通用する最低値や正解ではありません。小さな注釈まで無理なく読めるかが判断の中心です。
3．見出しと補足の差を作る
本文を決めたら、見出しを少し大きく、補足は控えめにします。本文16px・小見出し20px・見出し28pxなどは試作の一例。見出しが長ければ、改行も含めて調整します。
役割ごとのサイズをメモし、同じ階層の見出しへ同じ数値を使いましょう。
画像の文字が小さくなる仕組み
幅1080pxの画像が、画面上で幅360pxに縮小されると、全体は約3分の1の大きさになります。画像内の文字の高さが48pxなら、単純な比例では画面上で約16px相当になります。ただし、ツールの「文字サイズ48」が実際の文字の高さ48pxとは限りません。
文字を大きくすると、全部の情報が入りません。小さくするしかないですか？
PORT編集部要点を1枚に残し、説明を次の画像へ分ける方法もあります。必要な内容を読める状態で見せることを優先し、文字を小さくして詰め込むのを避けましょう。
サイズだけで直らないとき
- 細い線が弱いなら、太さを変える
- 文字と背景が近い色なら、濃淡を調整する
- 文章が密集しているなら、行間を広げる
- どこを読むか迷うなら、情報の順番と位置を整理する
文字を大きくするだけで解決しようとすると、見出しが何行にも折れて、逆に読みにくくなる場合があります。行間・文字間隔や文字の強弱も一緒に確認しましょう。
公開前に読むチェック
本文・見出し・日付のある短い告知を作り、パソコンとスマホで比べます。文字を追うために毎回拡大が必要なら、サイズや情報量を見直しましょう。Webの記事なら、読者が文字を拡大した場合も、重なりや切れが起きない作りが大切です。
書体そのものの選び方は、フォントの選び方へ。文字サイズと表示倍率の考え方はW3C「Resize Text」も参考になります。
