> | > 印刷用CSSの文字サイズ単位はpt?

印刷用CSSの文字サイズ単位はpt?

小川貴史

このエントリーをはてなブックマークに追加

印刷用CSSの文字サイズ単位

CSSの文字サイズの単位は何を使っていますか?IEで可変させることを考えてemや%、smallなどでしょうか。では、印刷用CSSの文字サイズ単位はどうでしょうか。pxでしょうか?emでしょうか?

プリントアウトのことを考慮している(ように見える)サイトのCSSをのぞいてみると、文字サイズをpt(ポイント)で指定しているサイトをよく見ます。なぜptなのでしょうか?

pxはPCのモニター上でのサイズ単位として使用されます。そしてptは印刷(出版)での物理的なサイズ単位(72pt = 1インチ = 2.54cm)として使用されます。PCのモニター解像度はdpi(dot per inch(1インチの中に何ドット))で表され、CSSでは「1pt = 1/72インチ」となり「1px = 1ドット」となります。

この事からわかるとおり、ptの場合はモニター解像度(dpi)が変わっても印刷サイズは変わりませんが、pxの場合はモニター解像度が変わると印刷サイズが変わります。

印刷用CSSの文字サイズ単位は"pt"がベスト

まあ、ややこしい話はここまでにして実際の物を見てください。

各dpi、各単位での文字サイズ

上記画像は、それぞれptとpxでサイズ指定をした文字を、モニター解像度を変えてプリントアウトし、スキャナで取り込んだ物です。見てわかるとおり、ptはモニター解像度で変化しませんが、pxはモニター解像度が変わるとサイズが変わります。

Winの標準的なモニター解像度は96dpiです。Macのモニター解像度も、OS9のときは72dpiでしたがOSXになってからは96dpiになりました(たぶん)。

MacもWinも同じ96dpiになったのであんまり影響はなくなってきているのかなと思いますが、どんな環境でも同じ文字サイズでプリントアウトされるようにということで、印刷用CSSの文字サイズは「pt」で指定するのがベストではないでしょうか。

通常は10ptか11ptで

ちなみに指定するpt数ですが、通常は10ptか11ptにすると文字サイズのバランスが良いかと思います。高齢者を対象にしたサイトなどの場合は、12pt以上にするとアクセシビリティが向上するでしょう。

おまけ

自分のモニター解像度がよく分からない場合は、下記HTMLにアクセスしてみてください。何dpiかがわかります。

このエントリーをはてなブックマークに追加

読者のコメント

コメントを投稿

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

(HTMLタグは使用できません)

トラックバック

このエントリーのトラックバックURL
http://www.ibnet.ne.jp/mt/mt-tb.cgi/1017

ホーム > CSS | Webデザイン > 印刷用CSSの文字サイズ単位はpt?

このページの先頭へ