COURSE 10 · 字体排版

网页字体排版设计

共 7 章节 约 108 分钟 进阶

网页上 90% 的信息靠文字传递,字体排版的好坏直接决定可读性与质感。本课从字体性格出发,拆解字号阶梯、行高字间距、中英混排、字重对比与响应式字体加载,让你用文字本身就能搭出层次分明、耐读又有气质的页面。

网页字体排版设计教学课程封面
CHAPTERS

课程章节目录

七个章节从字体选择到性能优化,把文字排版拆成可执行的设计规范。

01

字体的性格:衬线、无衬线、等宽

三类字体的视觉性格与适用场景,学会根据品牌调性与内容类型选择合适的字体家族。

15 分钟入门
02

字号阶梯与模块化比例

用模块化比例(如 1.2、1.25)生成和谐的字号阶梯,让标题到正文的过渡有数学规律可循。

16 分钟中级
03

行高、字间距与段间距

行高影响阅读流畅度、字间距影响标题气质、段间距影响内容分组,三者协同决定排版节奏。

16 分钟中级
04

中英混排的细节处理

中文与英文、数字混排时的基线对齐、字号差异、间距处理,避免常见的"高低不平"视觉问题。

15 分钟进阶
05

字重与对比:用粗细制造层级

除了字号,字重也是构建层级的利器。用 Regular、Medium、Bold 的组合制造轻重对比与视觉重点。

15 分钟进阶
06

响应式字体:clamp 与流式排版

用 CSS clamp() 实现字号随视口流式变化,让标题在桌面大气、在移动端克制,无需多个断点。

16 分钟高阶
07

字体加载性能与可读性

font-display 策略、子集化、woff2 压缩等加载优化,兼顾视觉一致与首屏性能,避免文字闪烁。

15 分钟高阶

字体排好了,再打磨交互细节

让静态的文字与组件动起来,进入交互细节课程