調和数列の文字サイズをCSS変数で再現

このブログの文字サイズはすべて調和数列に基づいて設定している。これについては下記のサイトで提言されているものを参考にした。

文字サイズの比率と調和 - シフトブレイン／スタンダードデザインユニット

この数列で文字サイズを決定することのメリットとして、全角でベタ打ちした文章であれば、どの文字サイズでも両端がすっきり揃うというのが挙げられる。

といえども、ブログのような文字が不確定な場所でそのような場面になることは少なく、実際にこのブログの本文ではtext-align: justifyまで指定してしまっており、あまりそれらの恩恵を受けることはできていない。

しかし、調和数列というルールに則ってデザインすることで、文字サイズに関して頭を悩ませる必要がなくなるのと、変数を利用することで数字自体を隠蔽することができるので、意味は十分にある。

CSS

CSSのカスタムプロパティで実装してみる。

:root {
  --num: 8;
  --size-l3: calc(var(--num) * 1em / (var(--num) - 3));
  --size-l2: calc(var(--num) * 1em / (var(--num) - 2));
  --size-l1: calc(var(--num) * 1em / (var(--num) - 1));
  --size-s1: calc(var(--num) * 1em / (var(--num) + 1));
  --size-s2: calc(var(--num) * 1em / (var(--num) + 2));
  --size-s3: calc(var(--num) * 1em / (var(--num) + 3));  
}

--numの数字を小さくすれば、文字サイズ間の開きは大きくなり、反対に大きくすれば小さくなり細やかに指定できるようになる。SassやStylusとは違い、デベロッパーツールで数字を変化させながらプレビューできるので面白い。