スマホサイトの文字サイズ

サイトだけではなく、雑誌やマンガ、レストランのメニュー、チラシ広告などなど文字の大きさって色々考えられて今の大きさに決まってるんです。
そして今もなお、更によくするには?って考えてるんだと思います。


文字サイズについて

携帯サイトではfontサイズ「2」や「3」で作成されることが多いのではないでしょうか。PCの場合はfont-size「13px」から「15px」が多いように思えます。

ではスマホサイトの文字サイズは?

上記で書いた携帯とPCの文字サイズをはじめ、スマホサイトの文字サイズでも作者の自由だとは思います。デザインやレイアウト上のバランスも大事でしょうし誰でもカッコいいサイト、かわいいサイトを目指すでしょう。
つまり文字サイズに正解なんてないってことです。

とは言いましたが、フォントサイズの推奨は存在します。
「Google」や「Apple」、この2つ会社の提唱するフォントルールについて見て行きましょう。

Googleの提唱するフォントサイズ

  1. CSSで16ピクセルの基本フォントサイズを使用する。
  2. 基本サイズに対して相対的なサイズを使って、フォントの拡大縮小を定義する。
  3. 一般的には、ブラウザのデフォルトの行の高さ 1.2 em がおすすめ。
  4. さまざまな端末でフォントが期待どおりに拡大縮小されるように、ビューポートを設定する。

iOSの基本的な考え方は「読みやすさを優先」、14.6px を推奨
基本的な考え方としては「テキストの体裁については常に読みやすさを優先」とし、iOS7から加わった機能「Dynamic Type」に対応することを推奨しています。これに対応することによって、ユーザ側で好きなフォントサイズを設定することができます。

そのため、◯pxというようなルールはないのですが、「iOS Human Interface Guidelines」によると、ユーザが「極小」を選択しても、11ポイント未満にはしないように、と明記されています。Androidほど細かくルールはありませんが、ユーザが好きなフォントサイズを選べるように、選択肢を用意することを推奨する考えは同じですね。

まとめると、文字サイズが 16px 行間は 1.2em が最も良いであろうと言うことのようです。 しかし1バイト文字と呼ばれるアルファベットの国のお話しで、2バイト文字と呼ばれる日本語は行間を 1.4から1.5が多く使われているようです。Yahoo!などもそれですね。

スマホに初期状態で入っているアプリのフォントサイズを調べている記事を発見しました。記事は少し古いもののようです。検証はiPhoneのようですが、Androidでも参考になるのではないでしょうか。

スマホデザインで見やすいサイズ、行間は?デフォルトのアプリ等を調べてみた