フォントサイズの話

フォントサイズの話

投稿記事by admin » 2014年7月04日(金) 2:16 pm

まずフォントサイズを指定するときに固定サイズにする場合に、よく見かける単位として「px」と「pt」がある。一般的にWebなどでは「px」を、Wordなどでは「pt」をよく見かける。で、その2つについてまとめる。

下の表をみるとWindowsでは左右の2つのサンプルが同じ大きさに見えるはずだがMacなどでは左側が大きく見えるはずである。


サイズ サンプル サイズ サンプル
11px あいうえお 8.25pt あいうえお
12px あいうえお 9pt あいうえお
13px あいうえお 9.75pt あいうえお
14px あいうえお 10.5pt あいうえお
16px あいうえお 12pt あいうえお
24px あいうえお 18pt あいうえお
30px あいうえお 22.5pt あいうえお

この違いはピクセル(px)とポイント(pt)の単位について考えることで理解できる。ポイントは長さの単位の1つであり、「1ポイント = 1/72インチ」とされている。逆にピクセルは情報としてのサイズであり、その情報を表示するものによって長さは変わってくる。たとえばWindowsの場合の解像度は96dpi(1インチ = 96ドット)なので、「1ピクセル = 1/96インチ」となる。Macの場合は解像度が72dpi(1インチ = 72ドット)なので「1ピクセル = 1/72インチ」となる。以上のことからポイントとピクセルの間には以下の関係が成り立つ。
•1pt = 96/72 px (Win) = 1 px (Mac)

ピクセルが実際のモニタ上でのサイズに当たるので、仮にフォントサイズをポイントで指定した場合はOSによって文字のサイズが異なることが分かる。つまりモニタでOSに寄らず一様のデザインで文字を表示させたい場合はポイント単位(pt)ではなくピクセル単位(px)でフォントサイズ(font-size)を指定するべきである。

次に相対サイズに対して考える。FirefoxやChrome,Operaといったブラウザはデフォルトで設定されているフォントのサイズは16pxになる。IEも文字のサイズを「中」にすると16pxとなる。その場合は下記のような対応となる。


サイズ サンプル サイズ サンプル
11px あいうえお 68% あいうえお
12px あいうえお 75% あいうえお
13px あいうえお 81% あいうえお
14px あいうえお 87% あいうえお
16px あいうえお 100% あいうえお
24px あいうえお 150% あいうえお
30px あいうえお 187% あいうえお
アバター
admin
管理人
 
記事: 81
登録日時: 2014年3月26日(水) 3:44 pm

Return to html全般

オンラインデータ

このフォーラムを閲覧中のユーザー: なし & ゲスト[1人]

梓文社-中国語教室 〒721-0973 福山市南蔵王町6-25-4
cron