FONT · SCALE · COLOR

字体与排版

本站的字体、排版、色彩与交互样式一览。

EB Garamond / IBM Plex Mono / System CJK fallbacks

00 / FONT USAGE

字体使用说明

按内容的用途选择文字样式,再搭配颜色。

衬线字体 · 阅读

Serif / EB Garamond

标题、正文和介绍使用衬线字体。英文与数字使用 EB Garamond;中文依次尝试宋体 SC、Noto Serif CJK SC、思源宋体、SimSun,最后使用系统衬线字体。

常规字重为 400,正文强调使用 500。中英混排沿用同一文字角色,中文的实际字形取决于设备已安装的字体。

Thoughtful typography makes room for reading.

等宽字体 · 界面英文与数字

Monospace / IBM Plex Mono

导航、日期、标签和控件中的英文与数字使用 IBM Plex Mono。后备字体依次为 SFMono-Regular、Consolas、苹方 SC、Microsoft YaHei 和系统等宽字体;中文会使用可用的中文字形,不保证与拉丁字母等宽。

导航、按钮、输入框与下拉选择共用 type-ui;日期、标签和版权共用 type-meta。标签类小字用于简短信息,不作为长段正文。

无衬线字体 · 界面中文

Sans-serif / PingFang SC · Microsoft YaHei

导航、标签、日期说明和输入控件中的中文,使用字体栈中的苹方 SC、微软雅黑等无衬线后备字体。实际使用哪一种取决于设备安装的字体;这些中文字体不由网站下载。

“衬线 / 无衬线”描述笔画端部的形态,“等宽 / 比例宽”描述字符的宽度,是两个不同维度。IBM Plex Mono 属于无衬线等宽字体;中文后备字形不保证与拉丁字母等宽。

网站目前共享两套字体栈:阅读用 --font-serif,界面用 --font-mono。无衬线中文已包含在界面字体栈中,继续使用 type-ui或 type-meta。

月份选择 / Select month · 2026-10

混排示例:中文使用系统无衬线后备字体,英文与数字使用 IBM Plex Mono。

层级与搭配

Hierarchy & composition

  • 页面标题:type-title;章节标题:type-heading。
  • 文章、作品与链接条目标题统一使用 type-entry-title。
  • 正文、开篇介绍和描述共用 type-body;整篇文章使用 type-prose 容器。
  • 导航、按钮和控件:type-ui;辅助文字:type-meta;主要视图切换:type-view-switch。

每个元素选择一个文字角色,通过颜色 class 表达强调或弱化。HTML 标签表达内容结构,class 控制外观;标题仍使用正确层级的 h1、h2、h3。

颜色通过 text-* 组合:text-muted 用于辅助信息,text-accent 用于强调。调色盘中的文字色与色块色分别适配,分类或状态同时保留文字说明。

<h2 class="type-heading">章节标题</h2>
<p class="type-body text-muted">辅助说明</p>
<p class="type-body text-green">已完成 / Complete</p>
<article class="type-prose">…</article>

字号与显示

Scale & rendering

字号使用 rem,跟随浏览器的字号偏好。页面标题在窄屏自动缩小;示例下方展示当前计算出的字号、行高和颜色。

EB Garamond 与 IBM Plex Mono 随网站本地加载,不请求外部字体服务。中文使用系统后备字体,不同设备的字形可能不同。页首方块字标是 SVG 图形,不是可用于正文的字体。

01 / Headings

标题

.type-title

页面标题

把想法写下来,让作品说话。

Make room for thoughtful work.

Aa Bb Cc · 0123456789 · @ & / —

.type-heading

章节标题

把想法写下来,让作品说话。

Make room for thoughtful work.

Aa Bb Cc · 0123456789 · @ & / —

.type-entry-title

文章、作品与链接条目标题

把想法写下来,让作品说话。

Make room for thoughtful work.

Aa Bb Cc · 0123456789 · @ & / —

02 / Reading

阅读文字

.type-body

正文、介绍与描述

把想法写下来,让作品说话。

Make room for thoughtful work.

Aa Bb Cc · 0123456789 · @ & / —

03 / Interface & metadata

界面与元信息

.type-ui

导航、按钮与表单控件

把想法写下来,让作品说话。

Make room for thoughtful work.

Aa Bb Cc · 0123456789 · @ & / —

.type-meta

日期、标签、注释与版权

把想法写下来,让作品说话。

Make room for thoughtful work.

Aa Bb Cc · 0123456789 · @ & / —

.type-view-switch

主要视图切换

把想法写下来,让作品说话。

Make room for thoughtful work.

Aa Bb Cc · 0123456789 · @ & / —

04 / LONG-FORM READING

正文组合

.type-prose

一级标题由页面提供;下方展示二至六级标题及正文元素。

阅读与节奏 · Reading

留白让句子有呼吸的空间。正文中的 重点内容、轻声强调、强调中的重点 和 删除的文字 各有用途;行内链接与引用式链接保持同样的表达。

Good typography gives words room to breathe. The rhythm of a paragraph comes from its measure, spacing, and contrast — quiet details that keep the meaning in focus.

显式换行保留在同一段落中。
A deliberate line break stays in the same paragraph.

三级标题 · A subsection

段落是阅读的基本单位;标题表达内容之间的关系。

四级标题 · A smaller group

更深的层级复用条目标题的字号,以字重区分。

五级标题 · A detail

以斜体补充区分,保持字号数量克制。

六级标题 · A finer detail

结构仍然保留,字重与斜体共同表达层级。

列表 · Lists

  • 无序列表 / Unordered list
    • 嵌套项目 / Nested item
    • 另一项包含 强调 和 inline code
  • 第二个顶层项目 / Another item
  1. 先阅读 / Read first
    1. 关注内容 / Follow the content
    2. 留意节奏 / Notice the rhythm
  2. 再记录 / Then take notes
  • 已完成的示例 / Complete
  • 待完成的示例 / Pending

引用 · Quotations

少一点干扰,多一点内容。

A quiet page leaves room for the reader.

嵌套引用 / A quotation within a quotation.

代码 · Code

行内代码 const message = 'Hello, world'; 沿用等宽字体。

const page = {
  title: '阅读与节奏 · Reading',
  language: 'zh-Hans',
  canonical: 'https://yangpan.com/typography',
};
console.log(page.title);

长地址:https://example.com/a-long-path/reading-and-writing/notes-on-typography-and-whitespace?language=zh-Hans&view=complete

表格 · Tables

元素 / Element 用途 / Purpose 对齐 / Alignment 示例 / Sample
标题 Heading 表达内容层级 居中 Center 01
正文 Body 中英文混排与连续阅读 居中 Center 02
代码 Code const readable = true 居中 Center 03

图片 · Images

由三个蓝色矩形与点状路径组成的排版示意 / Three blue rectangles connected by a dotted path

带图注的独立图片 / A stand-alone image with a caption
图 1 · 独立图片的 Markdown 标题渲染为图注 / Figure 1 · A stand-alone image title becomes its caption

图片说明:形状、留白与阅读方向。 / Shapes, whitespace, and reading direction.


分隔线之后继续正文。脚注将补充信息放在文章末尾。1

Footnotes

  1. 这是一条脚注示例。A footnote keeps supporting information close, with a link back to the text. ↩

05 / COLORS

颜色

每种颜色同时提供 HEX、RGB 和 HSL 表示。HSL 的三个数值依次是色相(0–360°)、饱和度(0–100%)和明度(0–100%);饱和度越低越接近灰色。数值随主题切换,HSL 保留一位小数。

主题色板 / Theme palette

--background

页面背景

Page background

--surface

控件与表面

Controls & surfaces

--text

主要文字

Primary text

--muted

辅助文字

Secondary text

--accent

链接与强调

Links & accents

--divider

装饰分隔线

Decorative dividers

调色盘 / Color palette

所有颜色的饱和度统一为 68%。浅色主题的色块明度统一为 50%,文字按 5% 档位调整;深色主题使用 60% 或 65%。同一颜色共用色相。HSL 显示定义值,HEX 与 RGB 显示浏览器计算值。

All colors use 68% saturation and share each hue. Light-theme swatches use 50% lightness; text uses 5% steps. Dark-theme colors use 60% or 65%. HSL shows defined values; HEX and RGB show computed values.

红 / Red

色块 / Swatch

--color-red

文字 / Text

--color-red-text.text-red

橙 / Orange

色块 / Swatch

--color-orange

文字 / Text

--color-orange-text.text-orange

黄 / Yellow

色块 / Swatch

--color-yellow

文字 / Text

--color-yellow-text.text-yellow

绿 / Green

色块 / Swatch

--color-green

文字 / Text

--color-green-text.text-green

青 / Teal

色块 / Swatch

--color-teal

文字 / Text

--color-teal-text.text-teal

蓝 / Blue

色块 / Swatch

--color-blue

文字 / Text

--color-blue-text.text-blue

紫 / Purple

色块 / Swatch

--color-purple

文字 / Text

--color-purple-text.text-purple

粉 / Pink

色块 / Swatch

--color-pink

文字 / Text

--color-pink-text.text-pink

文字颜色 / Text colors

.text-primary

主要文字

The quick brown fox.

.text-muted

辅助文字

The quick brown fox.

.text-accent

强调文字

The quick brown fox.

.text-inverse

反色文字

The quick brown fox.

06 / INTERACTION

链接与控件

移动鼠标或按 Tab,查看悬停与键盘焦点。

下拉选择 / Selects

对照可用与禁用状态;可用示例包含长选项和不可选项。

Select / .type-ui
Select / disabled

文本输入 / Text inputs

单行用于简短内容,多行用于段落内容。

TextField / .type-ui

可输入和编辑 / Editable text

TextField / multiline

支持换行,可调整高度 / Multiple lines, resizable height

输入状态 / Input states

只读内容可以选择和复制;禁用控件不可操作;错误状态同时提供文字提示。

TextField / readonly
TextField / disabled
TextField / error

错误示例:请填写标题 / Example error: enter a title

07 / DECORATION

装饰 / Decoration

首字 / Drop cap

.type-dropcap

我喜欢清晰、简洁的文字。首字放大,让阅读有一个明确的起点。

Every story begins with a single letter. A considered initial gives the opening paragraph its own rhythm.

字标 / Wordmark

.text-accent

网站图标 / Favicon

YP / PAN YANG

浅色背景 / Light

蓝底白色 YP 网站图标蓝底白色 YP 网站图标蓝底白色 YP 网站图标

1rem / 2rem / 4rem

深色背景 / Dark

蓝底白色 YP 网站图标蓝底白色 YP 网站图标蓝底白色 YP 网站图标

1rem / 2rem / 4rem

呼吸光标 / Breathing cursors

.type-title

作品

Projects

.type-body

文字与光标 / Text and cursor

.type-meta

© 2026 杨攀 · Pan YANG · YANGPAN.COM

图示文字 / Diagram text

.type-diagram-title

图内标题 / Titles

.type-diagram-note

图内标注 / Annotations

图外编号与图注复用 .type-meta。

作品、文字与对话三个展开的工作层:Bilink、写作和 Next Token 播客。
作品、文字与对话
回到顶部 / Top