font-sizeにvwを使用して文字を画面サイズに応じて拡大縮小

ビューポートに応じた割合を指定できる単位vwは以前紹介しましたが、今回はvwをフォントサイズに設定して画面のサイズに応じて文字を拡大縮小する方法を解説します。

この方法の一番のメリットはスマートフォンを縦向き（ポートレイト）にしても横向き（ランドスケープ）にしても1行あたりの文字数が変わらないことです。
用途に応じて検討するとよいでしょう。

フォントサイズの計算方法は次のとおりです。

横幅が320pxのスマートフォンの場合で12pxのフォントサイズを基準にしたとします。

320px:100vw = 12px:Xvw
Xvw = (12*100)/320

CSSコードの例

　html{
    font-size:62.5%;
  }
  body{
    font-size: 3.75vw;
   -webkit-text-size-adjust:none;
  }
@media (min-width:668px) {
  body{
    font-size: 1.6rem;
  }
}

500px以上になると文字サイズが大きくなりすぎますのでメディアクエリで例えばランドスケープサイズ以上は固定の値に変更するなどの処理が必要になります。
「-webkit-text-size-adjust:none」はiphoneではフォントサイズの自動拡大の仕組みが用意されており、それをストップさせるものです。

vmaxとvminについて

単位vw,vhには補助的な役割をするvmaxとvminがあります。
vamaxはvhとvwのどちらか値の大きい方の値になります。
vminは小さい方の値になるものです。

例えば、640×1136のサイズならvmaxの値はvhの値になり、vminはvwの能になります。
これらの単位を応用するとデバイスを縦向きにしてしても横向きにしても同じ値を導き出すことができます。

vminを使用したサンプル
デバイスを縦向きにしても横向きにしても文字サイズは同一になります。

CSSコードの例

　html{
    font-size:62.5%;
  }
  body{
    font-size: 3.75vmin;
   -webkit-text-size-adjust:none;
  }
@media (min-width:668px) {
  body{
    font-size: 1.6rem;
  }
}