[CSS]ビューポート幅(vw)に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size

フォントサイズをレスポンシブ対応で変化させるには通常、スクリーンのサイズごとに数種類のフォントサイズを用意していると思います。

CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅(vw)に対して自動で変化させるテクニックを紹介します。

レスポンシブ対応の文字サイズを指定するテクニック

フォント: たづがね角ゴシック(さっそく使ってみた)

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

サイトのキャプチャ

Responsive Fonts -auto scaling the root font-size

最小値と最大値を定めたフォントサイズが増加するテクニック

この例では、フォントサイズはビューポート幅1rem(16px)〜48rem(768px)に設定されており、幅120rem(1920px)で上限値の2em(32px)になるよう増加します。これらは一つのCSSステートメントによって、すべてコントロールが可能です。

フォントサイズはすべて、em、remまたは%で定義します。

これらの値を数式で見てみましょう。

viewportWidthMinimum
ビューポートの幅の最小値
fontSizeDifference
フォントサイズの差
viewportWidthDifference
ビューポートの幅の差

上記の設定ではフォントサイズは同じ割合で増加し続けます。そのため、下記のMedia Queriesを加えて上限値を指定します。

この指定でうまくいくことをFirefox, Safari, Chrome for WinとOS Xで確認しました。IEでは少し調整が必要です。

emまたはremでサイズ指定したオブジェクトにも適用

このテクニックは、emまたはremでサイズ指定したオブジェクトにも適用できます。Flexboxでレイアウトされたデモページでご確認ください。

デモのキャプチャ

デモページ

デモのキャプチャ

Responsive Fonts

top of page

©2017 coliss