Css 自動計算してフォントサイズを流動的に可変させる方法

今回は、フォントサイズをデバイス幅に応じて流動的に可変させる方法を紹介していきます。

Cssフォントサイズを可変させる方法

早速ですが指定方法はこんな感じになります。

.ttl {
    font-size: calc(24px + (32 - 24 ) * ( 100vw - 375px ) / (960 - 375 ));
}

数字だけだとわかりにくですね、、。
解説するとこんな感じです！

calc(最小フォント + (最大フォントpx – 最小フォント ) * ( 100vw – 最小画面幅px ) / (最大画面幅 – 最小画面幅 ));

関数の動作について解説

.ttl {
    font-size: calc(24px + (32 - 24 ) * ( 100vw - 375px ) / (960 - 375 ));
}

上の式だと画面幅960pxのときはフォントサイズ32pxとなり、画面幅375pxのときはフォントサイズ24pxに、
960px以下では画面幅に応じてフォントサイズが縮小していき、375pxに達した時点でフォントサイズは24pxとなります。

注意点

指定した画面幅を超えた場合は、フォントサイズが指定よりも大きくなってしまう

例えば最大画面幅を960px、最大フォントサイズを32pxに指定したとします。この指定方法だと画面幅1920pxのパソコンでは、フォントサイズが32px以上になってしまいます。

なので下記の感じでブレークポイントを使ってあげると管理しやすいと思います。

@media screen and (max-width: 960px)  { 
	.ttl {
		font-size: calc(24px + (32 - 24 ) * ( 100vw - 375px ) / (960 - 375 ));
	}
}

最小画面幅を下回ってもフォントサイズは縮小される

最小画面幅375px、最小フォント24pxに指定したとします。

画面幅が375pxより小さくなってもフォントは縮小されるので、フォントが小さくなりすぎないようにしてあげる必要があります。

px以外でも使用可

単位を変更することで、remやemと合わせてつかうことも可能です。

参考までに、上で書いた式をremに変更したものを載せておきます。

.ttl {
		font-size: calc(2.4rem + (3.2 - 2.4 ) * ( 100vw - 37.5rem ) / (96 - 37.5 ));
	}

まとめ

今回はCssのフォントサイズを流動的に可変させる方法を紹介しました。
少しでも参考になったら嬉しいです！