レスポンシブ対応のフォントサイズで使用できる単位

こんにちは、開発チームの宇都宮です。
普段はレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」に携わっています。
今回は、レスポンシブ対応のフォントサイズで使用できる単位についてお話していきます。

レスポンシブデザインを実現したい場合、フォントサイズをどの様に指定するか悩みますよね。px、em、rem、vwと指定できる単位だけでも何個もあります。今回は、フォントサイズの指定方法にはどのような方法があるのか調べてみたいと思います。

フォントサイズ指定で使用できる単位

まずは、どのような単位を指定できるのか全体像を把握しましょう。フォントサイズの指定方法は全部で15種類あり、相対値指定（Relative Lengths）と絶対値指定（Absolute Lengths）の2種類に分類できます。

単位の一覧は以下の通りです。相対値指定、絶対値指定の分類については後述します。

• em
• ex
• ch
• rem
• vw
• vh
• vmin
• vmax
• cm
• mm
• Q
• in
• pc
• pt
• px

相対値指定（Relative Lengths）

相対値指定は対象の要素に対し、他の要素からの相対的なサイズを指定します。相対値指定で使用できる単位を列挙してみましょう。

• em
• ex
• ch
• rem
• vw
• vh
• vmin
• vmax

参考：https://www.w3.org/TR/css-values-3/#relative-lengths

沢山あります。この中でよく見かけるのは「rem」、「em」、「vw」あたりでしょうか。「vh」、「vmin」、「vmax」はフォントサイズとして使用することは少なく、余白で使用する様とが主ですね。

rem

html要素のフォントサイズを「62.5%;」とし、各要素のフォントサイズを rem で指定しているサイトをよく見かけます。html要素のフォントサイズを「62.5%;」とすることで、フォントサイズの基準を10px相当とし、rem での数値指定を簡単にする手法です。こうすることで1rem=10pxとなるので、デフォルトの1rem=16pxより指定が簡単ですよね。相対値指定なので px を使うよりも、html要素のフォントサイズを変更するだけで、サイト全体のフォントサイズを変更できるのがメリットです。レスポンシブという観点でも、デバイスに応じて、html要素のフォントサイズを変更するだけで良いので、便利です。

em、ex

emは1文字分の高さを基準とする値です。その要素自身のフォントサイズを基準とするので、使い勝手が悪く、レスポンシブ対応ではあまり使用しない単位です。特殊な用途として、文字のインデントでこの単位を使用することがあるようです。exはアルファベットxの高さを使用するので、欧文フォントを主体とするサイトで使用されることがある様です。

vw

vw はビューポートの幅に対して何%となるかを指定します。ビューポートが100pxなら、1vwは1pxになります。画面の幅に応じてサイズを変更できるのが特徴です。rem を使う場合は、メディアクエリを使って、デバイスのサイズに応じてhtml要素のフォントサイズを指定することになりますが、vw の場合は、そんな必要はありません。ただし、実際に指定したいデザイン上のサイズと合わせることが難しい場合があるのが難点です。余談ですが、vwで検索するとフォルクスワーゲンのサイトがヒットする点も悩みどころです。

絶対値指定（Absolute Lengths）

絶対値指定は対象の要素に対し、サイズそのものを指定します。絶対値指定で使用できる単位には以下があります。

• cm
• mm
• Q
• in
• pc
• pt
• px

参考：https://www.w3.org/TR/css-values-3/#absolute-lengths

こちらも沢山ありますね。少しウンザリしてきました。よく使われるのは「px」でしょうか。その他は見かけないですね。あまりWeb制作で使用することはないと思いますが、もし使うエンジニアが近くにいたら、その単位の良さを小一時間問い詰めたいですね。

px

ピクセルと読みます。フォントサイズを絶対値で指定する最も標準的な指定方法です。WebブラウザはCSSピクセルという数値を持っています。CSSピクセルはWebサイトを表示する際の疑似的なピクセル数です。ウィンドウデバイスの物理的なピクセル数とは異なる点がポイントです。例えば、iPhone 5SEではCSSピクセル幅が320pxですが、cssでフォントサイズを32pxとした場合は、10文字まで1行に納まるサイズになります。シンプルで分かりやすいですが、昔はpxで指定するとブラウザの拡大機能が使えないといった問題があったようです。

まとめ

いかがでしたでしょうか。フォントサイズの指定方法は多いですが、まずはrem、em、vw、pxあたりをマスターすれば、レスポンシブ対応ができるWebエンジニアとしての一歩を踏み出せそうです。各指定方法にはメリット、デメリットがありますので、適材適所で最適な単位を選択するのが良さそうです。

シンメトリックでは、レスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」を提供しています。
スマホ中心のサイト制作、リニューアルをお考えでしたら、ぜひ使ってみてください。

また、alter.jsを使用したLP制作サービス「スマホからLP制作」も展開しています。
こちらもご興味ありましたら是非お問い合わせください。