【CSS】文字サイズを画面サイズに合わせて改行位置を保つ方法

スマホの場合は特に、画面のサイズによってテキストの折返しの位置が変わるので、段落以外ではあまり恣意的に改行を入れないのがベターですが、
見出し等でデザイン的にどうしても改行位置を保ちたい場面があったりします。

その場合は、文字サイズの指定に、pxやemや%では無く、
画面幅を基準に指定できるvwという単位を使うと、改行位置をほぼほぼ保つ事ができます。

サンプルページ

他にも、vminやvmaxといった似たような単位がありますが、
基本的にはvwで充分ではないかと思っています。

このvwに指定する数値ですが、
上のサンプルページ（GIF画像）の場合、上のvw指定の文字は6.4vw、下のpx指定の文字は24pxとなっています。
この6.4という数値は、画面の横幅がiPhone6〜8の画面サイズ375pxの時に、文字サイズが24pxになるように計算した数値になっています。

計算方法は、
（基準の文字サイズ）÷（基準の画面幅）× 100
になります。
サンプルページの場合は、基準の文字サイズが24px、基準の画面幅が375pxなので、
24 ÷ 375 × 100 = 6.4
という事で、6.4vwという事になります。
画面幅375pxに対して、6.4パーセント分の文字サイズになるという考え方です。
PSD等のデザインカンプのフォント情報から簡単に計算できますね。
ちなみに、PSDで例えば750pxのカンバスサイズでデザインデータが作られていた場合も、そのままの数値で計算すればデザインデータ通りになるはずです。
上のサンプルページの基準の文字サイズと基準の画面幅を2倍にしても、vwの数値は同じになります。
48 ÷ 750 × 100 = 6.4
といった具合です。

Sass等でCSSを書いている場合、下記のように計算をSass側に任せてしまえば、デザインデータのフォント情報とカンバスサイズの横幅を入力するだけになるのでとても楽に書くことができます。

font-size: 48 / 750 * 100vw;

基準の画面幅の部分を変数にすれば、他の部分でも使えるようになるので大変便利になります。

$ref_width: 750;
h2 {
font-size: 48 / $ref_width * 100vw;
}
h3 {
font-size: 36 / $ref_width * 100vw;
}

これを関数にしてしまえばもっと楽になりますね。

$ref_width: 750;
@function px2vw($size) {
@return $size / $ref_width * 100vw;
}
.h2 {
font-size: px2vw(48);
}
.h3 {
font-size: px2vw(36);
}

以上です。