ウェブデザインの余白に規則性を持たせるためのパターン

spacing-rules.md

ウェブデザインの余白に規則性を持たせるためのパターン

フォントサイズベース

$spacing: 1rem;

body {
  margin: ($spacing * 4) $spacing;
}

Vertical Rhythm

$vertical-rhythm-line-height: 1.7;
$vertical-rhythm-unit: ($vertical-rhythm-line-height * 1rem);

h1 {
  margin: 0 0 $vertical-rhythm-unit;
  padding-bottom: ($vertical-rhythm-unit * .5);
  font-size: 1.5rem;
  line-height: ($vertical-rhythm-unit * 2);
  border-bottom: 1px solid gray;
}

p {
  margin: 0 0 $vertical-rhythm-unit;
  line-height: $vertical-rhythm-unit;
}

参考

• なぜタイポグラフィにおいてVertical Rhythm（バーティカルリズム）は重要な手法なのか？ | デザイン | POSTD

Modular Scale

$ratio: 1.7;

$line-height: $ratio;

$spacing: ($ratio * 1rem);
$spacing-minimal: ($spacing / $ratio / $ratio / $ratio);
$spacing-tiny: ($spacing / $ratio / $ratio);
$spacing-small: ($spacing / $ratio);
$spacing-large: ($spacing * $ratio);
$spacing-huge: ($spacing * $ratio * $ratio);
$spacing-gargantuan: ($spacing * $ratio * $ratio * $ratio);

参考

• hail2u.net/_size.scss at a9288c68f1cd24a9508b02586a91cdb6f8ade5d9 · hail2u/hail2u.net

8の倍数

$spacing: 8px;

body {
  margin: ($spacing * 4) $spacing;
}

参考

• Metrics & keylines - Layout - Material design guidelines