line-height の計算式の見直し

inc2734 commented 2 years ago

文字サイズが 1rem（= 16px）のときの half leading の固定値を他の文字サイズのときも使うとちょうど良さそう。 half leading が .3 だとすると、16px * 1.6 - 16px = 9.6px、よって 1em + 9.6px。

inc2734 commented 2 years ago

に指定するなら単位付きでも問題なさそう？

inc2734 commented 2 years ago

font-size: 16px で line-height: 1.6 のとき、font-size: 128px における line-height の理想値が line-height: 1.1 だとすると、line-height の計算式は -0.0044642857143x + 1.6714285714286 となる（x は px のフォントサイズ）。

つまり、16px : 1.6 にしたい場合は line-height: calc(-0.0044642857143 * {表示したい文字サイズの倍数} + 1.6714285714286) となる。この角度を維持したままフォントサイズ 16px のときに line-height: 1.8 や line-height: 1.4 にするなどできるようにしたい。

inc2734 commented 2 years ago

ｙ＝ -0.0044642857142857x + 1.6714285714286
↓
1.6 = -0.0044642857142857 * 16 + z
z = 1.6 - (-0.0044642857142857 * 16)
↓
line-height: calc(-0.0044642857143 * 16x + (1.6 - (-0.0044642857142857 * 16)));
↓
line-height: calc(var(--line-height-slope) * var(--base-font-size) * #{$max-font-size} + (1 + var(--half-leading) * 2 - (var(--line-height-slope) * var(--base-font-size))));
↓
line-height: calc(var(--line-height-slope) * var(--base-font-size) * #{$max-font-size} - var(--line-height-slope) * var(--base-font-size) + 2 * var(--half-leading) + 1);

が基本として、フォントサイズが基準の16pxより小さいときは 1.6固定にしたい、文字サイズがどんどん大きくなると line-height が小さくなっていくので、どんなに小さくなっても最小値は維持したいとなると、clamp を使うのが良さそう。

inc2734 commented 2 years ago

CSS だけで line-height も流動的にするのは無理そう（文字サイズの拡大率を計算で導き出す方法がわからない）なので、基本は non-fluid typography で、helper で fluid typography にする。そして fluid typography のときは js で拡大率を計算させるようにする。

inc2734 commented 2 years ago

A = (1, 1.6) // 1rem のとき 1.6
B = (8, 1.1) // 8rem のとき 1.1
y = -0.0714285714286x + 1.6714285714286 // y = line-height, x = 文字サイズの倍数

// 1.6714285714286 を求める
1.6 - -0.0714285714286 = z
1.6 = -0.0714285714286 + z
-0.0714285714286 + z = 1.6
z = 1.6 + 0.0714285714286
z = 1.67142857143

inc2734 / unitone-css

line-height の計算式の見直し #5