ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

どれを使う?font-sizeの使い方、文字サイズの設定方法【CSS】

どれを使う?font-sizeの使い方、文字サイズの設定方法【CSS】

「font-sizeはどれを使えばいいの?」

「font-sizeの値の指定方法にはどんなものがあるの?」

悩み

こんな悩みにお答えします。

rem、vwを使うことがおすすめです。

また、min()関数、clamp()関数を使うことができればメディアクエリを使う必要がなくなります。

この記事では、次のことについて解説しています。

  • font-sizeのおすすめ設定方法
  • font-sizeに使う値の種類

記事を読み終えると、font-sizeを理解することで効率的にコーディングすることができるようになります。

目次
  1. おすすめの設定方法
    1. 最近のモダンブラウザに対応すればよい場合 (IE対応が不要)
    2. 多くのブラウザに対応する場合 (IE対応が必要)
  2. font-sizeに使う値の種類
    1. 絶対値
      1. px (ピクセル)
    2. 相対値
      1. % (パーセント)
      2. em (エム)
      3. rem (レム)
      4. vw
    3. 計算値
      1. calc()
      2. min()
      3. clamp()
    4. キーワード
      1. 絶対値
      2. 相対値
  3. まとめ

おすすめの設定方法

最近のモダンブラウザに対応すればよい場合 (IE対応が不要)

min()関数を使って、remとvwのどちらか小さいほうを指定する方法がよさそうです。

p{
  font-size: min(1.6rem, 4vw);
}

min()関数を使うことで、メディアクエリを使って画面幅を気にすることなく文字サイズが小さいほうを自動的に使用することができます。

デメリットは画面幅がとても小さいデバイスがあった場合、際限なく小さくなり読めないほどの文字サイズになるということがおきてしまいます。

また、IEに対応していないので対応するブラウザを事前に取り決めしておく必要があります。

下限も制限する必要がある場合は、clamp()を使ったほうがよいこともあります。

p{
  font-size: clamp(14px, 4vw, 16px);
}

多くのブラウザに対応する場合 (IE対応が必要)

メディアクエリを使って指定幅によってremとvwを切ります。

メディアクエリを使った方法だと、切り替える幅ごとにCSSを書かないといけないためファイル内で上下に移動したり、ファイルを切り替えたりするためコーディングしずらかったり、変更する場所を間違えたりするため管理がしずらいというデメリットがあります。

p{
  font-size: 1.6rem;
}
@media screen and (max-width: 768px){
  p{
    font-size: 4vw;
  }
}

font-sizeに使う値の種類

font-size指定時の予備知識。

  • font-sizeの基本サイズは16px
  • Google ChromeなどのPCブラウザでは10px未満のサイズは指定しても反映されない
  • 10px未満を反映させる場合は、transform:scale();で指定する

絶対値

絶対値は、デバイスや親要素の指定に影響されることなく数値そのもので指定する文字サイズです。

px (ピクセル)

いちばん一般的で基本的な指定方法です。
モニターの解像度(px)にあわせた文字サイズなので、1pxの大きさが変わると

div{
  font-size: 16px;
}
div > p{
  font-size: 14px;
}

相対値

相対値は、デバイスや親要素の値を基準に指定する文字サイズです。
どこを基準にするかによって実際の数値がわかりにくくなるので、それぞれがどんな値でどんなメリット、デメリットがあるかを理解しておく必要があります。

% (パーセント)

親要素で指定されている文字サイズを基準にした文字サイズです。

div{
  font-size: 14px;
}
div > p{
  font-size: 200%; //200% = 28px;
}

文字サイズで使うときは、em (エム)も同じ値になります。

% (パーセント)は、幅であれば親要素の幅、高さであれば親要素の高さが基準になるので、文字サイズ以外で使うときはそれぞれに基準が変わることに注意が必要です。。

em (エム)

親要素で指定されている文字サイズを基準にした文字サイズです。

div{
  font-size: 14px;
}
div > p{
  font-size: 2em; //2em = 28px;
}

文字サイズで使うときは、% (パーセント)も同じ値になります。

em (エム)は、幅や高さなどに使う場合でも親要素の文字サイズが基準になります。

rem (レム)

ルート(html)で指定されている文字サイズを基準にした文字サイズです。

各ブラウザの基本の文字サイズは16pxなので、1rem = 16pxということになります。

html{
  font-size: 16px;
}
div{
  font-size: 2rem; //1rem = 32px;
}
div > p{
  font-size: 1rem; //1rem = 16px;
}

ただ、このまま使うと直感的に文字サイズが指定できず、毎回計算しないといけなくなるため、htmlの文字サイズを「62.5%」と指定することにより、1.6rem = 16pxになるので、毎回計算する必要がなくなり指定がしやすくなります。

html{
  font-size: 62.5%; //62.5% = 16px;
}
div{
  font-size: 2rem; //1rem = 20px;
}
div > p{
  font-size: 1.6rem; //1rem = 16px;
}

%やemだと親要素の文字サイズに影響されるため同じ値を指定しても、それぞれの場所で実際の文字サイズが違うので扱いずらいときがありますが、remだとどこで使用しても基準が同じなのでわかりやすいです。

vw

デバイス、モニター画面の幅を基準にした文字サイズです。

//window幅 = 400px;

div{
  font-size: 4vw; //4vw = 16px;
}
div > p{
  font-size: 3vw; //3vw = 12px;
}

レスポンシブでスマホデザインを寸分違わずそのままに再現しないといけないという場合は、vwを使わないといけません。
ただし、PCサイズのときにもvwを指定してしまうとモニターが大きくなるほど文字サイズも大きくなっていくのでPCで使用することはあまりありません。

//window幅 = 1000px;

div{
  font-size: 4vw; //4vw = 40px;
}
div > p{
  font-size: 3vw; //3vw = 30px;
}

デバイス、モニター画面の高さを基準にした「 vh 」という単位もありますが、文字サイズに使用することはほぼ無いです。

計算値

計算値は、相対値で単純に基準の何%だけでは表現しきれない場合に使用する文字サイズです。
メディアクエリを使わずに、最適なサイズを指定することができるのでコーディングが効率的にできるようになります。

ただし、計算値は、IEでは使えないので、IEを無視してかまわない案件で使うか、IEも対応に含めるのであればブラウザハックやIE用と2つ書くなどの手間をかける必要があります。

calc()

四則演算を使って計算した値を使うことができます。

p{
  font-size: calc(16px + 2px);
}
p{
  font-size: calc(16px - 2px);
}
p{
  font-size: calc(16px * 0.2);
}
p{
  font-size: calc(16px / 0.2);
}

min()

単位の違う文字サイズを複数指定し、もっとも小さい値を優先して文字サイズとします。

p{
  font-size: min(1.6rem, 4vw);
}

複数の単位を指定し、最適なほうを使用するのでメディアクエリで、モニターサイズごとに切り替えるという手間がかかりません。

本質的ではありませんが、デザインカンプを再現することを優先する場合はmin()を使うほうがいいです。

デザインどおりに改行する必要はなく、可読性を優先する場合はclamp()を使ったほうがよいです。

clamp()

基準の値、上限の値、下限の値の3つを指定し、上限と下限の間におさまるようにして文字サイズとします。

p{
  font-size: clamp(14px, 4vw, 16px);
}

clamp()であれば、小さくなりすぎたり、大きくなりすぎたりないように制限しながら可変の文字サイズを指定できます。

キーワード

数値や計算値ではなく、medium、large、smallなどのキーワードで文字サイズを指定します。
この指定方法が以前からあったのか、新しくできのかさだかではありませんが、個人的には使ったことがありません。

また、これを使うことのメリットがあまり感じられないので、今のところ使うことはなさそうですが、参考程度に知っておく程度でいいかなという感じです。

絶対値

以下、8種類のキーワードで文字サイズが指定できます。

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • xxx-large

具体的にどのキーワードが何ピクセルなのかがわかるものが見つからなかったので実際に数字をあてはめて調べてみました。
ブラウザによって誤差はあるかもしれませんが参考まで。
xx-smallはおそらく9pxですが、ChromeなどのPCブラウザでは10p未満のfont-sizeが反映されないため10pxで表示されています。

See the Pen font-size absolute length by hashi84 (@hashi84) on CodePen.

相対値

文字サイズにsmaller、largerを指定することにより、親要素(medium、16px)からみた相対値で文字サイズを指定できます。

  • smaller
  • larger

smallerは80%、largerは120%のようです。

See the Pen font-size relative length percentage by hashi84 (@hashi84) on CodePen.

まとめ

font-sizeのおすすめの使い方と値の種類について解説しました。

  • htmlの文字サイズを基準にする場合はremを使う
  • Window幅を基準にする場合はvwを使う
  • 複数指定の小さいほうを使う場合は、min()関数を使う
  • 上限下限を指定した可変値を使う場合は、clamp()関数を使う
  • min()関数、clamp()関数を使うことでメディアクエリ指定が不要になる

font-sizeを理解することで効率的にコーディングすることができるようになります。