このページの中身

字と余白と幅

本文の級・余白の刻み・版面幅を一本で動かし、375px と 1240px の折り返しを見てから CSS を持ち帰る。参考にした作業面: Utopia type、Utopia space、Fluid Type Scale。

つまみ#

見本#

持ち帰る#

:root {
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.5rem;
  --text-2xl: 2.25rem;
  --leading-body: 1.9;
  --leading-heading: 1.35;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --page: 80rem;
}

つまみは JavaScript で動きます。無効の場合は、上の見本は既定の値で描かれ、コピー欄には出発点のCSSと同じ既定の値が入っています。

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。