タイポグラフィ
見出しは Fraunces、読む文字はすべて IBM Plex Sans、トークンとコードは JetBrains Mono。
見本
書体を選び、ウェイトとサイズを決めて、見本の上に直接入力してください。
Warm ink, one yellow, quiet motion.
font-family: var(--font-display); font-weight: 400; font-size: 88px;
スケール
各役割を実寸で表示します。ディスプレイのセリフ体はウェイト 400 のまま、見出しだけに使います。
- ヒーローFraunces 400 · clamp(48–96) / 0.98 · −0.03em
開かれたインフラ
- タイトルFraunces 400 · 36–48 / 1.05 · −0.02em
背景カード
- 見出しPlex Sans 500 · 20–24 / 1.3 · −0.01em
カードごとに焦点はひとつ
- リードPlex Sans 400 · 18–20 / 1.6
リードは、タイトルだけでは言えないことを補います。
- 本文Plex Sans 400 · 16 / 1.6
本文は 16px、行の高さ 1.6、1 行は約 65 文字までに収めます。
- 小Plex Sans 400–500 · 14 / 1.5
ラベル、表のセル、補助的な操作。
- キャプションPlex Sans 400 · 12–13 / 1.4
キャプションとタイムスタンプ。最小は 12px。
- コードJetBrains Mono 400 · 13–14 / 1.6
var(--ink-500)
中国語と日本語
欧文書体には CJK の字形がないため、各言語は lang に応じてそれぞれのシステム書体に切り替わります。見出しの詰めはなくします。
PingFang SC · Songti SC · Noto
暖色墨水，一抹黄色
照片负责氛围，实色表面负责焦点。
Hiragino · Yu Mincho · Noto
温かいインク、ひとつの黄色
写真が空気をつくり、不透明な面が焦点をつくる。
ルール
- 1強調のためにディスプレイのセリフ体を太字や斜体にしない。
- 2変化する数字や桁をそろえる数字は等幅数字にする。
- 3見出しはバランスよく改行し、段落は 1 行約 65 文字にする。
- 412px より小さい文字は使わない。