字体
标题用 Fraunces,正文和界面用 IBM Plex Sans,Token 和代码用 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,每行控制在大约 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标题均衡换行,段落每行约 65 个字符。
- 4任何文字都不小于 12px。
