PX ⇄ REM と行間

px・rem・em・pt を変換し、読みやすい行間を提案

ファイルは端末の外に出ません
ブラウザ内で処理
無料・登録不要・透かしなし

単位変換

どの欄に入力しても、ほかの欄が自動で変換されます。

rem

プレビュー

タイポグラフィは言葉を目に見える形にする技術です。適切な行長とゆとりのある行間があれば、視線は迷わず次の行へ移れます。

よく使うサイズ

行をクリックすると変換欄に読み込みます。

px	rem	em	pt	vw	行の高さ
10	0.625	0.625	7.5	0.694	1.7
12	0.75	0.75	9	0.833	1.65
13	0.8125	0.8125	9.75	0.903	1.63
14	0.875	0.875	10.5	0.972	1.6
15	0.9375	0.9375	11.25	1.042	1.57
16	1	1	12	1.111	1.55
18	1.125	1.125	13.5	1.25	1.52
20	1.25	1.25	15	1.389	1.5
24	1.5	1.5	18	1.667	1.4
28	1.75	1.75	21	1.944	1.32
32	2	2	24	2.222	1.25
36	2.25	2.25	27	2.5	1.23
40	2.5	2.5	30	2.778	1.2
48	3	3	36	3.333	1.15
56	3.5	3.5	42	3.889	1.13
64	4	4	48	4.444	1.1
72	4.5	4.5	54	5	1.09
96	6	6	72	6.667	1.05

タイプスケール

基準サイズ

比率

+6 · 61px素早い狐 Quick fox3.815rem

+5 · 48.8px素早い狐 Quick fox3.052rem

+4 · 39.1px素早い狐 Quick fox2.441rem

+3 · 31.3px素早い狐 Quick fox1.953rem

+2 · 25px素早い狐 Quick fox1.563rem

+1 · 20px素早い狐 Quick fox1.25rem

0 · 16px素早い狐 Quick fox1rem

-1 · 12.8px素早い狐 Quick fox0.8rem

-2 · 10.2px素早い狐 Quick fox0.64rem

clamp() による可変フォントサイズ

2 つのビューポート幅の間でなめらかに拡大し、範囲外では固定されます。

最小サイズ

最大サイズ

最小ビューポート

最大ビューポート

font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);

ビューポート幅をシミュレート900px → 19.94px

素早い狐 Quick fox

幅 375 px のとき

16px

幅 768 px のとき

18.95px

幅 1024 px のとき

20.88px

幅 1440 px のとき

24px

rem

行の高さ

0.625

7.5

0.694

1.7

0.75

0.833

1.65

0.8125

9.75

0.903

1.63

0.875

10.5

0.972

1.6

0.9375

11.25

1.042

1.57

1.111

1.55

1.125

13.5

1.25

1.52

1.25

1.389

1.5

1.667

1.4

1.75

1.944

1.32

2.222

1.25

2.25

2.5

1.23

2.5

2.778

1.2

3.333

1.15

3.5

3.889

1.13

4.444

1.1

4.5

1.09

6.667

1.05

PX ⇄ REM と行間の使い方

ルートと親要素のフォントサイズを基準に px・rem・em・pt・%・vw を相互変換し、おすすめの行の高さと行長を表示します。タイプスケールや clamp() による可変フォントサイズも作成できます。

「基準」でルートのフォントサイズ、親要素のフォントサイズ、ビューポート幅を設定します。

「単位変換」のどれかの欄に数値を入力すると、ほかの単位も連動して変わります。

そのサイズの「おすすめの行の高さ」と「読みやすい行長」を確認します。

必要に応じて比率から「タイプスケール」を作ったり、「clamp() による可変フォントサイズ」を作ったりして CSS をコピーします。

よくある質問

1rem は何ピクセルですか？

1rem はルート（<html>）のフォントサイズと同じで、ブラウザの初期値は 16 px です。サイトの基準が違う場合は「ルートのフォントサイズ」を変更してください。

rem と em の違いは？

rem はルートのフォントサイズ、em と % は親要素のフォントサイズが基準です。em を正しく変換するには「親要素のフォントサイズ」を設定してください。

おすすめの行の高さはどう決めていますか？

一般的な組版の考え方に沿っており、本文はおよそ 1.5、大きな見出しほど詰めた値になります。4 px グリッドに揃えた値もあわせて表示します。

clamp() の生成機能は何に使いますか？

2 つのビューポート幅の間で文字サイズがなめらかに変わり、その範囲外では固定される font-size を書き出します。「ビューポート幅をシミュレート」で任意の幅での見え方を確認できます。

印刷用の pt にも変換できますか？

できます。pt は CSS の定義どおり 72 pt = 96 px で換算するので、12 pt は 16 px になります。

PX ⇄ REM と行間の使い方

「基準」でルートのフォントサイズ、親要素のフォントサイズ、ビューポート幅を設定します。

「単位変換」のどれかの欄に数値を入力すると、ほかの単位も連動して変わります。

そのサイズの「おすすめの行の高さ」と「読みやすい行長」を確認します。

必要に応じて比率から「タイプスケール」を作ったり、「clamp() による可変フォントサイズ」を作ったりして CSS をコピーします。

よくある質問

1rem は何ピクセルですか？

rem と em の違いは？

おすすめの行の高さはどう決めていますか？

一般的な組版の考え方に沿っており、本文はおよそ 1.5、大きな見出しほど詰めた値になります。4 px グリッドに揃えた値もあわせて表示します。

clamp() の生成機能は何に使いますか？

印刷用の pt にも変換できますか？

できます。pt は CSS の定義どおり 72 pt = 96 px で換算するので、12 pt は 16 px になります。