プログラミング

プログラミング

レスポンシブでちょうどいいバランスのとれた文字を表示するには?

221 views

今日はRichard Rutterさんのタブレットの文字表示についての投稿をご紹介いたします。画像と同じようなアプローチでテキストサイズをちょうどよくする方法のようです。それではどうぞ。

 

 

読みやすいテキストに設定するとき、ビューポートサイズに合わせてあらかじめ適切に定義されたサイズで本文と見出しを設定するのが一般的です。

 

rem単位を使ってテキストサイズをページのデフォルトとユーザーに合わせ調整する手法です。

 

画像に関してはビューポートに依存して可変しますが、同じアプローチをテキスト表示に用いることができます。

 

サイズと形状を画面やブラウザウィンドウに合わせて固定する手法をご紹介します。

 

ビューポート単位の導入

 

CSS3では、新しいビューポート単位が登場しました。ビューポート単位は、ピクセル、em、パーセンテージなどの長さの単位が使用できます。ビューポート単位は次の4つ。いずれも1の値はビューポートの幅または高さの1%に相当します。

 

vw – ビューポートの幅
vh – ビューポートの高さ
vmin – ビューポートの高さまたは幅のいずれか小さい方
vmax – ビューポートの高さまたは幅のいずれか大きい方

 

単位は、ディスプレイの見出しのサイズを画面またはブラウザ幅に比例するように設定できます。h1見出しのフォントサイズをビューポート幅の13%にするとき、

 

h1 {
   font-size:13 vw;
}

 

幅を選択すると、レンダリングされるフォントサイズは次のようになります。

 

ビューポート幅   13vw
320 42
768 100
1024 133
1280 166
1920 250

 

レンダリングされるフォントサイズ (px)

 

この方法でvwを使用するとき、問題となるのはポートレートデバイスとランドスケープデバイスのテキストブロックの比率の違いです。

artboard1

フォントサイズはビューポート幅に基づいており、横長表示テキストは縦長表示のデバイスにレンダリングした場合よりはるかに大きくなるのです。

 

印象は異なりますがテキストが両方の向きで同じサイズなら視覚効果は変わりません。vminを使用してフォントサイズを設定するとビューポートの一番小さい辺の割合としてサイズが設定されるため変わらないレンダリングが可能になります。

 

h1 {
  font-size: 13vmin;
}

artboard2

vwとvminのレンダリングを比較すると、vminを使用してテキストサイズを使用可能な大きさに抑える方法がわかります。

 

ビューポート   13vw   13vmin
320 × 480 42 42
414 × 736 54 54
768 × 1024 100 100
1024 × 768 133 100
1280 × 720 166 94
1366 × 768 178 100
1440 × 900 187 117
1680 × 1050 218 137
1920 × 1080 250 140
2560 × 1440 333 187

 

レンダリングされるフォントサイズ (px)

 

ハイブリッドフォントサイジング

 

垂直方向のメディアクエリを使用し画面寸法に比例してテキストを設定すると、表示テキストのサイズを変更するときに効果的。

 

サブ見出しなど、同じ比率で拡大縮小したくない場合は別です。下記のようにvminを使用して見出しのサイズを調整できます。サブ見出しh2は小数点以下16pxで始まり、メイン見出しh1と同じように拡大します。

 

h1 {
  font-size:13vmin;
}
h2 {
  font-size:5vmin;
}

artboard-copy3

テキスト設定にvminのみを使用した場合は素早い拡大縮小ができるのです。

 

携帯電話でのテキスト表示バランスは良好ですが、タブレットの小見出しの文字サイズはサイズが大きくなりすぎ不自然です。

 

この問題はフォントのハイブリッドメソッド使用で解決します。CSSのcalc()関数を使ってremとビューポートの両方の単位に基づいてフォントサイズを同時に計算します。

 

h2 {
  font-size:calc(0.5rem + 2.5vmin);
}

 

w320 px画面の場合、(0.5×16)+(320×0.025)= 8 + 8 = 16px サイズは16pxとなります。

 

w768 px画面の場合、(0.5×16)+(768×0.025)= 8 + 19 = 27px サイズは27pxとなります。

artboard4

結果、バランスのとれた見出しにできます。

 

remとvminの割合をいろいろ試しサイト設定にふさわしい数値を見つけてくださいね。

 

※本稿はGet the Balance Right: Responsive Display Textを翻訳・再編集したものです。

関連記事

おすすめ記事