Typography
フォントサイズ
| トークン | 変数 | ユーティリティ | 初期値 |
|---|---|---|---|
2xs | --fz--2xs | .-fz:2xs | |
xs | --fz--xs | .-fz:xs | |
s | --fz--s | .-fz:s | |
m | --fz--m | .-fz:m | 1em |
r | --fz--r | .-fz:r | 1rem |
l | --fz--l | .-fz:l | |
xl | --fz--xl | .-fz:xl | |
2xl | --fz--2xl | .-fz:2xl | |
3xl | --fz--3xl | .-fz:3xl | |
4xl | --fz--4xl | .-fz:4xl | |
5xl | --fz--5xl | .-fz:5xl |
Memo:スケーリングは 4xl くらいまでにして、5xlのとこは here などのセマンティックトークンにしてもよさそう。2xsとかも?
2xs
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
xs
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
s
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
m
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
l
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
xl
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
2xl
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
3xl
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
4xl
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
5xl
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
スケーリングについて
各プリセット値は、数学的に美しいとされるスケーリング理論に基づいて定義することを推奨しています。
デフォルトでは、分子8の調和数列ベースで設計しています。
Memo: 英語: 8ベース、 日本語: 9ベース でスケーリングするのが良さそう。
参考: 音楽、数学、タイポグラフィ (opens in a new tab)
別のスケーリング例
（調和数列をベースにした）スケーリング例を紹介します。
2xs
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
xs
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
s
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
m
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
l
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
xl
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
2xl
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
3xl
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
4xl
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
5xl
ロレムイプサムのAmet、学部エリットとSeddo絵薄モッド。
line-height
base値をセットし、それに対して小さい・大きいで段階的に用意。
| トークン | 初期値 |
|---|---|
| xs | base - 0.25 |
| s | base - 0.125 |
| base | 1.75 |
| l | base + 0.125 |
| xl | base + 0.25 |
base値は 日本語では 1.625, 1.75, 1.875 あたりにするがおすすめ。（英語なら 1.5, 1.625 あたりがおすすめ）
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば。
Headings の line-height について
自動計算をONにしている。（普通に初期値をセットしてもいいか。）
Heading 1: ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
Heading 2: ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
Heading 3: ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
Heading 4: ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
Heading 5: ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
Heading 6: ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
Paragraph: ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
Heading 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Heading 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Heading 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Heading 4: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Heading 5: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Heading 6: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
letter spacing
letter spacing...考え中
| トークン | 変数 | 初期値 |
|---|---|---|
| -2 | --lts--N2 | -0.25em |
| -1 | --lts--N1 | -0.125em |
| 0 | --lts--0 | 0em |
| 1 | --lts--1 | 0.025em |
| 2 | --lts--2 | 0.05em |
| 3 | --lts--3 | 0.075em |
| 4 | --lts--4 | 0.1em |
| 5 | --lts--5 | 0.25em |
| 5 | --lts--6 | 0.5em |
-2 : Lorem 0123 ロレム文字
-1 : Lorem 0123 ロレム文字
0 : Lorem 0123 ロレム文字
1 : Lorem 0123 ロレム文字
2 : Lorem 0123 ロレム文字
3 : Lorem 0123 ロレム文字
4 : Lorem 0123 ロレム文字
5 : Lorem 0123 ロレム文字
6 : Lorem 0123 ロレム文字
フォントファミリー
| トークン | 変数 | 初期値 |
|---|---|---|
| sans | --ff--sans | |
| serif | --ff--serif | |
| mono | --ff--mono | |
| emoji | --ff--emoji | |
| base | --ff--base | --ff--sans |
| heading | --ff--heading | --ff--sans |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
💡 ✔️ ✅ 👍 ✍️ ⚡ 🚫
<Text ff='sans'>...</Text>
<Text ff='serif'>...</Text>
<Text ff='mono'>...</Text>
<Text ff='emoji'>💡 ✔️ ✅ 👍 ✍️ ⚡ 🚫</Text>