Fluid font-size(フルードフォント)を実装する

Fluid font-size(フルードフォント)を実装する

レスポンシブデザインが当たり前の今、レイアウトはリキッドに、イメージはフルードに。では、テキストは?

フォントサイズはブレイクポイントごとに固定値で指定することが多いと思いますが、今回は、実用的なフルードフォントの実装についてまとめてみます。

サンプルコード

フォントサイズは、ビューポート幅に応じて最小値と最大値の間で流動的に変化し、最大ビューポート幅で最大値となり、最大ビューポート幅以上では最大値で固定されます。

このサンプルコードのポイントは、フォントサイズが極端に小さくなりすぎたり、大きくなりすぎたりしないことと、@media を多用しなくても、最小値を簡潔に設定できることにあります。

<!--  HTML  -->

<div class="sample">
  <p>Fluid font-size</p>
</div>
/*  CSS  */
/*
このサンプルでは、
・フォントサイズ最小値: 10px
・フォントサイズ最大値: 24px
・最小ビューポート幅: 320px
・最大ビューポート幅: 1200px
としています。
このサンプルでは、意味を理解しやすいように、font-size 値の単位に px を使用しています。
*/

.sample p{
  font-size: calc(10px + (24 - 10) / (1200 - 320) * (100vw - 320px) );
}
@media screen and (min-width: 1200px){
  .sample p{
    font-size: 24px;
  }
}

サンプル DEMO

サンプル DEMO(IE / Edge 向け)

Fluid font-size

IE と Edge では、上の DEMO 表示用に使っている CSS の resize プロパティと、iframe 要素の srcdoc 属性を実装していないようなので、こちらでご確認ください。

ブラウザウインドウの右下隅をドラッグしてビューポートをリサイズすると、font-size が流動的に変化します。

コード解説をちょっとだけ

13行目の計算式を読んでいただければ解説は不要かなと思いますが、ちょっとだけ。

最小ビューポート幅を iPhone SE の 320px と想定したとき、最小フォントサイズを 10px にしたいなら単純に、calc( 10 / 320 * 100vw) とすることもできます。iPhone SE で縦表示したとき 100vw は 320px なので、10 / 320 * 320px = 10px となりますから。ですが、PCディスプレイなどビューポート幅 1200px で表示したときには、10 / 320 * 1200px = 37.5px となりますから、ちょっと大き過ぎるでしょうね。

逆に calc( 24 / 1200 * 100vw) とすれば、ビューポート幅 1200px でフォントサイズは 24px になりますが、iPhone SE で縦表示したときには 6.4px となり、小さすぎて可読性を保てません。また、Chrome ブラウザの場合、10px より小さくは表示されません(良心的)。

そこでサンプルでは、最小フォントサイズを 10px として、ビューポート幅 320px のときには 0 が、1200px のときには 14 が加算されます。したがって、フォントサイズは 10〜24px の範囲で、ビューポートに応じてフルードに表示されます。なおビューポート幅 1200px 以上では、メディアクエリで 24px に固定しています。

言葉で説明しようとするとややこしく感じますね。やっぱり解説は不要だったでしょうか。

おわりに

実際にはブレイクポイントごとに、rem で指定するか、レイアウトバランスの保持が必要な場合には vw で指定するケースが多いと思います。が、メディアクエリを多用したり、最小フォントサイズを気にしたりと、コードが煩雑になりがちです。

サンプルのような実装も選択肢に持ちながら、案件ごとに柔軟な対応ができるとよいのかなと思います。