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

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

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

調和数列という小難しい名前がついてはいるが、特段難しいものではなく、数学が苦手な人でもぜんぜん理解できるもの。

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

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

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

CSS

CSSのカスタムプロパティでやってみる。

1
2
3
4
5
6
7
8
9
: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の変数でもいいけれど、カスタムプロパティで指定してしまえば、デベロッパーツールでリアルタイムに数字をイジれるのでなんか面白い。