文字サイズを clamp で縮小拡大しているが、縮小率が少なめなのでもっと縮小率を上げたほうが良いか検討

inc2734 commented 1 year ago

↑タイトルは勘違いで、現状 clamp が使われているのは余白まわり（と line-height）のみ。文字サイズは clamp になっていないので、まずは clamp を導入するところからはじめる。

inc2734 commented 1 year ago

unitone-css に流体タイポグラフィのオプションがあるので、そのコードを流用できないか調査する。

https://github.com/inc2734/unitone-css/blob/main/src/helper/_fluid-typography.scss

https://github.com/inc2734/unitone-css/blob/main/src/variables/_variables.scss#L14

https://github.com/inc2734/unitone-css/blob/main/src/app.js

unitone-css では文字サイズの大きさが流体となると同時に js で line-height も流体になるようにしているけど、Snow Monkey はデフォルトを流体にしたいわけなので、js で line-height も流体にしようとすると文字サイズ指定している全ての場所のセレクタを列挙して js を実行させるようにしないといけない（HTML に属性を追加しても良いけど、それはそれで互換性云々）。ということで、あまり現実的ではないので Snow Monkey のほうは line-height は流体にしなくても良いかなと（どうだろう）。

inc2734 commented 1 year ago

オンラインコミュニティに計算式の詳細を書いたのでこちらにも転載します。

Snow Monkey は v19 から調和数列をベースとした文字サイズのスケールを採用しています。

詳しくは下記のページを。 https://standard.shiftbrain.com/blog/harmonious-proportions-in-type-sizes

Snow Monkey ではベース（--_harmonic-sequence-base）が 8 で、

1rem * 8 / (8 - (レベル))

という計算式で文字サイズのバリエーションが生成されます。実際の CSS は下記のようになります。

calc(var(--_harmonic-sequence-base) / (var(--_harmonic-sequence-base) - var(--_font-size-level)));

なので --_font-size-level が 3 だったとすると

1rem * 8 / (8 - 3) = 1.6rem = 25.6px

となります。

で、ベースは 8 なわけですが、このベースの数が大きいほどサイズどうしの間隔が小さくなる、つまり文字サイズ間のジャンプ率が小さくなります。なので

スマホサイズのときはベースが 9 とか 10、PC のときは 8 になるような計算式をclamp() を使って実装しようと思います。

計算式自体はもう既にできているのですが、スマホサイズ用のベースを何にするかは迷っているところです…。

8 の場合

1rem * 8 / (8 - -2) = 0.8rem = 12.8px
1rem * 8 / (8 - -1) = 0.88888rem = 14.22222px
1rem * 8 / (8 - 0) = 1rem = 16px
1rem * 8 / (8 - 1) = 1.14286rem = 18.28571px
1rem * 8 / (8 - 2) = 1.33333rem = 21.33333px
1rem * 8 / (8 - 3) = 1.6rem = 25.6px
1rem * 8 / (8 - 4) = 2rem = 32px
1rem * 8 / (8 - 5) = 2.66666rem = 42.66666px
1rem * 8 / (8 - 6) = 4rem = 64px
1rem * 8 / (8 - 7) = 8rem = 128px

9 の場合

1rem * 9 / (9 - -2) = 0.81818rem = 13.0909px
1rem * 9 / (9 - -1) = 0.9rem = 14.4px
1rem * 9 / (9 - 0) = 1rem = 16px
1rem * 9 / (9 - 1) = 1.125rem = 18px
1rem * 9 / (9 - 2) = 1.12857rem = 20.57142px
1rem * 9 / (9 - 3) = 1.5rem = 24px
1rem * 9 / (9 - 4) = 1.8rem = 28.8px
1rem * 9 / (9 - 5) = 2.25rem = 36px
1rem * 9 / (9 - 6) = 3rem = 48px
1rem * 9 / (9 - 7) = 4.5rem = 72px

10 の場合

1rem * 10 / (10 - -2) = 0.83333rem = 13.33333px
1rem * 10 / (10 - -1) = 0.90909rem = 14.54545px
1rem * 10 / (10 - 0) = 1rem = 16px
1rem * 10 / (10 - 1) = 1.11111rem = 17.77777px
1rem * 10 / (10 - 2) = 1.25rem = 20px
1rem * 10 / (10 - 3) = 1.42857rem = 22.85714px
1rem * 10 / (10 - 4) = 1.66666rem = 26.66666px
1rem * 10 / (10 - 5) = 2rem = 32px
1rem * 10 / (10 - 6) = 2.5rem = 40px
1rem * 10 / (10 - 7) = 3.33333rem = 53.33333px

もしスマホのベースが 10 で PC のベースが 8 だとして、--_font-size-level が 4 だとしたら、スマホでは 1.66666rem、PC では 2rem となります。

inc2734 commented 1 year ago

inc2734 / snow-monkey