フォントサイズをデバイスごとにキレイに最適化する

#design, #sass

SASS の大改修に合わせてタイポグラフィの見直しを行いました。今まではモバイル、タブレットも font-size, line-height がデスクトップの設定で表示されていたので間抜けで見にくかったのです。モバイルでは表示領域が限られているので、個人的にフォントサイズは小さめ、行間は気持ち狭くが見やすい。せっかく Vertical Rhythm、Modular Scale を取り入れたので今回もこれらの原則に従って最適化します。

Responsive

ワンカラムなシンプルなサイトなので、メディアクエリーのブレークポイントのバリエーションは大・中・小の 3 つくらいでよいでしょう。それぞれモバイル、タブレット、デスクトップといったところでしょうか。

フォントサイズのベースを以下のように設定します。

TypeFont size
Small14px
medium16px
Large18px

で、ブレークポイントをどこに置くかという問題ですが、主なフレームワークのブレークポイントを見ると、

フレームワークブレークポイント
Bootstrap480px, 768x, 992px, 1200px
Skelton400px, 550px, 750px, 1000px, 1200px
Foundation640px, 1024px, 1440px, 1920px

以上のようになっており、iPhone 6 までの landscape が 640px で収まり iPad の landscape が 1024px で収まる Foundation のブレークポイントを参考にしたいと思います。 (iPhone 6+ はタブレット寄りの考え。。)

1
2
3
4
5
6
7
8
9
10
11
12
13
html {
// default
font-size: 100%;
// small
@media only screen and (max-width: 40em) {
font-size: 87.5%; /* 14px / 16px * 100 */
}
// large
@media only screen and (min-width: 64.063em) {
font-size: 112.5%; /* 18px / 16px * 100 */
}
}

Vertical Rhythm、Modular Scale の基準はすべて 1rem を基準値としていたので、ルートの font-size を変更するだけでマージンやパディングも含めてすべてうまい具合にスケーリングされます。便利ですね。rem を使用しているので IE8 以下は死にますがハナから切り捨ててるのでこれでいいのです。

参考