タイポグラフィ
--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)
。