CSS 基準文字サイズ(px)ごとの相対フォントサイズまとめ

CSS 基準文字サイズ(px)ごとの相対フォントサイズまとめ

イメージ

こんばんは、ishidaです。急に肌寒くなってきましたね。

弊社シーブレインは馬車道から目と鼻の先にありますが、その馬車道にて今年も恒例の馬車道まつりが開催されています。11月1日(日)~11月4日(水)まで開催されておりますので、馬車道付近にお越しの際は是非お立ち寄りくださいね。

それはさておき、フォントサイズを指定するときにまずはベースとなる基準のフォントサイズをbody等に指定しますが、サイトによって基準を12pxにしたり、13pxにしたり、たまぁ~に10pxにしたりしてます。

そうなってくると相対指定で20px相当って何%だっけ?ってことがよくあるのと、毎回毎回電卓をたたくのが面倒になったので、ここに基準としてよく使いそうなフォントサイズをメモします。

基準文字サイズ
10px
基準文字サイズ
11px
基準文字サイズ
12px
基準文字サイズ
13px
10px 100% 10px 91% 10px 83% 10px 77%
11px 110% 11px 100% 11px 91% 11px 85%
12px 120% 12px 109% 12px 100% 12px 93%
13px 130% 13px 118% 13px 108% 13px 100%
14px 140% 14px 127% 14px 116% 14px 108%
15px 150% 15px 137% 15px 125% 15px 116%
16px 160% 16px 145% 16px 133% 16px 124%
17px 170% 17px 154% 17px 141% 17px 131%
18px 180% 18px 163% 18px 150% 18px 139%
19px 190% 19px 172% 19px 158% 19px 147%
20px 200% 20px 182% 20px 166% 20px 154%
21px 210% 21px 191% 21px 175% 21px 162%
22px 220% 22px 200% 22px 183% 22px 169%
23px 230% 23px 209% 23px 191% 23px 177%
24px 240% 24px 218% 24px 200% 24px 185%
25px 250% 25px 227% 25px 208% 25px 192%
26px 260% 26px 236% 26px 216% 26px 200%

ちなみにシーブレインでは、デフォルト文字サイズは13pxを基本としています。

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

この記事を読んだ人にオススメ