跳到正文

字体

标题用 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. 1不要为了强调而加粗或倾斜展示衬线体。
  2. 2会变化或需要对齐的数字使用等宽数字。
  3. 3标题均衡换行,段落每行约 65 个字符。
  4. 4任何文字都不小于 12px。