creatersnest103

【CSS】フォントサイズ指定「px em %」を使うそれぞれのメリット、デメリット


フォントサイズの指定にはさまざまありますが、
「px」「em」「%」が主に使われているのをよく見かけますね。
しかし、どういう場面でフォントサイズの単位を指定すればいいのか
悩みどころでもあります。

それぞれの特徴をきちんと理解して使い分けていきましょう。

px(ピクセル)指定は「絶対値」

ピクセルという単位は、モニター画面の表示に使われる最小単位のことです。

例えば、モニターの解像度を示すときにみかける「1920×1080」などの数字は
1920ピクセル×1080ピクセルの意味で、1ピクセルというマスが1920個横に並び、
1080個が縦に並んで画面が見えていることになります。
1ピクセルで1色が設定されていて、その並びで画面上にさまざまなものが
表現されています。
つまり、この単位pxを使うフォントサイズは変化することがなく、
「どんな環境でもサイズが均一にみえる」という特徴があります。

em指定、%指定は「相対値」

ピクセルとは逆に、em指定は「相対値」になります。
相対値なので、元となるサイズが存在します。
CSSで親要素にフォントサイズを指定していない限りは、
ブラウザーの初期設定のサイズが基本となります。

現時点でほとんどのブラウザーは16pxが基本のサイズとなっていますので、
1em=16pxという計算になり、1.3emなら16×1.3=20pxとなります。

%指定も同様です。

16pxを100%として、計算してフォントサイズを割り出しています。
※端数の処理はブラウザーによって違い、切り捨てや四捨五入で処理されます。

また、ブラウザー側の設定で標準フォントサイズを18pxとすれば、
それを基準とした計算がそれぞれ処理されて大きく見えるようになります。

px、emの違いを理解する

では、変化しないpx指定と変化するemの様子を試してみましょう。

今回はGoogle Chromeを使ってみます。
※もしChromeのフォントサイズを「中」以外に設定している方は、
「中」にしておいてください。

下記のtest.htmlとstyle.cssをテキストエディタで作成し、
デスクトップに新しいフォルダーを作って保存しましょう。

[test.html] [style.css] では、Chromeでtest.htmlを開いて確認しましょう。

フォントサイズ指定の初期状態
ピクセル指定では16pxを、em指定では1emを指定していますが、
3行の段落とも同じフォントサイズになっていますね。
これでブラウザーの標準サイズが16pxであるとわかります。

ここから、Chromeの設定を変更して、フォントサイズを「大」にしてみます。
Chromeの右上の三本線のアイコンをクリックして、「設定」を選びます。

ブラウザーの設定変更手順

Chromeの設定画面が開きますので、その中から「ウェブコンテンツ」を探します。

画面の一番下に「詳細設定を表示…」と出ている場合は、
これをクリックして詳細設定を表示させます。

その中にある「フォントサイズ:」の隣の「中」となっているプルダウンメニューから
「極大」を選びます。

ブラウザーのフォント変更画面

設定を変更した直後に、test.htmlを見てみるとフォントサイズが変わっていますね。

フォントサイズが極大になった画面

実際にどのくらい大きくなっているのか確認してみます。
もう一度設定画面を開き、設定画面の「フォントをカスタマイズ」ボタンを
押してみましょう。

ブラウザーのフォントカスタマイズ選択画面

開いたウィンドウの「標準フォント」の隣に、実際のピクセルフォントサイズが
「24」になっていることが確認できます。

フォントサイズが24pxになっている画面

標準フォントサイズである1行目と、1emを指定した3行目の文字が
24pxのサイズに変わっているということですね。

しかし、px指定した文字だけは変化がないです。
「絶対値」で指定したため、固定のサイズとなっているわけです。

px、em指定のメリット・デメリット

ここまでで確認したように、可読性の面からみても読んでもらいたいテキストならば、
ブラウザー設定に依存するフォントサイズはemで指定したほうがいいでしょう。

ユーザー自身が読みやすい環境で、自然な状態で読んでもらえる可能性は高いですね。

逆に固定サイズのpx指定は、読ませる文章というよりも
デザイン上変化させたくない部分に使うといいかもしれません。

例えば、ボタンやタブといった箇所の、フォントがブロック要素から
はみ出したりしないようpx指定するのがよさそうです。

%指定はどう使う?

%指定についても、もちろんemと同様に使えますが、
ちょっと古いInternet Explorerで、em指定がうまくいかなくなるといったバグが
あったようです。

そのバグが新しいバーションで直ったのかどうか検証はできていませんが、
不安がある場合には%指定するのが無難でしょう。

まとめ

フォントサイズの指定方法は、必ずしもemを使いましょう!ということでは
ありませんが、ユーザビリティの観点からem指定を使うのがいまどきの主流です。

ちなみに、emで指定する際、表示される実際のピクセルフォントサイズから
emサイズをいちいち計算するのはちょっとした手間ですよね。
pxをemに自動計算してくれるサイトがありますので使ってみるのもひとつの手です。

pxtoem

http://pxtoem.com/

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【コピペで使える】CSS3でデザインされたテキストエフェクトのソース30選