もっと細かい値を基準にしたVertical Rhythm - yuhei blog本文のline-heightを基数としたVertical Rhythmは、値が大きくなりすぎるのでどうしても細かい調整がしたくなってうまくいかない。 それに悩んでいて@terkelに聞いてみたら、「本文のline-heightより細かい数字を基準にしてる、4pxとか。Material Designも多分そういうルールに則ってる」という話を聞いた。なるほど良さそうと思ったものの、細かい数字になってくると計算がめんどくさそう。 Rhythmic Sizingを利用できれば、それはかなり簡単に実現できる。要素のサイズやline-heightの値を、必ず指定した数値の倍数になるようにできるというやつだ。以下はline-heightを4pxの倍数にする例。 html { line-height-step: 4px; } .text { font-size: 1rem; // 16px line-he
