衬线与非衬线Serif & Sans
视觉效果与操作状态通过笔画细节选择合适的字体类型
衬线字体的笔画末端带有装饰，非衬线字体通常更简洁。两类字体都能呈现不同气质，选择时要看语言覆盖、正文可读性、品牌需求和加载性能，而不是只套用固定印象。
好的设计经得起凝视
同一段文案，衬线让它显得优雅、正式，像杂志里的编辑精选。
衬线 · Georgia / 宋体好的设计经得起凝视
同一段文案，非衬线让它显得现代、干净，像效率工具的界面。
非衬线 · 系统默认什么时候用
- 衬线做大标题：品牌官网、内容平台要优雅与编辑感设计的气质衬线大标题，自带编辑感
- 衬线传达信任：金融、律所、学术机构的正式感恒丰私人银行金融、律所：衬线 = 可信赖
- 非衬线做界面与正文：现代、干净、高效，久读不累项目名称负责人界面用非衬线：干净、高效、读得快
- 衬线点缀引文：引语、格言用一点衬线立刻有分量“好的设计是尽可能少的设计。”引文一点衬线，立刻有分量
什么时候不用
- 长正文全用小字号衬线：装饰糊成一团，发虚又费眼这是一段用小字号衬线排的长正文，笔画末端的小装饰在屏幕上挤成一团，读两行眼睛就开始累。
- 效率工具硬凹衬线大标题：气质错位，像穿西装搬快递服务器监控大盘正常告警 3工程工具硬凹优雅，气质错位
- 衬线只写 Georgia 不给中文 fallback：中文掉成浏览器默认Vibe 设计指南只写 Georgia，中文掉成浏览器默认衬线
- 同级标题衬线非衬线混着用：没有规则，气质分裂本月目标数据看板团队成员同级标题两种字体混用，气质分裂
组成结构 · Anatomy
Ag衬线字体：横细竖粗，末端带小脚Ag
1衬线Serif笔画末端的小装饰，优雅感来自这里
2笔画对比Contrast衬线字体横细竖粗，有书写感
3非衬线Sans-serif去掉装饰、粗细一致，干净现代
常见变体 · Variants
衬线大标题Serif Display
品牌故事
品牌页、内容站要优雅编辑感
非衬线正文Sans Body
界面正文用系统字体，干净高效读得快。
界面正文，现代干净又高效
衬线点缀引文Serif Quote
“细节里藏着气质。”
引文格言做点缀，少量提神
典型使用场景
品牌官网大标题
杂志与内容平台
巷口那家面包店，为什么排队十年
美食周刊 · 林小满 · 12 分钟前
编辑部精选
凌晨四点的城市档案馆
手冲咖啡的黄金两分钟
产品界面与正文
项目设置
项目名称
负责人
引文与格言点缀
我们做工具的人常忘记：用户要的不是功能清单，而是把事情做完的确定感。
“好的设计是尽可能少的设计。”
—— Dieter Rams
所以每加一个按钮，都先问一句：没有它会怎样？