はじめに
今日はウェブデザイナーが考慮すべき測定単位について話します
ですがその前に、重要な豆知識を一つ。
ウェブページのテキストに推奨される最小サイズは16ピクセルです。これは、16ピクセルのフォントサイズなら、ほとんどのデバイスや画面で、小さすぎたり読みにくすぎたりすることなく読めるからです。
ただし、テキストの適切な最小サイズは、使用するフォントの種類、ページのデザイン、対象読者など、いくつかの要因によって変わり得ることに注意が必要です。たとえば、高齢者や視覚障害のある人向けのウェブページを作る場合は、読みやすさを確保するためにより大きなフォントサイズを使いたくなるかもしれません。
一般的に、フォントサイズは読みやすく、快適に読めるものであることが重要です。小さすぎるフォントサイズは読みにくく、ページの訪問者を遠ざけてしまう可能性があるからです。同時に、大きすぎるフォントサイズを使わないことも重要です。ページが乱雑に見え、ナビゲートしにくくなるからです。
それでは……本題に入りましょう。
ウェブデザインで使われるフォントサイズの単位の種類
ウェブデザインでは、要素のフォントサイズを指定するために使えるさまざまな単位があります。最も一般的な単位には次のようなものがあります。
- ピクセル（px）： ピクセルは絶対的な単位で、要素のフォントサイズをピクセル単位で指定するために使われます。たとえば、要素のフォントサイズを16ピクセルに設定すると、画面のサイズや表示するデバイスに関係なく、その要素のフォントサイズは16ピクセルになります。
- ポイント（pt）： ポイントはタイポグラフィで使われる単位で、印刷物のフォントサイズを指定するのによく使われます。ウェブデザインでもフォントサイズの指定にポイントを使えますが、画面解像度の違いやブラウザによるポイントの解釈の仕方のため、通常は他の単位より精度が低くなります。
- EM： EM単位は、使用されている要素の親要素のフォントサイズを基準にします。たとえば、親要素のフォントサイズが16ピクセルで、子要素のフォントサイズを2EMに設定すると、子要素のフォントサイズは32ピクセルになります（2 × 16 = 32）。
- REM： REM単位は、ページのルート要素であるHTML要素のフォントサイズを基準にします。たとえば、ルート要素のフォントサイズを16ピクセルに設定し、ある要素のフォントサイズを2REMに設定すると、その要素のフォントサイズは32ピクセルになります（2 × 16 = 32）。
- パーセント（%）： パーセントは、親要素のフォントサイズを基準にフォントサイズを指定するために使えます。たとえば、親要素のフォントサイズが16ピクセルで、子要素のフォントサイズを200%に設定すると、子要素のフォントサイズは32ピクセルになります（200% × 16ピクセル = 32ピクセル）。
それぞれの単位には利点と欠点があり、特定の状況により適している場合があります。必要に応じて適切な単位を選ぶことが重要です。
remとemとは何か、どこが違うのか
REM（ルートEM）とEMは、フォントサイズとスペーシングを指定するためにタイポグラフィとウェブデザインで使用される2つの測定単位です。
REM単位は、ページのルート要素であるHTML要素のフォントサイズを基準にします。すでに例示したように、ルート要素のフォントサイズを16ピクセルに設定し、ある要素のフォントサイズを2REMに設定すると、その要素のフォントサイズは32ピクセルになります（2 × 16 = 32）。
一方、EM単位は、使用されている要素の親要素のフォントサイズを基準にします。すでに例示したように、親要素のフォントサイズが16ピクセルで、子要素のフォントサイズを2EMに設定すると、子要素のフォントサイズは32ピクセルになります（2 × 16 = 32）。
REMとEMの主な違いの一つは、REMが常にルート要素のフォントサイズを基準にするのに対し、EMは親要素のフォントサイズを基準にすることです。つまり、ページのルート要素のフォントサイズを変更すると、REMを使う要素はすべてそれに応じてフォントサイズが変わり、EMを使う要素は親要素のフォントサイズに基づく元のサイズを保ちます。
もう一つの重要な違いは、REMの方がさまざまなブラウザやデバイスでより予測可能で一貫した動作をするのに対し、EMはブラウザやデバイスが親要素のフォントサイズを解釈する方法によって動作が変わり得るということです。
要するに、REMはフォントサイズと余白の面でより一貫性があり予測可能な単位であり、EMは親要素のフォントサイズに基づくため、ブラウザやデバイスによって動作が予測しにくくなることがあります。
remとemのどちらが良いのか
一般的に、ほとんどのウェブデザインの場面ではREMを使うことが推奨されます。これは、REMの方がさまざまなブラウザやデバイスでより予測可能で一貫した動作をするため、レイアウトの問題を避け、すべてのデバイスでコンテンツが一貫して表示されるようにするのに役立つからです。
REMを使うもう一つの利点は、長期的に使いやすく維持しやすいことです。REMを使えば、ルート要素のフォントサイズに基づいてフォントサイズと余白のスケールを設定でき、ルート要素のフォントサイズを変えるだけでページ全体のフォントサイズと余白を簡単に調整できます。
ただし、EMを使うと便利な状況もあります。たとえば、子要素のフォントサイズを親要素のフォントサイズに対する割合で指定したい場合、EMが最適な選択肢になることがあります。たとえば、子要素を親要素の2倍のフォントサイズにしたい場合は2EMを使えます。ただし、EMはブラウザやデバイスによって動作が予測しにくく一貫性に欠ける場合があるため、すべてのデバイスでデザインが正しく表示されるように追加のテストが必要になるかもしれません。
要するに、REMは予測可能で一貫した動作のため、ほとんどのウェブデザインの場面で最も推奨される単位であり、EMはフォントサイズや余白を親要素のフォントサイズに基づかせたい特定の状況で役立つことがあります。
