読者です 読者をやめる 読者になる 読者になる

人生は暇つぶし

新卒入社一ヶ月で会社を辞めたゆとり世代が楽しく働くための方法論を共有します。

フォントサイズ「px→%」表記一覧・早見表

まとめ
スポンサーリンク

Webサイト制作において、フォントサイズは非常に重要ですよね。僕の会社では、フォントサイズを指定するとき、PCサイトでは「%」SPサイトでは「px」で指定しています。

 

その際、%表示を計算するのが面倒くさいので、この機会にフォントサイズ「px→%」表記一覧・早見表を作成します。

 

目次

 

フォントサイズのパーセント表記一覧・早見表の計算式

表示したいサイズ / 基本サイズ * 100 

小数点以下は切り上げて計算します。表示したいサイズは10~30pxとします。

 

主要ブラウザのデフォルトフォントサイズは16px

各ブラウザごとに、デフォルトのフォントサイズが違うと思うのですが、今回は主要ブラウザが採用している16pxに限定して作成します。シンプルイズベストです。

 

フォントサイズのパーセント表記一覧・早見表

フォントサイズ16%

10px:63%
11px:69%
12px:75%
13px:82%
14px:89%
15px:94%
16px:100%
17px:107%
18px:112%
19px:119%
20px:125%
21px:132%
22px:138%
23px:144%
24px:150%
25px:157%
26px:163%
27px:169%
28px:175%
29px:182%
30px:188%

全て計算式に則って計算しました。2回計算したので、間違いないと思います。

 

まとめ

Webサイト制作の経験値が少ないときは、フォントサイズの%表示に慣れなく、意外と厄介だったりします。慣れるまでは、是非こちらのフォントサイズ表記一覧・早見表をご活用ください。

 

実例付きフォント字典

実例付きフォント字典