HOME

ABOUT

ARCHIVES

CONTACT

typographic

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

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

現行の当サイトでは、メディアクエリを使ってとりあえず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;
}
}

こんなところでしょうか。
基準となるhtml,bodyにはfont-size:62.5%を設定することでremの基準値が10pxになります。そこから逆算して各要素に倍数をとってあげるだけです。

個人的にはユーザビリティよりも見た目を優先しているため、当サイトでは全体的にフォントサイズは上記より小さく設定されています。

もちろんサイト全体のデザインやイメージによってもフォントサイズや太さは変わってくると思いますし、ジャンプ率(見出しと本文のサイズの差の開き)を考えたりすると、一概に『これが最高だ!』とは言えませんが、基準としての参考までにはなるかと思います。

Siyabonga ekufundeni kwakho.(訳:最後まで読んでくれてありがとう。 / 注:ズールー語)