2値基準のサイズ決め

黄金比を始めとした固定比によるサイズ決めは、SassやCSS Custom Propertiesによって一定の市民権を得たように思う。ただ黄金比(1.618)と1の間のサイズが欲しくなることも多い。例えば見出しのline-heightプロパティーの値だったり、フォーマット済みテキストの文字サイズだったり、だ。HTML版・普通のHTMLの書き方では固定比を1.7にして、それを11.25にかけ合わせていくというアプローチにした。最近よく使う手法で、僕の中ではDual Scale Sizingという名前で呼ばれている。

11.25にそれぞれ1.7を掛ける(で割る)だけなので、以下のようにきれいにばらけた数値が生成される。

0.204   0.346   0.588   1.000   1.700   2.890   4.913
    0.254   0.433   0.735   1.250   2.125   3.613   6.141

例えば1.7を通常のline-heightプロパティーに使いつつ、1.25を見出しや整形済みテキストに使う。また整形済みテキストの文字サイズを0.735remにしたり、表の枠線幅を0.254remにしたりもする。ここに載っていない大きいサイズは、17.748rem1.25 * (1.7 ** 5))をサイドバーの幅に使い、41.034rem1 * (1.7 ** 7))をコンテンツの幅に使ったりする。

marginプロパティーでも1系を上下に、1.25系を左右に、と使い分けるのも良い。行間に伴う余白の微妙な不揃い感が、意図的に余白を作りだしているように変わる(気がする)。

コンテキストで1.7固定比を調節するのも悪くないが、それだとせっかく排した主観に依存するように戻ってしまう。また、固定比を増やすと、ばらけ方がまちまちになり、「これくらいのサイズがほしい」という時にどれを使えばよいか直感的でなくなってしまう。この記事で書いてきたようにベースを増やすと、わかりやすく、そこそこ使い勝手の良い数値が手に入る。


HTML版・普通のHTMLの書き方ではあまり真面目にCSSは書いていない。セレクターを見ればわかる。とにかく自動生成の手間をかけない都合上、class属性を排除したので、大きな制限があるからだ。ただできることはなるべくやってあげようとはした。

main section h1 {
  /* 3.913 = 4.913 - 1 */
  margin-top: 3.913rem;
  padding-top: 1rem;
}

:targetでやる手法もお気に入りだが、このような形であらかじめpadding-topプロパティーを確保するのもお手軽だ。calc()var()を使うともうちょっとかっこよく書ける。