A03 颜色与文字排版

摘要：页面九成以上的信息由文字承载，而文字可读性由三组数值决定：字号、行高、对比度。三者任何一个失衡，读者会放慢速度或直接离开。本文给出颜色表示法的选择依据、一套可直接套用的排版尺度，以及对比度的自检方法。
关键词：颜色，对比度，字号，行高，字体栈

所属：frontend/css / A-入门 ｜ 上一篇：A02-选择器与层叠基础 ｜ 下一篇：A04-盒模型

1 引言

配色与字体常被当作审美问题，实际可拆成可度量的指标：正文对比度不低于 4.5:1，行高为字号的 1.5 ~ 1.8 倍，单行长度 45 ~ 75 个字符。

本文给出可直接使用的取值与写法。范围见表 1-1。

项	本文覆盖	本文不覆盖
颜色	hex、rgb、hsl、透明度	主题体系与色彩心理学
字体	字体栈、字号尺度、行高、字重	网络字体加载优化（B02、C03）
排版	对齐、字间距、中文标点处理	多语言混排细节

2 预备知识

项	要求	核对方式
环境	本地服务器可用	浏览器能打开 localhost
文件	css-practice/type.html	编码 UTF-8
浏览器	Chrome 130+，取色器与对比度检查可用	元素面板可取色
前置	A02	会选择器

3 原理与实现

3.1 可读性的三个旋钮

字号、行高与对比度共同决定阅读负担，任何一项越界的表现都很直接，如图 3-1 所示。

flowchart LR
    A["字号过小"] --> E["阅读速度下降"]
    B["行高过密"] --> E
    C["对比度不足"] --> F["弱光或强光下无法阅读"]
    D["行长过宽"] --> G["换行时丢失行首"]
    E --> H["读者离开"]
    F --> H
    G --> H

图 3-1 三类排版问题与后果

图上可见：三项指标各自独立，改一项不能弥补另一项；对比度不足无法靠加大字号解决。

3.2 一套可直接用的排版规则

/* 运行环境：Chrome 130+；css-practice/type.css */
:root {
  --ink: #0f172a;
  --ink-muted: #475569;
  --surface: #ffffff;
  --brand: #1d4ed8;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--surface);
}

h1 { font-size: 2rem; line-height: 1.3; }
h2 { font-size: 1.5rem; line-height: 1.4; margin-block: 2rem 0.75rem; }
p  { margin-block: 0 1rem; max-width: 42em; }
a  { color: var(--brand); }

.muted { color: var(--ink-muted); font-size: 0.875rem; }

颜色与排版的关键取值见表 3-1。

项	建议值	说明
正文颜色	#0f172a 一类的深色	纯黑在屏幕上对比过强，易疲劳
辅助文字	加深的灰，不要用浅灰	浅灰对比度常低于 4.5:1
正文字号	1rem（16 像素）起步	移动端不做小于 16 像素的设置
行高	1.5 ~ 1.8	中文适当偏大
行长	max-width: 42em 左右	超过 75 字符换行易丢行首
标题字号	正文的 1.5、2 倍两档	档位控制在三档以内
颜色写法	hsl() 便于调明度，hex 便于复制	同一项目统一一种写法
透明度	hsl(... / 0.6) 或 #rrggbbaa	opacity 会影响子元素

4 验证与讨论

1. 保存后刷新，确认正文、标题、链接三种颜色层次分明。
2. 用取色器读取正文与背景色，计算对比度，确认不低于 4.5:1。
3. 把窗口宽度缩到 360 像素，确认正文仍是 16 像素且无横向滚动。
4. 删除字体栈中的中文回退项，观察中文在不同系统上的字形差异。

检查项	预期结果	说明
对比度	正文 ≥ 4.5:1	取色器读数
字号	正文 16 像素	元素面板 Computed 面板
行长	宽屏下不超过 42em	目测 + 面板宽度
字体回退	无字体时回退到系统无衬线体	字体栈最后一项

讨论与局限。 对比度以数值计算，但「看起来舒服」还受字重、背景纹理影响；数值只是下限。另 system-ui 在各平台表现不同，需要像素级一致时只能引入网络字体并承担加载成本。

5 常见问题

现象	原因	处理
中文显示为宋体	字体栈缺少中文无衬线体	补 PingFang SC、Microsoft YaHei
文字模糊	字号过小或字重过细	正文提到 16 像素，字重不低于 400
灰字看不清	辅助色过浅	加深至对比度 ≥ 4.5:1
行距过密	行高使用固定像素	改用无单位倍数
链接与正文混在一起	仅靠颜色区分	加下划线或加重字重

6 结论

序号	结论	依据
1	可读性由字号、行高、对比度三项共同决定	图 3-1
2	正文 16 像素、行高 1.7、行长 42em	表 3-1
3	辅助色需单独校验对比度	表 3-1
4	字体栈必须包含中文回退	表 3-1

• 上一篇：A02-选择器与层叠基础
• 下一篇：A04-盒模型
• 返回：A00-总结 ｜ 科目 README

参考文献

[1] MDN Web Docs · CSS 文本样式，https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text（访问于 2026-10-31）
[2] WCAG 2.2 · 对比度（最低），https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html（访问于 2026-10-31）