CSS
typography

タイポグラフィでCSSを書きやすくする

More than 1 year has passed since last update.

前置き

タイポグラフィの意味であったり、その大まかな概要は省きます(見出しを大きくするなど、あたりまえかつデザインに関することが多いため)。

本記事では、CSSを書くときに余白や文字サイズをどの様に決定したらいいのかを経験則やタイポグラフィについて自分が調べた内容から、備忘録レベルでまとめていきます。

目的

普段CSSを書くときにwidthはコンポーネントの個数からパーセントを導き出すのですが、他のプロパティの値は特にルールを決めていませんでした。

それによりコードは汚く、レイアウトもばらつきがありました。

ですので今回はタイポグラフィという理論?を参考にし、CSSのルールを決めることでコードを綺麗にし、レイアウトに規則性を持たせようと思います。

比率

タイポグラフィでは値の決定に比率を用いて、その比率の乗数を変えて値を決定していました。

そうすることでコードやレイアウトに規則性が生まれ綺麗になるのだそうです。

ここで比率の決定方法ですが、何が使用されているのか調べてみたところ、比率は平均して1.5程度で、ばらつきがありました。

それらの比率は見覚えがあったので調べてみたところ、白銀比と呼ばれるような、人が綺麗に感じる比率を用いていることがわかりました。

というわけで比率には白銀比などの綺麗な比率を使用しましょう。

以下にその比率をまとめました。個人的には黄金比が好きですが、他の方の比の採用率は白銀比①がそれなりに多かった様に感じます。

またブラウザは比率に白銀比を使用しているっぽいので白銀比を使うのがいいと思います。

比率名 比率 およその比率
黄金比 1:1.618 約5:8
白銀比① 1:1.414 = 1:√2 約5:7
白銀比② 1:2.414 = 1:1+√2 約5:12
青銅比 1:3.303 約3:9
白金比 1:1.732 = 1:√3 約4:7

値の決定

値の決定ですが先ほど説明した様に、値は比率に沿って大きくしたり、小さくしたりします。
具体的にはルールは以下のようになります。

(余白、高さ、文字サイズなど) = 文字サイズ × 比率^n

nには-1乗などタイミングに合わせた任意の整数を使ってください。
文字サイズにはなにを当てはめてもいいのですが1em1remがおすすめです。

具体的には以下の様に変化していきます。

paddingやmarginは1emに比率をかけることで比率の累乗の値を求める必要が無くなります。
ちなみに乗数は経験則なので、参考程度にしてください。

スクリーンショット 2017-11-29 9.03.41.png

<body>
  <style>
    html {
      font-size: 10px;
    }

    p {
      border: 1px solid;
    }

    p:nth-of-type(2) {
      font-size: 1.414rem;
      padding: 0.7em;
      margin: 1.414em 0;
    }

    p:nth-of-type(3) {
      font-size: 2rem;
      padding: 0.7em;
      margin: 1.414em 0;
    }

    p:nth-of-type(4) {
      font-size: 2.828rem;
      padding: 0.7em;
      margin: 1.414em 0;
    }
  </style>
  <p>
    比率は白銀比①(1.414) 基準文字サイズは10px
  </p>
  <p>
    文字サイズ=基準文字サイズ*比率
    <br> padding=文字サイズ/比率
    <br> margin=文字サイズ*比率
  </p>
  <p>
    文字サイズ=基準文字サイズ*比率^2
    <br> padding=文字サイズ/比率
    <br> margin=文字サイズ*比率
  </p>
  <p>
    文字サイズ=基準文字サイズ*比率^3
    <br> padding=文字サイズ/比率
    <br> margin=文字サイズ*比率
  </p>
</body>

まとめ

font-sizeプロパティのピクセル指定やmarginなどの値を規則性なく決めていたことが、プログラミングとはかけ離れた感じがして苦手で、このルール決定は自分的には大きな発見でした。

レイアウトが綺麗かはわかりにくいですが、特に考えなしにルールに乗っ取ることで値が決まるのは作業効率的には大きいと思います。

sassの機能を使ってこの規則のutilityとか作ってみるとコードが恐ろしく見やすくなったうえにレイアウトが綺麗になっていることに気づくと思うので、ぜひやってみてください。

フロント苦手な人はここら辺のコードの規則性のなさで苦手意識があるんじゃないかと思います(自分がそうでした)。

このぐらいのことはデザイナーさんはもしかしたら知ってて当たり前かもしれないので、これは初心者フロントエンジニア向けってことでお願いします。