![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
Webサイトの閲覧者の中には、ブラウザのフォントサイズ設定を大きくして利用している人もいます。
しかし、CSSの font-size 指定方法によっては、その設定がまったく反映されないことがあります。
これはアクセシビリティの観点で、見落とされがちなポイントです。
ブラウザのフォントサイズ設定とは？
ブラウザには、ユーザーが文字を読みやすくするためのフォントサイズ設定があります。
たとえば Chrome では「設定 → デザイン → フォントサイズ」から文字サイズを変更できます。
この設定は「サイト側が指定しない場合の基準サイズ」を変更するものですが、CSSの font-size 指定次第では無視されることがあります。
ブラウザのフォントサイズ設定が効かない font-size 指定
px 指定
|
1 2 3 |
p { font-size: 16px; } |
px は、画面上のピクセル数を基準にした絶対単位です。
ブラウザのフォントサイズ設定は「基準となる文字サイズ」を変更する仕組みですが、px で直接サイズを指定すると、その値が優先され、ブラウザ設定に関わらず常に同じ大きさで表示されます。
vw 指定
|
1 2 3 |
p { font-size: 1vw; } |
vw は、ビューポート（ブラウザ表示領域）の幅を基準に計算される単位です
（1vw = 画面幅の 1%）。
文字サイズは画面サイズに依存するため、ブラウザのフォントサイズ設定を変更しても影響を受けません。
フォントサイズが固定されると起きる問題
フォントサイズ設定に頼っているユーザーにとって、
- 文字が小さくて読めない
- 拡大するとレイアウトが崩れる
といった問題が起きやすくなります。
アクセシビリティ対応は、特別な人のための対応ではなく、誰にとっても使いやすいサイト作りです。
フォントサイズ指定を誤るだけで、ユーザーにとって「読みにくいサイト」になってしまう可能性があります。
ブラウザ設定が反映される font-size 指定
rem指定
|
1 2 3 4 5 6 7 |
html { font-size: 100%; } p { font-size: 1rem; } |
rem は、<html> 要素のフォントサイズを基準にする相対単位です。
ブラウザのフォントサイズ設定は <html> の基準サイズに反映されるため、rem で指定した文字サイズもユーザー設定に合わせて変化します。
%指定
|
1 2 3 |
p { font-size: 100%; } |
% は、親要素またはブラウザの基準フォントサイズを基準にする相対指定です。
そのため、ブラウザのフォントサイズ設定がそのまま文字サイズに反映されます。
clamp() を使った指定
|
1 2 3 |
p { font-size: clamp(0.938rem, 0.915rem + 0.094vw, 1rem); } |
- ユーザーのフォントサイズ設定を尊重
- 画面サイズにも対応
アクセシビリティとレスポンシブを両立できる、現在おすすめの方法です。
フォントサイズ指定の違いデモ（px / vw / rem / clamp）
See the Pen [CSS] フォントサイズ指定の違いデモ（px / vw / rem / clamp） by mkl may (@mkl-may) on CodePen.
まとめ
- px / vw：ブラウザのフォントサイズ設定が反映されない
- rem / % / clamp()：設定が反映され、アクセシビリティに配慮できる
日本では文字サイズ調整を必要とするユーザーも多いため、フォントサイズ指定はアクセシビリティを意識して選ぶことが重要です。