Webサイト制作において、フォントサイズは非常に重要ですよね。僕の会社では、フォントサイズを指定するとき、PCサイトでは「％」、SPサイトでは「px」で指定しています。
その際、％表示を計算するのが面倒くさいので、この機会にフォントサイズ「px→％」表記一覧・早見表を作成します。
目次
フォントサイズのパーセント表記一覧・早見表の計算式
表示したいサイズ / 基本サイズ * 100
小数点以下は切り上げて計算します。表示したいサイズは10~30pxとします。
主要ブラウザのデフォルトフォントサイズは16px
各ブラウザごとに、デフォルトのフォントサイズが違うと思うのですが、今回は主要ブラウザが採用している１６pxに限定して作成します。シンプルイズベストです。
フォントサイズのパーセント表記一覧・早見表
フォントサイズ１６％
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%
全て計算式に則って計算しました。２回計算したので、間違いないと思います。
まとめ
Webサイト制作の経験値が少ないときは、フォントサイズの％表示に慣れなく、意外と厄介だったりします。慣れるまでは、是非こちらのフォントサイズ表記一覧・早見表をご活用ください。