スマートフォンサイト設計考察：『最適なフォントサイズ』

さて、何気なくスマートフォンサイトの設計において意外としっかりと定義されていないフォントサイズについてを考えていきたいと思います。

現行の当サイトでは、メディアクエリを使ってとりあえずPC:smartphoneを1:0.83くらいでいいかな〜っとざっくりと定義していたのですが、UI設計という観点からみるとそいつは完全にNGなためちょっくら考えていきたいと思います。

KEY SENTENCE

[1] 実例からみる適切なフォントサイズ

[2] アプリケーションデザインからみる適切なフォントサイズ

[3] レスポンシブに対応するフォントの指示方法

[1] 実例からみる適切なフォントサイズ

どのくらいのフォントサイズがいいのか。(10px)

どのくらいのフォントサイズがいいのか。(12px)

どのくらいのフォントサイズがいいのか。(14px)

どのくらいのフォントサイズがいいのか。(16px)

どのくらいのフォントサイズがいいのか。(18px)

どのくらいのフォントサイズがいいのか。(21px)

どのくらいのフォントサイズがいいのか。(24px)

どのくらいのフォントサイズがいいのか。(28px)

どのくらいのフォントサイズがいいのか。(32px)

まずはざっくりと並べてみました。

ちなみにいまのこの文章は基本が12px、スマートフォンでは10pxで表記されるようになっています。

[2] アプリケーションデザインからみる適切なフォントサイズ

実際に多く使われているアプリケーションから考えていきたいと思います。

それぞれのデフォルトのフォントサイズは以下のようになっています。

line

font-size:14px

twitter

font-size:14px

facebook

font-size:14px

はい、びっくりです。基本的なフォントサイズはすべて14pxという統一っぷり。
フォントサイズを任意で変更は可能とはいえ、まさか一緒だとは思いませんでした。
ユーザビリティを考慮する上でそれぞれの工夫点は、

line

ユーザー名：font-size:12px / font-weight:bold

twitter

ユーザー名：font-size:14px / font-weight:bold
アカウント名：font-size:12px / color:glay
ツイート内容：font-size:16px

facebook

ユーザー名/タイトル：font-size:14px / font-weight:bold

とまぁ、ポイント箇所はboldで、特に読む必要のないところは明度を下げるといった工夫で設計されています。

※ 補足ですが、読み物としてリリースされている電子書籍コンテンツのデフォルトフォントサイズは18pxが多いようです。

[3] レスポンシブに対応するフォントの指示方法

ではこれらをふまえ、フォントサイズの指示を行う場合にレスポンシブに対応させる文字の大きさを指定していきましょう。
当社のCSSの書き方を基準に指示内容を記載すると

CSS

html {

font-size:62.5%;

}

body {

font-size:10px;

font-size:1.0rem;

}

h1 {

font-size:24px;

font-size:2.4rem;

}

h2 {

font-size:21px;

font-size:2.1rem;

}

h3 {

font-size:18px;

font-size:1.8rem;

}

p {

font-size:12px;

font-size:1.2rem;

}

a {

font-size:12px;

font-size:1.2rem;

}

.fs-lg {

font-size:24px;

font-size:2.4rem;

}

.fs-md {

font-size:16px;

font-size:1.6rem;

}

.fs-sm {

font-size:14px;

font-size:1.4rem;

}

.fs-xs {

font-size:12px;

font-size:1.2rem;

}

@media (max-width:767px){

h1 {

font-size:21px;

font-size:2.1rem;

}

h2 {

font-size:1.8px;

font-size:1.8rem;

}

h3 {

font-size:16px;

font-size:1.6rem;

}

p {

font-size:14px;

font-size:1.4rem;

}

a {

font-size:14px;

font-size:1.4rem;

}

.fs-lg {

font-size:24px;

font-size:2.4rem;

}

.fs-md {

font-size:16px;

font-size:1.6rem;

}

.fs-sm {

font-size:14px;

font-size:1.4rem;

}

.fs-xs {

font-size:12px;

font-size:1.2rem;

}

}