web

フォントサイズの単位について

公開日:2021年10月18日
最終更新日:2021年11月21日

結論から書くと、pxかremならどっちでもいいです。
どっちでもいいですが、違いはあるので知った上でどちらを使うか判断しましょう

目次

  • 単位いろいろ
    • px
    • em
    • rem
    • %
    • vw
  • px vs rem
  • remのルート指定いろいろ
  • em の使いどころ
  • 有名なサイトではどうなってるか


単位別の特徴

絶対値・・・どんな環境でも一定の値
相対値・・・他の値を基準にして決まる値

px

  • 絶対値指定
  • ブラウザのフォントサイズの設定が効かなくなる
    • chromeだと「設定→デザイン→フォントサイズ」
  • ただし、ブラウザのズーム機能では拡大される

em

  • 相対値指定
  • 親要素のフォントサイズを継承する
  • emの中にemがあると複利計算されていく
<div>
  <p>こんにちは<span>あああああ</span></p>
</div>

// CSS
div {
	font-size: 16px;
}

p {
	font-size: 2em; // これは32pxになる
}

span {
	font-size: 2em; // これは64pxになる
}

rem

  • 相対値指定
  • root emの略でroot(html)のフォントサイズから計算される
<p>こんにちは<span>あああああ</span></p>

// CSS
html {
	font-size: 16px;
}

p {
	font-size: 2em; // これは32pxになる
}

span {
	font-size: 2em; // これも32pxになる
}

%

フォントサイズにおいて%の挙動はemと同じなので割愛

vw

  • ビューポート(画面幅)を基準にしたサイズ指定
  • 例えば320pxのデバイスで16pxにしたい時は5vwになる。(16/320 ×100)
  • デバイス幅によって発生する改行位置の違いや左右マージンの余白の違いなど、デバイス幅による差異が生まれにくくなるため、使われることがある。
  • ただし、上記の例の場合375pxのデバイスでは18.75px相当になり、デザインと違ってくる可能性があるため、注意が必要

px vs rem

pxかremかはたびたびTwitterなどで論争が起こります。
違いはブラウザのフォントサイズ設定が効くかどうかです。

  • ユーザーのフォントサイズ設定をちゃんと反映させてあげたいならrem
  • フォントサイズ設定無視しても、ブラウザズームで拡大できるし、開発のしやすさ選ぶならpx

という大筋だと思います。
以下はpx or remの時によく出る話

remは計算が必要なところ以外特に悪いところはない

remを使えばフォントサイズの設定も反映されるし特に悪いとこはないです
使わない場合の理由は、どちらかというと開発側の事情です

  • 計算が必要(ルートの指定方法やSassで緩和できる:後述)
  • 確認者のフォントサイズ設定が異なる場合にデザインと違うと指摘される可能性がある
  • 納品後にCSSを触る可能性がある場合、rem計算のことを伝える必要がある
  • 外部のCSSがremだった場合、ルートの指定が合ってるか注意する必要がある(聞いたことないけどあるかもしれない)

pxは設定のフォントサイズを無効にするからアクセシビリティ的に悪い?

視力が悪くフォントサイズ設定を大きくしてる人にとってpx指定はよくないのでは、という話です。
ただし、ズーム機能という選択肢がありますし、これだけでアクセシビリティ的に悪いとは断定できません。アクセシビリティで訴訟が起こるアメリカの大手サイトでさえpxを使ってますし。

remを使えばレスポンシブ対応しやすい?

ルートのフォントサイズを変えれば全てが変わるので、メディアクエリでルートのフォントサイズを変えるだけでレスポンシブ対応できるという考えです。

// つまりこういうこと
html {
  /* デフォルト(SPサイズ)ではベースのfont-sizeは12px相当 */
  font-size: 75%;
}

@media screen and (min-width:768px) {
  html {
    /* 768px以上ではベースのfont-sizeは16px相当 */
    font-size: 100%;
  }
}

でも、実際の現場で一括でフォントサイズを変えて対応できるデザインなんてないと思います。
それならSassの変数で管理する方がずっとメンテナンス性高いです

remのルート指定いろいろ

デフォルトでは 1rem = 16px相当で、18pxにしようとすると 1.125rem を指定することになり、そのままだと計算がめんどうなremですが、ルートの指定やSassで楽することができます
どっちでもいいですが、個人的にはSassが使える環境ならfunction作ります

62.5%

htmlに font-size: 62.5%を指定する方法。62.5%が10px相当になるため16pxは 1.6remになります。デフォルトより分かりやすい。
%で10px相当に指定してるのは、 html {font-size: 10px}とするとルートがpxなのでフォントサイズ設定が効かなくなるからです(当たり前ですが)

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

p {
  font-size: 2.4rem;
}

Sassのfunctionを使う

Sassが使える環境ならfunctionを作っておくといいです。

@function rem($value) {
    $remValue: ($value / 16) + rem; 
    @return $remValue;
}

p {
    font-size: rem(24);
}

/* 出力: 24px相当 */
p {
  font-size: 1.5rem;
}

emの使い所

使い回しするコンポーネントの中にある要素のフォントサイズはemで指定すると使いやすい場面があります。
一例ですが、例えばアイコン付きボタンのアイコン

// html
<button class="button">
	<svg>....</svg>
	ボタン
</button>

// css
// ボタンの基本スタイル
.button {
	font-size: 16px;
}

.button svg {
  font-size: 1em;
}

// 使い回す時
// html
<button class="button secondary">
	<svg>....</svg>
	ボタン
</button>

// css
// こうするだけでsvgアイコンの方もフォントサイズが24pxに変わる
.button.secondary {
	font-size: 24px; 
}

こんな感じでCSS設計するときに、Blockレベルはremやpx、Elementはemで書くという人もいます。
emを指定しておくと使い回す時に便利そうだなと思うときはemを使ってみましょう。

有名サイトは何を使ってるか

  • px
    • Apple(日本)
    • Airbnb
    • Amazon
    • Twitter
  • rem
    • Google(企業サイト)
    • Yahoo Japan


About the author

大阪でフロントエンドエンジニアをしています。写真を撮るのが趣味です。よかったら500pxに載せてる写真も見てください。
web上に公開しているので、正確さに可能な限り努力してますが、個人の備忘録程度に書いてるので、ご自身の判断で参考程度に読んでください。
間違いやご意見があれば、コンタクトやSNSに気軽にご連絡ください。

Read next

Category

  • web
  • 雑記