天圆地方与日晷刻度：当代界面设计的留白仪式
沿着聚境原设计札记的圆、刻度、宣纸与焦墨意象，把留白从风格选择落实到阅读体验。
A PATH THROUGH THE FOLIO
Quest · 寻找阅读的秩序
观察留白、字号、双语节奏与颜色，让视觉选择有理由，也让读者有舒适、清楚的阅读路径。
顺着读下去
01 / CHAPTERS↗
给字号一个范围，也给阅读留出空间
从正文、比例、行距和屏宽一起出发，建立可以解释、可以复用的排印起点。
中英文标点与断行：让两种语言都有节奏
用真实标题、长链接和双语段落检查排版，让统一设计不压平两种语言的差异。
对比度通过之后，还要看什么
检查一组颜色只是开始；字号、背景、焦点和错误状态仍然需要放进真实页面验证。
延伸资料
02 / REFERENCES排版
流式字号 clamp() ↗
用最小值、偏好值与最大值表达有边界的 CSS 尺寸。
可与排印工坊导出的字号范围对照，理解宽窄屏之间的变化。
- 适合
- 正在调整响应式标题与正文的作者。
- 使用前
- 公式不替代阅读检查；仍需测试缩放和极端宽度。
来源核对 · 2026.10.13
developer.mozilla.org
排版
中文排版需求 ↗
查阅中文标点、行首行尾与中西文混排的排版讨论。
出现孤立标点或混排节奏问题时，比凭感觉逐字插空格更可靠。
- 适合
- 制作中文长文或双语页面的设计者。
- 使用前
- 这是一份持续发展的排版参考；具体实现需结合浏览器。
来源核对 · 2026.10.13
www.w3.org
排版
正文行距 ↗
了解 line-height 的取值、继承与无单位数值的行为。
为正文建立可以随字号变化的行距，减少局部样式打架。
- 适合
- 修改文章样式或建立阅读模板的人。
- 使用前
- 文档示例是起点；中英文长段落都应实际阅读。
来源核对 · 2026.10.13
developer.mozilla.org
排版
Noto 中日韩字体 ↗
查看 Noto CJK 的字体文件、地区变体与项目说明。
需要更稳定的中日韩文字覆盖时，可以先从明确的字体来源开始。
- 适合
- 需要选择和部署中日韩字体的开发者。
- 使用前
- 核对所选字体文件许可；考虑下载体积与地区字形差异。
来源核对 · 2026.10.13
github.com
可访问性
文本对比度 ↗
阅读 WCAG 文本对比度的阈值、适用条件与解释。
给对比度工坊的数字结果找到出处，避免把四舍五入当作通过。
- 适合
- 调整正文、链接和按钮文字颜色的人。
- 使用前
- 一个颜色组合通过阈值不代表整站满足全部可访问性要求。
来源核对 · 2026.10.13
www.w3.org
可访问性
非文本对比度 ↗
了解控件和有意义图形与相邻颜色之间的对比要求。
提醒设计者把检查从正文扩展到输入框、图形和界面状态。
- 适合
- 制作表单和交互控件的设计者与开发者。
- 使用前
- 结合控件实际状态与相邻背景判断，不能仅检查品牌色。
来源核对 · 2026.10.13
www.w3.org
可访问性
页面结构教程 ↗
用页面区域、标题层级和内容结构组织可理解的网页。
长文和策展目录都需要可导航的结构，视觉留白不能代替语义。
- 适合
- 整理文章模板和站点导航的人。
- 使用前
- 需落实到真实 HTML，并配合键盘与辅助技术检查。
来源核对 · 2026.10.13
www.w3.org
可访问性
可访问交互模式 ↗
查看常见组件的语义、键盘操作与实现示例。
制作弹窗、标签页等交互时，先明确行为再安排视觉样式。
- 适合
- 实现自定义交互组件的前端开发者。
- 使用前
- 示例需适配和测试；能用原生元素时先考虑原生元素。
来源核对 · 2026.10.13
www.w3.org