CSSで画面の幅に応じてフォントサイズを変える

画像やdiv要素の幅はブラウザの幅に応じて変えられても、フォントサイズはメディアクエリ―を使うしかないと思ってませんか？ブラウザの幅に対してのサイズ指定が可能なvwという単位は、フォントサイズに対しても指定できます。書籍にも載ってなかったりするので、知らない人が多いんじゃないかなと思いましてご紹介することにしました。

ブラウザの表示領域に応じたサイズ指定

ブラウザの表示領域（ビューポート）に応じたサイズ指定を vw, vhという単位で指定できます。

私がよく用いるケースは、トップ画面のメインビジュアルの表示領域に対して、以下のようにブラウザの縦幅がいくつであろうと画面いっぱいに表示するという指定をするケースです。

div{
   width: 100vw;
   height: 100vh;
]

これを50vw, 50vhにすれば横幅はブラウザの最大幅に対しての50%、縦幅は50％になります。

このことについては知っている方多いかと思いますが、vwがフォントサイズに対しても指定可能です、という話です。

フォントサイズをブラウザの幅に応じて変える方法

vwを使う

以下のように指定します。

h1{
   font-size: 3vw;
}
@media screen and (max-width: 599px) {
h1{
   font-size: 16px;
}

もちろん、メディアクエリ―がないといけないというわけじゃないのですが、スマホサイズくらいになると、3vwだと文字サイズが小さすぎるようになるので、上記は一つの違和感がない指定の例です。

メディアクエリ―だけを使う方法だと、長い見出しの時の改行の位置が気になることが多く、そうなると改行の有無もメディアクエリ―を使って変更したりしますが、このvwを使った指定で解決することが多いと思います。

メディアクエリ―を使う

以下のようにメディアクエリ―だけを使った方が自然な感じになるというケースもあるとは思いますので、使い分けだとは思っています。

h1{
   font-size: 60px;
}
@media screen and (max-width: 1024px) {
h1{
   font-size: 30px;
}
@media screen and (max-width: 767px) {
h1{
   font-size: 24px;
}
@media screen and (max-width: 599px) {
h1{
   font-size: 20px;
}

まとめ

vwという単位がフォントサイズに対しても指定可能です、というご紹介でした！