はじめまして。アドップのデザイナーKDです。

 

今回はWeb上(CSS)で使用されるフォントの単位についてお話しします。

※CSSとはWebページなどのレイアウト・デザインに関する情報を記述したスタイルシートの一種。

 

皆さんはWeb上(CSS)で使用されるフォントの単位は
いくつあるかご存知でしょうか?

 

Web上(CSS)では、フォントのサイズに限らず、
長さを指定する属性が沢山あるため、使用されるサイズ単位もいくつかあり、
場合によって使いわけられます。

主に大きくわけて《絶対単位》と《相対単位》の2種類があります。

 

《絶対単位》は、主に5種類にわけられます。

 

  • pt(ポイント)

1[pt]=1/72[in]、72[pt]=1[in]

mmで表すと1[pt]=0.352778[mm]です。

pt(ポイント)は、主に文字の体裁で使用され、出版において使用される長さの単位です。

 

  • in(インチ)

ヤード・ポンド法の長さの単位。1[in]=12pt、1[in]=25.4[mm]です。

欧米で用いられる長さの単位です。

日本では、インチというヤード•ポンド法に計量単位を使用することは、
特別の場合以外は計量法上、禁止されています。

 

  • cm(センチメートル)

1[cm]=10[mm]

 

  • mm(ミリメートル)

1[mm]=0.1[cm]

cm(センチメートル)やmm(ミリメートル)はメートル法で定められた長さの単位に分類されます。

 

  • pc(パイカ)

1[pc]=12[pt]で主にページ周囲のマージンやレイアウトに使用。

mmで表すと1[pc]=4.233336[mm]、約4[mm]です。

1[in]を基準にした印刷の単位で、欧文活字の大きさのひとつです。

 

 

[Point]

《絶対単位》で、文字など指定すると、ユーザーが文字を大きくしたりする操作ができないため、
《相対単位》で指定するのがベターです。

 

《相対単位》とは…

ブラウザの設定・環境に依存して可変的にサイズを指定する単位のことを指します。

主に下記の4種類があります。

 

  • px(ピクセル)

使用している画面表示の解像度に対する相対指定。

但し、同じサイズの画面でも、解像度によって大きさが異なるため、
相対単位とされていますが、絶対単位と解釈されます。

 

  • em(エム)

ブラウザで設定されている文字サイズの高さを[1]として相対的に指定。

 

  • ex(エックスハイト)

ブラウザで設定されている文字サイズの、小文字の高さを[1]として相対的に指定。

 

  • %(パーセント)

ディフォルトの文字サイズを100%として相対的に指定。

 

[Point]

通常フォントサイズのプロパティを指定しない時のブラウザのサイズは16pxになります。

文字サイズの調整はWeb上では頻繁に使用されるので
下記図を参考にしてください。

 

 

まとめ

色々とお話ししてきましたが、
結果的にどの単位を使用すればいいの?
と疑問をお持ちかもしれません。

結論から言うと、Web上(CSS)でのフォント単位に決まりはありません。
しかし、要素の幅・高さの指定や画像の大きさなどは、

ほとんどpx指定がされているのでpxを意識した方が
レイアウトなど考えやすくなるかと思います!

ただ、注意しなければならないのは、pxで文字サイズを指定すると、
解像度によって大きさが異なるため、
%(パーセント)指定で考えるとわかりやすいかと思います。
ぜひ参考にしてみてください。

 

 

 

お見積り・その他、ご相談などお気軽にご連絡ください。