font-sizeはremで指定することが多くなりましたが、長いことpxでやってきたもので、いまいちどのくらいの大きさなのかピンとこないことがあります。
というわけで、pxとremの大きさを比較した一覧を用意しましたので、コピペで使ってください。僕もこの記事使って仕事します。
pxとremの大きさ比較一覧
というわけで、pxとremの比較した一覧表です。
CSSでhtmlにfont-sizeを16px以外の大きさを指定した場合には大きさが異なりますので、そこでは大きさを指定していない場合の大きさ比較です。
| 10px | 0.625rem |
| 11px | 0.687rem |
| 12px | 0.75rem |
| 13px | 0.812rem |
| 14px | 0.875rem |
| 15px | 0.937rem |
| 16px | 1rem |
| 17px | 1.0625rem |
| 18px | 1.125rem |
| 19px | 1.1875rem |
| 20px | 1.25rem |
| 21px | 1.3125rem |
| 22px | 1.375rem |
| 23px | 1.4375rem |
| 24px | 1.5rem |
| 25px | 1.5625rem |
| 26px | 1.625rem |
| 27px | 1.6875rem |
| 28px | 1.75rem |
| 29px | 1.8125rem |
| 30px | 1.875rem |
| 32px | 2rem |
| 34px | 2.125rem |
| 36px | 2.25rem |
個人的には17pxとか23pxといった大きさってほぼ使わないんですけども、一応10pxから30pxまでは全部用意しておきました。
10pxから16pxくらいは結構細かく使うんですよね。
サイズの単位変換ツール
元のサイズを入力したら他の単位での数値を出力してくれるツールもあります。
上記の一覧表にない数字を調べたい場合はこちらをご活用ください。
最後に
「サイト全体をremで指定したいものの、クライアントさんからpxで大きさを指定された」という場合に便利なので、こちらの記事をブックマークに入れるなどして活用してもらえたら嬉しいです。
僕自身も今後何度もこの記事に助けてもらうと思います。