外观
字体基础
界面上的字"看着乱"，几乎都不是审美问题，而是没把"字体"拆成几个独立属性来看。字乱，几乎都是这三件事没分开处理：字族（什么字体）、字重（粗细）、字号（大小）。这三个属性各自独立、可分别调整，混在一起处理就乱；分开调，字就"听话"了。
字"乱"是因为三属性没分开
打开一个界面，你常会瞟到"字有点乱"：标题和正文差不多大、哪里都加粗、字体花花绿绿。这不是你不会审美，而是没把"字体"拆成几个独立属性来看。字乱，几乎都是这三件事没分开处理：
- 字族 Font Family = 什么字体——字体本身的样子。
- 字重 Font Weight = 多粗——笔画的粗细。
- 字号 Font Size = 多大——字的大小。
字乱三因：字族（什么字体）、字重（粗细）、字号（大小）——三者独立，分开调。
字族 Font Family：什么字体
三类字族对比：
| 字族 | 长相 | 气质 | 界面用在哪 |
|---|---|---|---|
| 无衬线 Sans | 笔画末端干净利落，没有"小脚" | 现代、清晰、中性 | 界面主力（微信就靠它） |
| 衬线 Serif | 笔画末端有装饰性"小脚" | 古典、正式、书香 | 报刊、书名，极少用于界面正文 |
| 等宽 Mono | 每个字占一样宽 | 机械、精确 | 代码、时间、数字 |
字族是字体本身的样子，主要有三类：无衬线 Sans——笔画末端干净利落、没有"小脚"，现代、清晰、中性，是界面主力（微信就靠它）；衬线 Serif——笔画末端有装饰性"小脚"，古典、正式、书香，用于报刊、书名，极少用于界面正文；等宽 Mono——每个字占一样宽，机械、精确，用于代码、时间、数字。
常见无衬线：PingFang SC（苹方，iOS/微信中文默认）、Helvetica、Noto Sans（安卓中文默认）。界面默认用无衬线——它干净、不抢戏，让"内容"成为主角。
字重 Font Weight：多粗
字重是笔画的粗细——不是大小，是"浓淡"。它有一套标准刻度，从细到粗共五档：Light 300（细，装饰用，别做正文）、Regular 400（常规，正文默认，主力）、Medium 500（中等，强调一下）、Semibold 600（半粗，小标题）、Bold 700（粗，大标题/强强调）。
字重刻度：
| 字重 | 数值 | 用途 |
|---|---|---|
| Light | 300 | 细，装饰用，别做正文 |
| Regular | 400 | 常规，正文默认（主力） |
| Medium | 500 | 中等，强调一下 |
| Semibold | 600 | 半粗，小标题 |
| Bold | 700 | 粗，大标题/强强调 |
用字重建立层级，而不是"乱加粗"：想让一句话突出，先拉开字号，再考虑加粗——字重是"最后一道"强调手段。
字号 Font Size：多大 + 层级
字号是字的大小，用 px（像素）或 pt（点）表示。界面设计用 px：1px 是设计的基本单位，iPhone 屏幕宽 375px、高 812px。字号不是越大越好，而是拉开差距——正文和标题之间要有明显落差，读者才知道"看哪"。
字号三档：
| 档位 | 字号 | 用途 |
|---|---|---|
| 正文 | 16-17px | 阅读主力 |
| 标题 | 20-24px | 比正文明显大 |
| 辅助 | 12px | 时间、角标，最小阅读字号 |
"字要清楚 = 字族对（无衬线）+ 字重大（拉开层级）+ 字号够（正文≥16px）+ 三者分开调"。
微信拆解：三属性合体
微信首页三处字属性拆解：
| 元素 | 字族 | 字重 | 字号 | 为什么 |
|---|---|---|---|---|
| 消息标题（联系人或群名） | PingFang（无衬线） | Regular 400 | 17px | 正文主力，清楚不抢戏 |
| 消息摘要（最后一条内容） | PingFang | Regular 400 | 15px | 次级信息，比标题小一点 |
| 时间（右上角"昨天/15:30"） | PingFang | Regular 400 | 12px | 辅助信息，最小字号 |
| 未读数字角标 | PingFang | Bold 700 | 12px | 强强调，用字重+白字突出 |
把三个属性合起来看，微信首页就是最典型的活例子。消息标题（联系人或群名）用无衬线 PingFang、Regular 400、17px——正文主力，清楚不抢戏；消息摘要（最后一条内容）15px——次级信息，比标题小一点；时间（右上角"昨天/15:30"）12px——辅助信息，最小字号；未读数字角标 Bold 700、12px——强强调，用字重加白字突出。
看懂了这句就抓住全书在字体上的核心：微信几乎只用一种字族（无衬线），靠字号拉开层级（17→15→12），只有未读数这种"非看不可"的才用粗体。这就是层级比大小重要的活例子。
深度
无衬线 vs 衬线：什么时候用衬线？ 无衬线（默认）适合小字号、屏幕、中文、正文——干净利落，屏幕上看最清楚。衬线（慎用）适合大字号、标题、品牌气质、纸质书——有文化感，但小字号在屏幕上会发虚。规则：界面正文几乎不用衬线；想用衬线，只用在"大字号标题"上，且一个界面最多 2 种字族。
为什么正文不能小于 16px？ 手机屏幕近（约 30cm），但太小字还是要眯眼。正文 16-17px 是可读下限；12px 只能给"看不看都行"的辅助信息（时间、角标）。辅助信息可以小，正文不能小。
在 Penpot 里怎么设字体？ 选中文字图层 → 右侧「文字 Text」面板：Font（字族）下拉选 PingFang SC / Noto Sans；Font Size（字号）直接输入数值，如 17；Font Weight（字重）下拉选 Regular 400 / Medium 500 / Bold 700。改三个属性，观察层级变化。实战：新建一个文字，把三个属性调到下表的微信值，再对比"全 17px"的样子——差距一拉开，专业感立刻出来。
| 元素 | 字族 | 字号 | 字重 |
|---|---|---|---|
| 聊天页正文 | PingFang SC | 17px | Regular 400 |
| 首页消息标题 | PingFang SC | 17px | Regular 400 |
| 消息摘要 | PingFang SC | 15px | Regular 400 |
| 时间 | PingFang SC | 12px | Regular 400 |
| 未读角标数字 | PingFang SC | 12px | Bold 700 |
误区
| 误解 | 正解 |
|---|---|
| "字要大才看得清" | 层级比大小重要。正文 17px 够用，关键是标题够大、辅助够小，落差拉开，而不是把所有字都调大 |
| "花哨字体显专业" | 界面用无衬线为主。花哨字体（衬线/手写）在屏幕上发虚、抢戏 |
| "加粗就能突出" | 加粗是最后手段。先拉开字号，再考虑字重 |
| "字重就是字号" | 不对。字重是粗细（音量），字号是大小（距离），两个独立属性 |
| "正文用 12px 能多放点内容" | 12px 不可读，用户不看 = 白放。正文保底 16-17px |
| "界面多放几种字体显得丰富" | 最多 2 种字族。字族越杂越乱，微信全场一种无衬线 |
练习
即时题一 界面正文通常用哪类字族？为什么？
答案
无衬线 Sans。它干净、不抢戏，屏幕小字号下最清楚。即时题二 下面哪个是正确的微信首页"时间"字号：a) 17px · b) 12px · c) 24px？
答案
b——时间是辅助信息，12px 最小字号即可。即时题三 想让一句话"突出"，正确的顺序是什么？
答案
先拉开字号，再把字重调到 500-700。字重是最后一道强调手段，别一上来就加粗。模块题 微信首页这三处（消息标题、摘要、时间），字号分别是多少？它们之间为什么要有落差？
参考思路
标题 17px、摘要 15px、时间 12px。落差拉开层级，读者一眼就按"标题→摘要→时间"的顺序读，知道先看什么、哪些是次要。模块题 一个界面里，字族最多用几种？微信用了几种？
参考思路
最多 2 种。微信几乎只用 1 种无衬线（PingFang SC），靠字重和字号区分层级。迷你案例：找出一段界面 CSS 的三个问题 下面这段 CSS 缩到 5 行，找出问题（正文同理照搬即可）：
css
h2 { /* 标题 */
font-family: "Times"; /* ①衬线做界面标题? */
font-size: 17px; /* ②和正文一样大? */
font-weight: 400; /* ③比正文还细? */
}三个问题：① 标题用了衬线 Times New Roman——界面默认换无衬线 PingFang SC；② 标题 17px 与正文一样大——应拉到 20-24px 拉开层级；③ 标题字重 400 与正文一样——应提到 600-700 用字重强调。
改对后（压缩版 5 行）：
css
h2 { /* 标题 */
font-family: "PingFang"; /* 换无衬线 */
font-size: 24px; /* 拉大层级 */
font-weight: 700; /* 加粗强调 */
}进阶体验（可选） 打开任意一个 App（微信也行），试着手动改三处字号——标题、正文、时间。你会发现：三者差距越大，界面看起来越"专业"；差距太小，就"平平一团"。在 Penpot 里新建文字，把三属性调到微信值，再对比"全 17px"的样子，专业感立刻出来。
素材
- PingFang SC（苹方）：iOS/微信中文默认无衬线字体，系统自带，不用下载。
- Noto Sans SC：安卓中文默认无衬线字体，Google 开源，可到 Google Fonts 下载。
- Google Fonts：
fonts.google.com——免费字体库，可试听/预览不同字族气质。 - 进阶体验（可选）：本知识点无强制演示，文字 + 微信案例已足够；想加深"层级"印象，可跳到知识点 05 排版层级的字号滑块，从 12 拉到 24，亲眼看看层级怎么从"平"变"有重点"。
- 下一节：知识点 05 排版层级 Type Scale——本知识点奠定了"字号拉开差距"的直觉，下一节把它固化成一套标准字号阶梯。