はじめに
今までフォントサイズとか行間を感覚で決めていたんですが、数学的（？）にきっちり決めることで、綺麗になったので、考え方を共有します。
完成品
描画結果
左が普通の表示で、右はわかりやすく、背景に縦方向のグリッドを表示したものです。
CSS
変数を使用して以下のようにしています。
:root {
--base-font-size: 16px;
--vert-grid-size: calc(var(--base-font-size) * 2);
}
h1 {
font-size: calc(var(--base-font-size) * 3.000);
font-weight: 700;
line-height: calc(var(--vert-grid-size) * 2);
}
h2 {
font-size: calc(var(--base-font-size) * 2.498);
font-weight: 700;
line-height: calc(var(--vert-grid-size) * 2);
}
h3 {
font-size: calc(var(--base-font-size) * 2.080);
font-weight: 700;
line-height: calc(var(--vert-grid-size) * 2);
}
h4 {
font-size: calc(var(--base-font-size) * 1.732);
font-weight: 700;
line-height: calc(var(--vert-grid-size) * 2);
}
h5 {
font-size: calc(var(--base-font-size) * 1.442);
font-weight: 700;
line-height: calc(var(--vert-grid-size) * 2);
}
h6 {
font-size: calc(var(--base-font-size) * 1.201);
font-weight: 700;
line-height: calc(var(--vert-grid-size) * 2);
}
p {
font-size: var(--base-font-size);
font-weight: 400;
line-height: var(--vert-grid-size);
}なんで作ったの
Web 作るときのテンプレートを作りたいなっていうだけです。
ただ、せっかく作るなら綺麗で汎用性の高いものを作ろうとした結果です。
フォントサイズは等比数列にしているのですが、これは等差数列に比べ、自然にサイズが変わっていくからです。
人の五感は対数に比例するという ヴェーバー‐フェヒナーの法則 があるので、おそらく正しいです。自然界や人が良い（美しい）と思うものを思い浮かべると納得いく気がします。
また、縦方向のグリッドに関しては、ノートの罫線とかを想像すれば分かりやすいと思いますが、やっぱり揃っている方が綺麗ですよね。現在の Web のほとんどのページは縦に伸びていくので意識しない限り縦方向にグリッドが作りにくいので、少なくとも文字（文章）ぐらいはきっちり揃えていきましょうということです。
フォントサイズ
フォントサイズは <p> のサイズを基準値（今回の例は 16px ）として <h1> がその3倍になるような等比数列にします。
<p> から <h1> にかけて常に 1.1 倍みたいな公比の決め方であれば計算は簡単なんですが、今回は最終的に3倍になるという決め方をしています。この公比は累乗根（冪根）となるため、計算が少し複雑です。
3倍まで拡大し、<p> から <h1> までは6ステップあるので、以下の式で係数が求められます。i は各段階（<p> が 0 で <h1> が 6）が入ります。
\sqrt[6]{3^{i}}ただし、CSS の calc() では累乗根のような複雑な計算ができません。そこであらかじめ計算機やプログラムを使って求めておきます。
累乗根は普通の累乗の計算に置き換えられるので、使用するものが累乗根に対応していない場合は、以下の式を用いましょう。
({3^{i}})^{\frac{1}{6}}行間
縦方向のグリッドは最小単位を <p> のフォントサイズの2倍としています。
この値を基準に <h1> から <h6> に対しては2グリッド分を与えています。ただ、後半（ <h5>, <h6> ）あたりは余白が大きくなってしまうので1グリッド分でも良いかなとも思っています。その辺は臨機応変に。
おわりに
テンプレの完成目指して頑張ります。