【CSS】フォントサイズのpxの大きさをremにするといくつなのか知りたくなった時に見たい大きさ一覧表

【CSS】フォントサイズのpxの大きさをremにするといくつなのか知りたくなった時に見たい大きさ一覧表

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で大きさを指定された」という場合に便利なので、こちらの記事をブックマークに入れるなどして活用してもらえたら嬉しいです。

僕自身も今後何度もこの記事に助けてもらうと思います。