px・pt・em・rem・vwを相互変換します。Web制作・DTPデザインに便利です。
入力
| px | pt | rem | vw(375px) |
|---|---|---|---|
| 10 | 7.5 | 0.625 | 2.67 |
| 12 | 9 | 0.75 | 3.2 |
| 14 | 10.5 | 0.875 | 3.73 |
| 16 | 12 | 1 | 4.27 |
| 18 | 13.5 | 1.125 | 4.8 |
| 20 | 15 | 1.25 | 5.33 |
| 24 | 18 | 1.5 | 6.4 |
| 32 | 24 | 2 | 8.53 |
| 48 | 36 | 3 | 12.8 |
16px(96dpiの場合)は12ptです。ptはポイントで1pt=1/72インチ。Webの96dpiでは1pt=96/72≒1.333pxとなります。
emは親要素のフォントサイズを基準とした相対単位、remはルート要素(html)のフォントサイズを基準とした相対単位です。remの方がネストによる複雑さがなく管理しやすいです。
vwはビューポート幅(Viewport Width)に対する相対単位で、1vw=画面幅の1%です。レスポンシブデザインで文字サイズを画面幅に合わせて変化させる際に使います。
ブラウザのデフォルトは16px(12pt)です。本文は14px〜18pxが読みやすいとされ、スマートフォンでは15〜16px以上が推奨されます。
DTPは印刷の解像度(72dpiや96dpi)を基準にptを使い、Webはスクリーンのピクセルベースでpxやem/remを使います。単純変換では見た目が合わないことがあります。