文字サイズスケール

基準の文字サイズと比率から、見出し（h1〜h5）・本文・小さい文字のサイズを等比で作ります。px／rem の一覧、日本語の見本、CSSカスタムプロパティのコードが同時に出ます。

基準サイズ（本文）

比率

比率（自由入力）

rem の基準（html の文字サイズ）

小数の丸め桁

本文の行間（line-height）

コードの単位

h1〜small への割り当ても出す

見本文

段階の一覧

用途	変数	px	rem	行間

日本語（全角の漢字・かな）は字面が四角くいっぱいに詰まっていて、同じ px でも欧文より大きく・重く見えます。比率は 1.125〜1.25 くらいの控えめなものが使いやすく、1.5 以上だと h1 が本文の7倍以上になり画面からあふれがちです。
スマホでは比率を小さく、PCでは大きくすると収まりが良くなります。画面幅で連続的に変えたいときは「CSS clamp() 計算機」と組み合わせてください。
日本語の本文の行間は 1.7〜2.0 程度が読みやすいとされます（W3C「日本語組版処理の要件」では行間を文字サイズの50〜100％、line-height 1.5〜2.0 に相当）。見出しは行数が少ないので 1.2〜1.5 に詰めます。
rem はルート（html）の文字サイズが基準で、ブラウザの初期値は 16px です。html に 62.5%（＝10px）を指定しているサイトなら「rem の基準」を 10 にします。
小さい文字は 12px を下回ると読みにくく、注釈以外では避けるのが無難です。

計算式：各段のサイズ＝基準サイズ×比率^段（本文＝0段、h5＝1段 … h1＝5段、small＝−1段）。rem＝px÷rem の基準。行間は本文を入力値とし、見出しは1段ごとに0.12ずつ小さく（下限1.2）した目安です。

比率の名前は音程（短3度＝6:5 など）に由来するモジュラースケールの呼び方です。表示は指定桁で四捨五入しています。デザインの目安としてお使いください。入力はこのブラウザ内だけで計算し、送信しません。

Webサイトやスライドの見出し・本文・注釈の文字サイズを、基準サイズと比率から等比で決めるためのツールです。h1〜smallの各段のpx・rem・行間の一覧と日本語の見本、そのまま貼れるCSSカスタムプロパティが一度に出ます。

「基準サイズ（本文）」に本文の文字サイズをpxで入れます（初期値は16px）。
「比率」で短2度（1.067）〜黄金比（1.618）から選びます。好きな値を使うときは「自由入力」を選び、「比率（自由入力）」に数字を入れます。
html の文字サイズを変えているサイトなら「rem の基準」を合わせ、「小数の丸め桁」「本文の行間（line-height）」も必要に応じて変えます。
「段階の一覧」と「プレビュー」で大きさと行間を確かめます。「見本文」を書き換えると自分の文章で確認できます。
「コードの単位」でremかpxを選び、「CSSをコピー」で --fs-0 などの変数を書き出します。「h1〜small への割り当ても出す」を外すと変数だけになります。

各段のサイズは基準サイズ×比率の段数乗で、本文が0段、h5が1段…h1が5段、smallが−1段です。remは px÷rem の基準で計算し、指定した桁で四捨五入しています。
行間は本文を入力値とし、見出しは1段ごとに0.12ずつ小さく（下限1.2）した目安です。日本語の本文は1.7〜2.0程度が読みやすいとされ、W3C「日本語組版処理の要件」の行間（文字サイズの50〜100％）を参考にしています。
日本語は欧文より字面が大きく見えるため、比率は1.125〜1.25程度の控えめなものが扱いやすい目安です。最終的には実際の画面で確認してください。
プレビューは160pxを超える段を160pxで表示しています。一覧とCSSの値は計算どおりです。
入力はブラウザ内だけで計算され、設定はこのブラウザに保存されます。

本文16pxで比率1.25だとh1は何pxになりますか？

16×1.25の5乗で約48.83px（3.052rem）です。「比率」で1.25 長3度を選ぶと一覧のh1の行で確かめられます。

日本語のサイトにはどの比率が向いていますか？

漢字やかなは欧文より大きく見えるので、1.125〜1.25くらいの控えめな比率がまとまりやすい目安です。1.5以上だとh1が本文の7倍を超え、スマホでは1行に収まりにくくなります。比率を切り替えてプレビューで見比べてください。

html に font-size: 62.5% を指定している場合はどうすればいいですか？

62.5%はブラウザ初期値16pxの場合10pxになるので、「rem の基準」を10にしてください。remの値が10px基準で計算し直されます。

画面幅に応じて文字サイズを変えたいときは？

このツールは固定のスケールを出します。スマホ用とPC用で比率を変えて2通りの値を出し、その間を「CSS clamp() 計算機」でつなぐと、画面幅に合わせてなめらかに変えられます。