タイポグラフィ

--unitone--measure

テキストの1行の長さ（カラム幅）。デフォルトは 46rem です。

--unitone--font-size

文字サイズのレベル。-2〜7まで設定できます。デフォルトは 0。少し大きくしたい場合は下記のように指定できます。

.foo {
  --font-size: 1;
}

あるいは、CSS を書かなくてもコアブロックであればタイポグラフィパネルから設定できますし、unitone 的にはデコレーターブロックのタイポグラフィパネルからも設定できるので、デコレーターブロックで対象をラップしてデコレーターブロックで文字サイズを設定することもできます。

--unitone--harmonic-sequence-base

unitone の文字サイズは下記の計算式で算出されます。デフォルトは 8 です。

var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - var(--unitone--font-size))

調和数列に --unitone--harmonic-sequence-base を掛けたものです。--unitone--harmonic-sequence-base が小さいほどスケールは大雑把になり、大きいほど細かくなります。

--unitone--min-harmonic-sequence-base,
--unitone--max-harmonic-sequence-base

デコレーターブロックのタイポグラフィパネルには「流体タイポグラフィ」の設定があります。「流体タイポグラフィ」にチェックすると、画面サイズに応じて文字サイズが拡大縮小します。文字サイズが「6XL」だとすると、スマホでは大きすぎてまともに読むことができないので、そのようなときは「流体タイポグラフィ」を使うと良いです。

流体タイポグラフィの場合、文字サイズの計算式が下記のようになります。

最大： var(--unitone--max-harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - var(--unitone--font-size))

最小： var(--unitone--min-harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - var(--unitone--font-size))

--unitone--min-harmonic-sequence-base のデフォルト値は 9、--unitone--max-harmonic-sequence-base のデフォルト値は --unitone--harmonic-sequence-base です。

--unitone--half-leading

文字の上下に追加される余白の大きさです。デフォルト値は 0.3 です。

1行の大きさ（line-height）は下記の計算式で算出されます。

1 * var(--unitone--half-leading) * 2

サイト全体の line-height については自分で CSS を書かなくてもサイトエディターのグローバルスタイルから設定できます。

--unitone--line-height-slope

テキストは一般的には文字サイズが大きくなるほど行間を狭くしたほうが読みやすいです。そのため font-size: 4rem のときは line-height: 1.1 のように、font-size の指定箇所には line-height も一緒に指定することが多いかと思います。

でも、僕は「ここは大きくしたいな」「ここは小さくしたいな」と思うことはあっても「ここの文字サイズはこうだけど行間はこうしたいな」と思うことは無く、行間は常に文字サイズに応じて自動的に良い感じになってほしいと考えていました。unitone はなんとかそのような仕組みを実装することができたのですが、その仕組の重要事項の1つがこの CSS カスタムプロパティです。

line-height の基準として、下記のようにしたいとします。

A = (1, 1.6) // 1rem のとき line-height: 1.6
B = (4, 1.1) // 4rem のとき line-height: 1.1

すると、下記の計算式が成り立ちます。

y = -0.1666666666667x + 1.7666666666667 // y = line-height, x = Font size ratio

つまりこの -0.1666666666667 が --unitone--line-height-slope となります。--unitone--line-height-slope を上書きすることでこの行間の傾斜角をカスタマイズできます。

--unitone--font-family

基本の書体。デフォルトは sans-serif。

余白・サイズ

基本（単位なし）

--unitone--ms{レベル} という形式でフィボナッチ数列に基づいたサイズを返します。全ての余白・サイズ用の CSS カスタムプロパティの基本になります。具体的には下記の数式で算出されます。

var(--unitone--_space-reference-value) * {フィボナッチ数}

--unitone--_space-reference-value は行間のサイズを基準にした値を保持している CSS カスタムプロパティです。フィボナッチ数 3 のときに基本の line-height と同じ大きさを返すようになっています。--unitone--_space-reference-value は一応プライベート変数扱いで、上書きすることは非推奨です。

--unitone--ms-2

var(--unitone--_space-reference-value) * 1

--unitone--ms-1

var(--unitone--_space-reference-value) * 2

--unitone--ms0

デフォルトでは0。

--unitone--ms1

var(--unitone--_space-reference-value) * 3

--unitone--ms2

var(--unitone--_space-reference-value) * 5

--unitone--ms3

var(--unitone--_space-reference-value) * 8

--unitone--ms4

var(--unitone--_space-reference-value) * 13

--unitone--ms5

var(--unitone--_space-reference-value) * 21

--unitone--ms6

var(--unitone--_space-reference-value) * 34

--unitone--ms7

var(--unitone--_space-reference-value) * 55

標準

各ブロックで設定可能な余白（gap や padding 等）は --unitone--s{レベル} という形式の CSS カスタムプロパティが使用されます。

em ベースのサイズがベースとなりますが、レベルが2以上のものについては小さな画面のときに余白が大きくなりすぎないように clamp で調整されます。

var(--unitone--ms1) + var(--unitone--ms{レベル}) * 22.5em / 80em 〜 var(--unitone--ms{レベル})

-unitone--s-2

デフォルトでは約0.53em。

var(--unitone--em-2)

--unitone--s-1

デフォルトでは約1.07em。

var(--unitone--em-1)

--unitone--s0

デフォルトでは0em。

--unitone--s1

デフォルトでは1.6em。

var(--unitone--em1)

--unitone--s2

デフォルトでは2.35em〜約2.67em。

var(--unitone--ms1) + var(--unitone--ms2) * 22.5em / 80em 〜 var(--unitone--ms2)

--unitone--s3

デフォルトでは2.8em〜約4.27em。

var(--unitone--ms1) + var(--unitone--ms3) * 22.5em / 80em 〜 var(--unitone--ms3)

--unitone--s4

デフォルトでは3.55em〜約6.93em。

var(--unitone--ms1) + var(--unitone--ms4) * 22.5em / 80em 〜 var(--unitone--ms4)

--unitone--s5

デフォルトでは4.75em〜11.2em。

var(--unitone--ms1) + var(--unitone--ms5) * 22.5em / 80em 〜 var(--unitone--ms5)

--unitone--s6

デフォルトでは6.7em〜約18.13em。

var(--unitone--ms1) + var(--unitone--ms6) * 22.5em / 80em 〜 var(--unitone--ms6)

--unitone--s7

デフォルトでは9.85em〜約29.33em。

var(--unitone--ms1) + var(--unitone--ms7) * 22.5em / 80em 〜 var(--unitone--ms7)

em ベース

--unitone--em{レベル} という形式でフィボナッチ数列に基づいたサイズを返します。具体的には下記の数式で算出されます。

1em * var(--unitone--ms{レベル})

--unitone--em-2

デフォルトでは約0.53em。

1em * var(--unitone--ms-2)

--unitone--em-1

デフォルトでは約1.07em。

1em * var(--unitone--ms-1)

--unitone--em0

デフォルトでは0em。

--unitone--em1

デフォルトでは1.6em。

1em * var(--unitone--ms1)

--unitone--em2

デフォルトでは約2.67em。

1em * var(--unitone--ms2)

--unitone--em3

デフォルトでは約4.27em。

1em * var(--unitone--ms3)

--unitone--em4

デフォルトでは約6.93em。

1em * var(--unitone--ms4)

--unitone--em5

デフォルトでは11.2em。

1em * var(--unitone--ms5)

--unitone--em6

デフォルトでは約18.13em。

1em * var(--unitone--ms6)

--unitone--em7

デフォルトでは約29.33em。

1em * var(--unitone--ms7)

rem ベース

--unitone--rem{レベル} という形式でフィボナッチ数列に基づいたサイズを返します。具体的には下記の数式で算出されます。

1rem * var(--unitone--ms{レベル})

--unitone--rem-2

デフォルトでは約0.53rem。

1rem * var(--unitone--ms-2)

--unitone--rem-1

デフォルトでは約1.07rem。

1rem * var(--unitone--ms-1)

--unitone--rem0

デフォルトでは0rem。

--unitone--rem1

デフォルトでは1.6rem。

1rem * var(--unitone--ms1)

--unitone--rem2

デフォルトでは約2.67rem。

1rem * var(--unitone--ms2)

--unitone--rem3

デフォルトでは約4.27rem。

1rem * var(--unitone--ms3)

--unitone--rem4

デフォルトでは約6.93rem。

1rem * var(--unitone--ms4)

--unitone--rem5

デフォルトでは11.2rem。

1rem * var(--unitone--ms5)

--unitone--rem6

デフォルトでは約18.13rem。

1rem * var(--unitone--ms6)

--unitone--rem7

デフォルトでは約29.33rem。

1rem * var(--unitone--ms7)

グリッド（%）ベース

--unitone--pg{グリッド数} という形式で、親要素を分割しそれに任意のグリッド数を掛け合わせたサイズを返します。分割数は var(--unitone--grid-columns)、各グリッド間の余白は var(--unitone--grid-gap) で定義されています。具体的には下記の数式で算出されます。

(100% - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns) * {グリッド数} + var(--unitone--grid-gap) * {グリッド数} - 1

グリッド（コンテナー）ベース

--unitone--cg{グリッド数} という形式で、コンテナーのサイズ（--unitone--container-max-width）を分割しそれに任意のグリッド数を掛け合わせたサイズを返します。分割数は var(--unitone--grid-columns)、各グリッド間の余白は var(--unitone--grid-gap) で定義されています。具体的には下記の数式で算出されます。

(var(--unitone--container-max-width) - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns) * {グリッド数} + var(--unitone--grid-gap) * {グリッド数} - 1

gap

--unitone--global--gap

主にブロックを左右、あるいはグリッド上に並べるようなブロックの gap に指定されています。

var(--unitone--s2)

--unitone--global--text-gap

主にテキストを上下、あるいは左右にならべるようなブロックの gap に指定されています。

var(--unitone--s1)

コンテナーの左右余白

--unitone--global--gutters

clamp(var(--unitone--rem1), 4vw, var(--unitone--rem2))

その他

--unitone--container-max-width

コンテナーの横幅。デフォルトは 1334px。

--unitone--shadow

box-shadow の値。デフォルトは 0 5px 20px -5px rgba(0, 0, 0, .2)。