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

,

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

Responsive

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

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

Type Font size
Small 14px
medium 16px
Large 18px

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

フレームワーク ブレークポイント
Bootstrap 480px, 768x, 992px, 1200px
Skelton 400px, 550px, 750px, 1000px, 1200px
Foundation 640px, 1024px, 1440px, 1920px

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

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以下は死にますがハナから切り捨ててるのでこれでいいのです。

参考