css font-sizeの指定方法をおさらいする

こんにちは、つみきのフロントエンドエンジニアの佐藤です。

今回は CSS の font-size の指定について見てみたいと思います。


font-size プロパティ

CSS の font-size プロパティは Web ページのフォントサイズを指定するプロパティです。コーダーやデザイナーの方にも馴染み深いのではないでしょうか。

このフォントサイズは CSS のその他のプロパティの値の単位で使用可能な、 em と ex の値の計算にも使われます。 フォントサイズが変わると em と ex で指定している値も変更されるということですね。

概要

初期値medium
適用対象 全ての要素
継承 継承する
相対値の基準親要素の font-size
メディアvisual
計算値絶対値

上記は W3C で定められている概要です。

指定可能な値

指定可能な値としては主に、キーワード指定と length 値(単位指定)での指定の2種類です。

length 値の種別に関しては以下をご参照ください。

https://developer.mozilla.org/ja/docs/Web/CSS/length

キーワード

xx-small, x-small, small, medium, large, x-large, xx-large

ユーザー(ブラウザ)の既定のフォントサイズ(初期値はmedium)を基準とした絶対的なサイズ指定の方法です。

指定サンプルです。

larger, smaller

上記、 xx-small, x-small, small, medium, large, x-large, xx-large と同等なサイズ段階で、親要素の値を基準とした相対的なサイズとなります。

length値

length 値からいくつか抜粋してご紹介します。

相対単位

em

em です。 1em はその要素の親要素のフォントサイズと一致します。例えば親要素のサイズが 20px の場合、その子要素のサイズも 20px となります。

ex

現在用いられているフォント 「 x 」 の 高さを基準とした単位です。一般的に、小文字の高さに相当するようです。また多くのフォントで 1ex はだいたい 0.5em 相当なようです。

rem, vw

rem はルート要素(html)からの相対指定となります。

vw はビューポートに対するパーセンテージです。

例えば下記サンプルの指定では、 5vw ですのでビューポート(windowのwidth)に対する 5% のサイズが指定されます。

なお当単位は IE9 以前では指定できません。

絶対単位

px

px での指定です。静的な値で、OS にも依存せずクロスブラウザで同じサイズでのレンダリングを実現可能です。(ブラウザによっては異なるアルゴリズムが使われている可能性があるため、少し結果に差が出る場合もあるようです。)

また、MDN には注意書きとして以下のようにあります。

注意: フォントサイズを pixel で定義することは、アクセシブルではありません。ユーザーがブラウザからそのサイズを変えられないためです(例えば、視力の不自由な方は、ウェブデザイナーが選んだサイズより大きなフォントにしたいかもしれません)。こうした配慮のあるデザインをしたい場合は、フォントサイズに pixel を使わないようにしてください。

デザインの再現性としては px は有用かと思いますが、アクセシビリティを考慮する場合は注意が必要ですね。

pt

pt での指定です。 DTP でよく用いられる単位かと思います。

最後に

font-size で指定可能な値はこのように様々です。

ケースバイケースではあるかと思いますが、最適な指定ができるように心がけたいですね。

参考:

http://www.w3.org/TR/CSS21/fonts.html#font-size-props

https://developer.mozilla.org/ja/docs/Web/CSS/font-size

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ