📝 03 - 文字排版
文字是UI界面的主角——用户阅读的内容、点击的按钮、填写的表单，全部依赖文字传达。优秀的排版不仅让信息清晰易读，更能传递品牌的性格和品质感。本课将从字体选择到文本样式系统，全面掌握Figma的文字排版能力。
📌 本课要点
- 文字工具的使用：点击创建 vs 拖拽创建文本框
- 字体选择策略：系统字体、Google Fonts、字体搭配原则
- 行高与字距：可读性的关键参数
- 文本样式系统：创建和管理全局文字样式
- 自动布局与文本：Hug/Fill模式、文本截断
- 实战案例：设计一个完整的排版系统
一、文字工具基础
1. 创建文字的两种方式
点击创建（点文本）
按 T 激活文字工具，在画布上点击（不要拖拽），输入文字。
- 文本框宽度随内容自动扩展
- 回车换行时宽度不变
- 适合：标题、按钮文字、标签
- 属性面板显示为宽度"Hug"
拖拽创建（区域文本）
按 T 激活文字工具，在画布上拖拽出一个矩形区域，输入文字。
- 文本框宽度固定，文字自动换行
- 内容超出时显示省略号或溢出
- 适合：段落文字、描述、文章内容
- 属性面板显示为固定宽度值
⚠️ 重要区别：点文本的宽度会随内容变化——改一个字，宽度就变了，可能影响整体布局。区域文本的宽度固定，内容变化不影响布局。在自动布局中，这个区别尤其重要。推荐：短文本用点文本，长文本用区域文本。
2. 文字属性面板
选中文字元素后，右侧属性面板的文本区域包含所有可调整的排版属性。
🔤 核心排版属性
| 属性 | 英文名 | 常用值 | 说明 |
|---|
| 字体 | Font family | Inter, SF Pro, Roboto | 选择字体系列，Figma内置Google Fonts |
| 字重 | Font weight | Regular/Bold/Semibold | 同一字体的粗细变体 |
| 字号 | Font size | 12/14/16/20/24/32px | 遵循8px网格，小文本可用4px |
| 行高 | Line height | 120%-160% | 每行文字的垂直高度，影响可读性 |
| 字距 | Letter spacing | -2%~5% | 字符之间的水平间距 |
| 段距 | Paragraph spacing | 0-16px | 段落之间的额外间距 |
| 对齐 | Text align | Left/Center/Right/Justify | 文字的水平对齐方式 |
| 文本装饰 | Decoration | Underline/Strikethrough | 下划线或删除线 |
二、字体选择策略
字体选择不是随意挑一个"好看"的字体——它需要考虑品牌调性、可读性、跨平台一致性和性能。
1. 系统字体：安全且高效
💻 各平台系统字体
| 平台 | 默认字体 | 中文回退 | 特点 |
|---|
| iOS/macOS | San Francisco (SF Pro) | PingFang SC | 苹果设计语言核心，中性现代 |
| Android | Roboto | Noto Sans SC | Google设计语言，开放易用 |
| Windows | Segoe UI | Microsoft YaHei | 微软系统默认，商务风格 |
| Web通用 | Inter / system-ui | 自定义 | 专为屏幕设计的开源字体 |
Figma默认字体：Inter——一款专为屏幕UI设计的开源字体，支持丰富的字重变体，是大多数项目的安全选择。
💡 字体选择原则：如果你不确定用什么字体，就用 Inter。它免费、开源、专为屏幕设计、字重齐全（100-900）、可读性极好。Google、Apple、Microsoft 都在自己的产品中使用类似的无衬线体。不要为了"独特"而选择小众字体——独特性来自内容和交互，不来自字体。
2. 字体搭配：最多两种
🎨 字体搭配原则
- 一种无衬线 + 一种衬线：如 Inter（正文）+ Playfair Display（标题），形成对比
- 同一字体不同字重：如 Inter Bold（标题）+ Inter Regular（正文），最安全
- 绝对不要超过3种字体：2种最佳，1种也不少（很多优秀产品只用一种字体）
- 功能优先：标题字体可以个性鲜明，正文字体必须清晰易读
✅ 推荐搭配
- Inter + Merriweather（科技+优雅）
- Inter + Inter（纯Inter系统，最安全）
- SF Pro + SF Pro Rounded（苹果生态）
- Roboto + Roboto Slab（Google生态）
❌ 避免的做法
- 3种以上字体混用
- 两种衬线体搭配
- 手写体/装饰体用于正文
- 字体过小（<12px）或过大（>72px，除非特殊设计）
三、行高与字距：可读性的关键
行高和字距是影响文字可读性的两个关键参数，但常常被新手忽略。
1. 行高（Line Height）
📏 行高设置指南
| 文本类型 | 推荐行高 | 说明 |
|---|
| 标题（24px+） | 110%-120% | 紧凑行高，标题文字看起来更凝练有力 |
| 正文（14-16px） | 140%-160% | 舒适行高，让眼睛轻松跳到下一行 |
| 辅助文字（12px） | 130%-150% | 稍紧凑，辅助信息不需要太多呼吸空间 |
| 按钮文字 | 100% | 与按钮高度完全对齐，无额外空间 |
Figma中行高设置方式：在属性面板的行高输入框中，可以选择 Auto（字体的默认行高，通常是1.2倍字号）、px（固定像素值，如24px）或 %（百分比，如150%）。推荐使用百分比，这样字号变化时行高比例保持一致。
1行高调整实操：创建一个16px的文字，默认行高是Auto（约19px）。将行高改为150%（24px），你会看到行间距明显增加，文字更"透气"。继续增加到200%，行间距过大，阅读时眼睛需要跨越更大距离——反而降低可读性。找到最佳平衡点。
2. 字距（Letter Spacing）
↔️ 字距设置指南
| 场景 | 推荐字距 | 原因 |
|---|
| 小号正文（12-14px） | 0~2% | 稍加间距提升小文字的可读性 |
| 大号标题（24px+） | -1%~-2% | 大字号默认间距偏大，微缩更紧凑 |
| 全大写标题 | 3%~8% | 大写字母间需要更多空间才不拥挤 |
| 数字/数据 | -1%~0% | 等宽感的数据更专业 |
| 中文正文 | 0% | 中文字符自带均衡间距，通常不需要调整 |
💡 Figma字距单位：Figma中字距使用百分比（%）而非像素值，这意味着字距会随字号等比例缩放。1%的字距在16px字号下约等于0.16px的间距。如果你想精确设置，可以切换到px模式。
四、文本样式系统
文本样式（Text Styles）是保持排版一致性的核心工具。定义一套文本样式，整个项目就能确保标题、正文、注释等使用统一的字体、字号和行高。
1. 创建文本样式
1选中文字创建样式：选中一个已经设置好排版属性的文字元素，在右侧属性面板点击字体名称旁的 四个点图标（样式按钮）→ 点击 "+" → 输入样式名称。例如选中一个24px Bold的文字，命名为"Heading/Large"。
2命名规范：推荐使用
类别/尺寸 的命名方式，如：
Heading/XL — 32px BoldHeading/L — 24px BoldHeading/M — 20px SemiboldBody/L — 16px RegularBody/M — 14px RegularBody/S — 12px RegularLabel/M — 12px MediumCaption — 10px Regular
这样在样式选择器中可以按类别快速找到需要的样式。
3应用文本样式：选中文字元素，在样式选择器中选择已创建的样式。也可以点击样式名称旁的图标，从面板中选择。文字属性立即更新为样式定义的值。
4修改样式全局生效：右键样式名称 → Edit style，修改任何属性后，所有使用该样式的文字自动同步更新。这就是样式系统的核心价值——一处修改，处处生效。
2. 完整排版系统示例
📐 标准排版体系
Heading/XL : 32px / Bold / Line height: 120% / Letter: -1%
Heading/L : 24px / Bold / Line height: 120% / Letter: -0.5%
Heading/M : 20px / Semibold/ Line height: 130% / Letter: -0.5%
Heading/S : 16px / Semibold/ Line height: 140% / Letter: 0%
Body/L : 16px / Regular / Line height: 150% / Letter: 0%
Body/M : 14px / Regular / Line height: 150% / Letter: 0.5%
Body/S : 12px / Regular / Line height: 150% / Letter: 0.5%
Label/L : 14px / Medium / Line height: 100% / Letter: 1%
Label/M : 12px / Medium / Line height: 100% / Letter: 1%
Caption : 10px / Regular / Line height: 140% / Letter: 0.5%
这个体系遵循类型缩放（Type Scale）原则：每个级别之间字号差异显著（约1.25倍），确保信息层级清晰可辨。行高随字号增大而收紧，字距随字号增大而略缩。
五、文本与自动布局
文字在自动布局中是特殊的——它的尺寸行为取决于文本类型和设置。
📦 文本在自动布局中的行为
| 场景 | 宽度模式 | 行为 | 推荐 |
|---|
| 按钮文字 | Hug | 按钮宽度随文字长度自动调整 | ✅ 默认，适合多语言适配 |
| 卡片标题 | Fill | 标题宽度填满卡片，长标题自动换行 | ✅ 适合不确定文字长度时 |
| 导航项 | Hug | 导航项宽度自适应文字 | ✅ 每个导航项宽度不同但合理 |
| 段落文本 | Fill + 固定宽度 | 段落宽度由父容器决定 | ✅ 区域文本 + Fill容器 |
1文本截断：当文字超出容器时，选中文字元素，在右侧属性面板找到 Truncate text 选项。开启后，超出的文字显示为省略号（...）。这在列表项、卡片标题等空间有限的场景中非常实用。
2最大行数：在Truncate text旁可以设置 Max lines（最大行数），例如设为2行，超过2行的文字被截断显示省略号。这在新闻卡片、评论列表中常用。
六、文字特效与高级技巧
1. 文字描边
给文字添加描边(Stroke)可以创建特殊视觉效果。注意：文字描边是向内和向外各扩展一半，会略微影响字形的粗细。常见用途：Logo文字描边、深色背景上的浅色文字增强对比。
2. 文字遮罩
1用文字裁剪图片：将一张图片放在文字图层上方，选中两者，右键 → Use as mask（⌃+⌥+M）。图片会被文字形状裁剪，只显示文字范围内的图片内容——创建出图片填充文字的效果。
3. 文字路径（沿曲线排列）
Figma目前不原生支持文字沿路径排列。如果需要此效果，可以使用插件 Text on Path，或手动将每个字母旋转放置在曲线上。
4. OpenType特性
🔤 OpenType高级特性
选中文字后，在右侧属性面板点击字体名称旁的 三个点 图标，可以访问OpenType特性：
- Tabular figures——等宽数字，数字对齐（适合表格、价格显示）
- Proportional figures——比例数字，更自然（适合正文）
- Ligatures——连字，如fi、fl自动合并（适合西文正文）
- Stylistic alternates——风格替代字形
实用提示：在价格、数据表格中务必开启Tabular figures，否则不同数字宽度不一导致列不对齐。
七、实战案例：设计一个文章卡片
让我们运用排版知识，设计一个完整的文章卡片组件。
1创建Frame：按 F 创建350×auto的Frame，添加自动布局（垂直，Gap:16，Padding:24，白色背景，12px圆角，Drop Shadow）。
2添加标签：使用 T 输入"设计趋势"，应用 Label/M 文本样式（12px Medium），颜色设为主题色（如#8b5cf6）。
3添加标题：输入"2024年UI设计的10个关键趋势"，应用 Heading/S 样式（16px Semibold）。设置宽度模式为Fill，确保标题填满卡片宽度，长标题自动换行。开启Truncate text，Max lines设为2。
4添加描述：输入一段摘要文字，应用 Body/M 样式（14px Regular），颜色改为#6B7280（灰色）。同样Fill宽度，Max lines 3行。
5添加底部信息行：创建一个水平自动布局的Frame，包含作者名（14px Medium）和日期（12px Regular，灰色），Space Between对齐。作者名和日期之间用 · 分隔。
6检查排版层级：审视卡片的视觉层级——标签最小最轻、标题最突出、描述居中灰色、底部信息最小。用户视线应该自然地按 标签→标题→描述→底部的顺序流动。如果某个层级不够突出，调整字号或字重。
八、排版设计原理
📐 排版四原则
- 层级分明：标题 > 正文 > 辅助文字，通过字号、字重、颜色三个维度拉开差异。相邻层级至少差2px字号或1个字重级别。
- 对齐一致：所有文字左对齐（最常见的正文对齐），标题可以居中（适合Hero区），但一个区域内不要混用对齐方式。
- 节奏感：标题和正文之间、段落之间的间距应该遵循倍数关系。例如标题到正文16px，正文段落间12px，行高8px网格的整数倍。
- 留白即呼吸：不要把文字塞满空间。文字周围足够的留白让信息更容易被接收。文字密度 ≠ 信息密度。
✅ 设计原理：可读性是排版的第一目标。再好看的字体，如果阅读费力就是失败的排版。行高1.5倍、字距微调、字号不小于12px——这些不是"建议"，是经过大量用户研究验证的最佳实践。
九、总结与练习
✅ 本课知识检查
- 点文本和区域文本的区别是什么？各自适合什么场景？
- 为什么行高对可读性如此重要？正文的推荐行高比例是多少？
- 如何创建一个文本样式？命名规范建议是什么？
- 在自动布局中，按钮文字应该用什么宽度模式？段落文字呢？
- Tabular figures是什么？在什么场景下必须开启？
🎯 练习：构建完整排版系统
- 创建排版文件：新建Figma文件"03-Typography System"
- 定义文本样式：按照本课的排版体系，创建10个文本样式（Heading/XL到Caption）
- 创建展示页：创建一个Frame，展示所有样式在实际场景中的效果——模拟一个博客文章页，包含标题、副标题、正文段落、引用、注释等
- 检查层级：眯起眼看页面，确保标题最突出、正文清晰可读、辅助文字不抢眼
- 修改测试：修改Heading/L的字号，验证所有使用该样式的文字是否同步更新
完成标志：一套完整的文本样式，加上一个实际排版展示页面，修改样式后全局同步生效。
📝
第三课完成！
你已经掌握了Figma文字排版的核心技能。下一课我们将学习色彩与样式——让设计从黑白变成彩色。