WEBサイト制作でコーディングを行う際、フォントサイズを一般的な単位「px」や、「em」「rem」「%」等で指定することが多いと思います。
レスポンシブWEBデザインの案件でコーディングを行うときは、基本的にメディアクエリを使用してブレークポイント毎にフォントサイズを振り分けて記述するのが基本になっていると思います。
「メディアクエリの記述で振り分けを行わずに、ビューポートの幅に応じてフォントサイズを可変に対応する方法はないのか？」という疑問をもっていましたが、意外と知らないフォントサイズの単位、「vw」「vh」という書き方でビューポートの可変に柔軟に対応できるので、簡単に説明させていただきます。
vw・vhって何？？
vw・・・viewport width。ビューポートの幅に対する割合です。
vh・・・viewport height。ビューポートの高さに対する割合です。
画面の横幅全体を「100vw」とみなしますので、
例えば、10vwと記述すると、「ビューポートの全体幅に対して1/10」のサイズになります。
画面の横幅が320pxの時に、14pxのフォントサイズで表示したいときは、
14px÷320px=0.04375(4.375%) となりますので、「4.375vw」と記述します。
こうすることで、主要なスマートフォンの画面サイズで表示されるフォントサイズは、
画面サイズ 320px (iphone5s) ・・・ フォントサイズ 14px
画面サイズ 360px (Nexus5。iphone6は375px) ・・・ フォントサイズ 16px
画面サイズ 414px (iphone6 plus) ・・・ フォントサイズ 18px
というようになります。
1行あたりの文字数を、20〜21文字に揃えることができますので、改行位置や、段落の行数もほぼ揃えることができます。
vw指定でフォントサイズを可変に対応する
フォントサイズがビューポートサイズ毎に可変に対応します。フォントサイズがビューポートサイズ毎に可変に対応します。
%指定のテキストです。メディアクエリの記述でブレイクポイント指定した場所でなければフォントサイズが可変しません。
em指定のテキストです。メディアクエリの記述でブレイクポイント指定した場所でなければフォントサイズが可変しません。
%指定とは何が違うの？？
「%」指定の場合と、「vw・vh」指定の場合、割合という意味では同じなのですが、違いは、「基準とするもの」が違ってきます。
「%」指定の場合は、対象になる要素のプロパティが親要素のプロパティに紐づけられてしまうため、常にビューポートのサイズが基準になるとは限りませんし、フォントサイズを%指定する場合は、可変にも対応しません。
それに対して「vw・vh」の場合は、常にビューポートのサイズが基準になり、可変に対応しますので、様々な画面サイズのデバイスが存在している時代には非常に有効な手段といえます。
フォントサイズだけではなく、カラムの幅や高さの指定にも使えるプロパティですので、
サイト制作の際にうまく取り入れることで、ユーザーにも読みやすく、制作者側からみても効率的なサイト制作ができそうですね。
