术语图鉴/UI/UX 设计/字体排版
←→切换Esc返回

字体排版 Typography

你可能会说

帮我优化一下排版——字号层级、行高、字间距都调舒服点。

文字的大小、行高、字重、字间距的选择。

文字的大小、行高、字重、字间距的选择。好的排版让阅读舒适,差的排版让人眼睛累。

也常被叫作Typography

生活类比

像说话的节奏——适当的停顿(行距)、重点加重(粗体),听者才不累。

🎮 动手试试

排版是无声的演讲
14px / line-height: 1.6
选择题选择一个你认为最合适的答案

关于「字体排版」,以下哪个描述最准确?

你可以这样告诉 AI

帮我调一下全站排版:正文 16px 行高 1.75、标题 28px 加粗、段间距 24px,让长文读起来舒服。

容易混淆?这样区分

字体排版 Typography≠
字体 Font

字体是单个字体文件(如思源黑体),排版是字体的大小、行高、字重、间距等组合使用规则。

什么时候用

正文内容为主时

博客、文档、新闻等以阅读为核心的产品,好的字体排版(字号、行高、字间距)直接决定用户能不能舒服地读下去。

和 AI 协作时

想让 AI 调整排版时,说「正文 16px、行高 1.75、标题 28px 加粗、段间距 24px」,AI 会按数值生成 CSS。

什么时候不用

快速原型验证

做低保真原型或功能验证时,不用纠结字号行高细节——先确认功能跑通,排版后期统一调整即可。

与纯数据可视化无关

图表、仪表盘等以图形为主的数据展示,字体排版的影响远小于图表类型选择和颜色编码。

组成结构 · Anatomy

1
核心概念Core

文字的大小、行高、字重、字间距的选择。好的排版让阅读舒适,差的排版让人眼睛累。

2
实际表现In Practice

像说话的节奏——适当的停顿(行距)、重点加重(粗体),听者才不累。

3
与 AI 的关联AI Context

和 AI 沟通时提到「字太小了」「行距太密」,调的就是排版。

典型使用场景

优化文章排版
告诉 AI「博客文章页字太小行距太密,帮我把正文调到 16px 行高 1.75,标题改成思源黑体」
想弄懂概念时
告诉 AI「用大白话给我解释什么是字体排版,举个生活中的例子」

延伸阅读