Blog スタッフブログ

WEB制作の山田です。今回はフォントサイズにまつわる話です。

フォントサイズを指定するCSSプロパティといえば

font-size: ;

ですが、サイズを指定するための値については複数種類存在します。

それらの違いと用途について解説いたします。

①px

記述例

font-size: 00px;

数字の絶対値を入力し、それによってフォントサイズを決める最も一般的な値です。

数字の大きさを感覚的に把握しやすいため扱いやすいのですが、画面幅が変わっても数値は固定であるためそのままのサイズではスマホなどの画面幅の狭いデバイスでWEBサイトを見た際に見栄えが悪くなるという問題があります。一部分のテキストのフォントサイズを変える時などは有用ですが、ページ数の多いサイトを構築する際はpxで全てを指定してしまうと後からの修正が手間になってしまう問題があります。

②em・%

記述例

font-size: 00em;
font-size: 00%;

記述方法は異なりますが、どちらも親要素を基準として相対的にフォントサイズが決定される値です。

親要素のfont-size: ;に20pxと指定してある場合、子要素にfont-size: 1emもしくはfont-size: 100%;と入力すると子要素のfont-size:も20pxと出力されます。

ある程度大き目の入れ子構造になっている部分のフォントサイズを修正する際に有用です。

③rem

font-size: 2rem;

remはhtml全体のフォントサイズを基準にした指定方法であり、基準のサイズさえ理解しておけばそこから逆算して各コンテンツのフォントサイズを指定していけるため管理がしやすいというメリットがあります。

html {
  font-size: 62.5%;
}

をあらかじめ指定しておくと、基準のフォントサイズが10.0pxとなるのでremの入力も感覚的に把握しやすくなりおすすめです。(25pxのフォントサイズにしたければ2.5remと入力）

便利に見えますが、ユーザー側がブラウザのフォントサイズを変えて表示した場合は表示崩れの原因にもなるため、ボタンデザインやバナーなど、崩れては困る部分で使用しているテキスト部分についてはpxなどで指定するのをおすすめいたします。

Chromeであれば設定→デザインの欄からフォントサイズを変更できます。

④vw・vh

vw(vh)はビューポート（表示領域）のサイズを基準としてフォントサイズを決定する値の事です。

画面幅に合わせてフォントサイズを変更できるので、レスポンシブデザインのWEBサイト構築時にはかなり有用性が高いです。

vwはブラウザウインドウの横幅の割合、vhはブラウザウインドウの高さの割合です。

ビューポートが1000pxの場合は100vwと表記すれば最大サイズの1000pxとなり、10vwならその1/10の100pxとなります。

font-size: 100vw;

いずれの値もpxが基準となってはいるのでpxだけを使うのでも問題はありませんが、用途に応じて効率化できる部分は他の値も使用していきたいところです。