排版设计：让文字自己说话的艺术
排版设计，可能是设计里最被低估的技能。
很多人觉得：排版不就是把文字摆整齐吗？有什么难的？
但真正的高手都知道——排版，才是设计的基本功。
你看那些大师的作品，很多时候没有花哨的图形，没有复杂的插画，就是纯文字。 但就是这些纯文字的排版，能让你看得津津有味，甚至感受到强烈的情绪和力量。
这就是排版的力量。
这篇文章，我们从文字的基础出发，一直聊到系统的排版规范。
排版的本质：信息的秩序
在讲排版技巧之前，我们先搞清楚一个问题：排版到底是干嘛的？
排版不是"美化文字"
很多人对排版的理解是"把文字弄得好看一点"。 这是错的。
排版的第一要务，不是"好看"，而是"好读"。
- 用户能不能快速找到他想要的信息？
- 用户能不能轻松地读完一段文字？
- 用户能不能看懂内容的层级和逻辑？
这些才是排版首先要解决的问题。
好看，是附加值。 好读，才是根本。
排版 = 信息的组织和引导
如果说内容是"肉"，那排版就是"骨架"。
好的排版，会给信息建立秩序——
- 什么最重要？（标题）
- 什么次重要？（小标题）
- 什么是正文？（内容）
- 什么是补充说明？（注释）
用户一眼扫过去，不用仔细读，就能大概知道：
- 这篇文章讲什么
- 分几个部分
- 重点在哪里
排版，就是在给用户"带路"—— 引导用户的视线，控制用户阅读的节奏。
排版的三个目标
1. 可读性（Readability）
- 文字能不能看清？
- 读起来累不累？
- 长时间阅读能不能坚持？
这是最基本的要求。
2. 易读性（Legibility）
- 能不能快速找到重点？
- 能不能理解内容的结构？
- 能不能扫一眼就获取信息？
这是排版水平的体现。
3. 美感与风格（Aesthetics）
- 看起来舒不舒服？
- 有没有风格和调性？
- 能不能传递品牌感？
这是更高阶的追求。
顺序不能乱：先保证可读性，再追求易读性，最后才是美感。
很多新手一上来就追求"好看"，结果文字都看不清——这就是本末倒置。
字体基础：选对字体是第一步
排版的第一步，是选字体。
字体选对了，排版就成功了一半。
字体的分类
字体的种类很多，但常用的可以归为几大类。
1. 衬线体（Serif）
- 特点：笔画的末端有"小爪子"（衬线）
- 代表：宋体、Times New Roman、Georgia
- 感觉：传统、正式、高端、有文化感
- 适合：标题、正文（印刷品）、文艺类、高端品牌
2. 无衬线体（Sans Serif）
- 特点：没有衬线，笔画比较均匀
- 代表：黑体、Helvetica、Arial、Inter、苹方
- 感觉：现代、简洁、清晰、中性
- 适合：屏幕显示、UI 设计、正文、科技品牌
3. 手写体/书法体（Script / Handwriting）
- 特点：像手写的一样，有个性
- 代表：各种手写字体、书法字体
- 感觉：有温度、有个性、文艺、优雅
- 适合：标题、装饰、LOGO、文艺品牌
- 注意：不要用在正文里，太难读了
4. 等宽字体（Monospace）
- 特点：每个字符的宽度都一样
- 代表：Courier、Menlo、Consolas、JetBrains Mono
- 感觉：理性、科技、代码感
- 适合：代码、数据、表格、技术类内容
5. 装饰字体（Display / Decorative）
- 特点：造型独特、有设计感
- 代表：各种艺术字体、创意字体
- 感觉：有个性、有冲击力
- 适合：大标题、LOGO、海报
- 注意：只能少量用，用多了就乱了
中文字体 vs 西文字体
中文排版和西文排版，有很多不一样的地方。
中文字体的特点：
- 方块字，每个字占的宽度差不多（大部分是）
- 结构复杂，笔画多
- 字号太小了会糊
- 字重的层级比较少（一般只有 3-5 种）
西文字体的特点：
- 字母有宽有窄（比如 m 比 i 宽很多）
- 结构相对简单
- 字重的层级很多（100-900，9 种字重）
- 有大小写、斜体等变化
中英混排的注意事项：
- 中文和西文之间要留一点空格（视觉上更舒服）
- 中文字号和西文字号要匹配（看起来一样大）
- 中文用中文字体，西文用西文字体，不要用中文字体里的西文，太丑了
怎么选字体？
选字体不是"哪个好看选哪个"，而是"哪个合适选哪个"。
选字体的几个维度：
1. 看品牌调性
- 传统、高端、文化 → 衬线体
- 现代、科技、简洁 → 无衬线体
- 年轻、活力、有趣 → 圆润一点的无衬线体，或者手写体
- 高端、奢华 → 精致的衬线体
2. 看使用场景
- 屏幕显示 → 无衬线体（更清晰）
- 印刷品（书、杂志）→ 衬线体（更耐看）
- 大标题 → 可以用有个性的字体
- 长文正文 → 一定要用易读的字体
3. 看目标用户
- 老年人 → 字号要大，字体要清晰
- 儿童 → 圆润、可爱的字体
- 专业人士 → 稳重、专业的字体
4. 看字体的完整性
- 字全不全？生僻字能不能显示？
- 有没有足够的字重？（至少 Regular + Bold）
- 有没有斜体？
- 中英文搭配好不好看？
免费字体推荐：
- 中文：思源黑体、思源宋体、站酷系列、阿里巴巴普惠体、OPPO Sans
- 西文：Inter、Roboto、Open Sans、Lato、Montserrat
字体是有版权的，商用一定要买授权，或者用免费可商用的字体。
字重与字族
好的排版，只用一种字体也能做出丰富的层次——靠的就是字重。
什么是字重（Weight）？ 就是字体的粗细。
常见的字重命名：
- Thin（100）：最细
- Light（300）：细
- Regular / Normal（400）：常规
- Medium（500）：中等
- SemiBold / DemiBold（600）：半粗
- Bold（700）：粗
- ExtraBold（800）：特粗
- Black / Heavy（900）：最粗
不是所有字体都有这么多字重，一般有 3-5 种就够用了。
字重怎么用？
- 标题：粗一点（Bold / Black）
- 副标题：中等（Medium / SemiBold）
- 正文：常规（Regular）
- 注释、次要文字：细一点（Light）
- 重点强调：加粗（Bold）
只用一种字体，靠字重来区分层级，是最稳妥、最高级的做法。 很多新手喜欢用好几种字体，结果显得很乱——其实把一种字体用好，就足够了。
排版四大基本要素
排版的核心，就是处理四个东西：字号、行高、字间距、段间距。
这四个要素调好了，排版就不会差。
字号（Font Size）
字号是最基础的，但也是最有讲究的。
正文字号多大合适？
- 屏幕阅读：14px - 16px 是比较舒服的
- 印刷品：10pt - 12pt 左右
- 老年用户：适当放大，18px 以上
正文是阅读的主体，太小了累眼，太大了效率低。
标题字号多大？ 标题要比正文大，大多少？ 这取决于你想要的视觉冲击力。
常见的标题层级（以正文 16px 为基准）：
- H1：28-36px（大标题）
- H2：22-26px（二级标题）
- H3：18-20px（三级标题）
- H4：16px（和正文一样大，加粗即可）
字号的比例关系 好的字号系统，不是随便定的——它是有比例的。
常见的比例：
- 1.2 倍（Minor Third）：比较保守，层级差异小
- 1.25 倍（Major Third）：常用，比较舒服
- 1.333 倍（Perfect Fourth）：层级更明显
- 1.414 倍（Augmented Fourth）：跳跃比较大
- 1.5 倍（Perfect Fifth）：差异很大，冲击力强
比如用 1.25 倍的比例：
- 正文：16px
- H4：16 × 1.25 = 20px
- H3：20 × 1.25 = 25px
- H2：25 × 1.25 ≈ 31px
- H1：31 × 1.25 ≈ 39px
有比例的字号系统，看起来会更和谐、更有秩序。
行高（Line Height）
行高，就是一行文字的高度。 行高直接影响阅读的舒适度。
行高多大合适？
- 正文：行高一般是字号的 1.5-1.8 倍
- 比如 16px 的正文，行高用 24px-28px
- 标题：行高可以小一点，1.2-1.4 倍
- 标题字号大，行高太大了会散
为什么行高很重要？
- 行高太小：行与行挤在一起，读着累，容易串行
- 行高太大：行与行离太远，读着费劲，节奏慢
行高的规律：
- 字号越小，行高倍数越大（小字号需要更大的行高才好读）
- 字号越大，行高倍数越小（大标题行高太大就散了）
- 西文行高可以小一点，中文行高要大一点（中文字形更满）
行高是排版里最容易被忽略，但对阅读体验影响最大的因素之一。
字间距（Letter Spacing / Tracking）
字间距，就是字与字之间的距离。
字间距什么时候调？
1. 大标题
- 标题字号很大的时候，字间距可以适当收紧一点
- 因为字号大了，默认的字间距会显得太松
2. 全部大写的英文
- 全大写的英文，字间距通常要放宽一点
- 不然会显得挤在一起，不好读
3. 小字号的注释文字
- 字号很小的时候（比如 10px、11px），字间距可以适当放宽一点
- 不然笔画会粘在一起，看不清
4. 想营造"高级感"的时候
- 很多高端品牌喜欢用很宽的字间距
- 比如奢侈品的海报，文字间距拉得很开，显得很高级
字间距的原则：
- 正文一般不用调，默认的就挺好
- 不要乱调字间距，调不好会很难读
- 调完之后要离远一点看，看看是不是均匀
段间距（Paragraph Spacing）
段间距，就是段落和段落之间的距离。
段间距比行高要大——这样才能区分开"换行"和"换段"。
段间距多大合适？
- 一般是行高的 0.5-1 倍
- 比如行高 24px，段间距可以是 12px-24px
段间距的作用：
- 区分段落：让用户知道这是另一段内容了
- 提供呼吸感：读了一段，休息一下
- 控制节奏：段间距大，节奏慢；段间距小，节奏快
很多新手排版，段落之间只有一个换行——看起来就是一大坨，没有呼吸感。 给段落之间留够距离，阅读体验会好很多。
间距系统：8px 栅格
字号、行高、间距……这些数值不是随便定的。 专业的设计系统，会有一套统一的间距规则。
最常见的是 8px 栅格系统：
- 所有的间距、尺寸，都是 8 的倍数
- 8px、16px、24px、32px、40px、48px……
为什么是 8？
- 8 可以被 2 整除，好缩放（比如一半是 4，再一半是 2）
- 主流屏幕的分辨率都是 8 的倍数
- 不多不少，间距层级刚好够用
更精细一点的，可以用 4px 栅格——
- 小间距用 4 的倍数（4、8、12）
- 中间距用 8 的倍数（16、24、32）
- 大间距用 16 的倍数（32、48、64）
有了间距系统，就不用每次都想"这里空多少？那里空多少？" 直接从系统里选就好——
- 小间距：8px
- 中间距：16px
- 大间距：24px
- 超大间距：32px 或 48px
一致的间距，会让你的设计看起来更专业、更有秩序。
对齐与栅格
排版的秩序感，很大程度上来自于对齐。
对齐的四种方式
1. 左对齐（Left Align）
- 左边对齐，右边不齐
- 最常用、最好读的对齐方式
- 适合：正文、大部分内容
- 优点：有清晰的"左边缘"，视线容易找
2. 居中对齐（Center Align）
- 两边都不齐，居中
- 适合：标题、诗歌、短句子、装饰性文字
- 优点：正式、优雅、有仪式感
- 缺点：长文居中很难读，不适合大段文字
3. 右对齐（Right Align）
- 右边对齐，左边不齐
- 用得比较少
- 适合：日期、数字、注释（放在右边的时候）
- 优点：特殊的排版效果
4. 两端对齐（Justify）
- 左右两边都对齐
- 适合：印刷品、书籍、报纸
- 优点：整齐，有秩序感
- 缺点：可能会出现"字间距参差不齐"的问题（特别是中文）
什么时候用什么对齐？
- 正文：左对齐（最好读）
- 标题：居中或左对齐（看风格）
- 数字：右对齐（方便对比大小）
- 诗歌/名言：居中（有感觉）
- 印刷品长文：两端对齐（更整齐）
一个页面里，对齐方式不要太多—— 一两种就够了，多了会乱。
一个页面只有一条对齐线
这是排版里非常重要的一个原则：尽量用同一条对齐线。
什么意思？ 就是页面上的所有元素，都尽量往同一条线上对齐—— 比如都左对齐到同一条竖线上。
这样做的好处是：
- 页面有秩序感
- 视觉上更整洁
- 用户的视线有轨迹可循
很多新手排版，这个元素左对齐，那个元素居中，另一个右对齐—— 看起来就很乱，没有章法。
最稳妥的做法：
- 整个页面以左对齐为主
- 标题可以居中，但也要在同一个中轴线上
- 所有元素都往栅格里靠
栅格系统（Grid System）
栅格，是排版的骨架。
什么是栅格？ 就是把页面分成等宽的几列，内容都排在这些列里。
比如：
- 12 列栅格（最常用）
- 16 列栅格
- 24 列栅格
栅格的作用：
- 保证对齐：所有内容都对齐到列上，自然就整齐了
- 提高效率：不用每次都想"放哪里"，按栅格来就好
- 多人协作：不同设计师做出来的东西，结构是统一的
- 方便开发：前端工程师可以直接按栅格写代码
12 列栅格为什么最常用？ 因为 12 的约数最多——
- 可以分成 1 列
- 可以分成 2 列
- 可以分成 3 列
- 可以分成 4 列
- 可以分成 6 列
- 可以分成 12 列
灵活度最高。
栅格不只是给 UI 设计用的—— 海报、杂志、书籍……只要是排版，都可以用栅格的思路。 栅格不是束缚，是解放——它帮你把"秩序"搞定了，你可以把精力放在内容和创意上。
基线栅格（Baseline Grid）
除了横向的列栅格，还有纵向的基线栅格。
什么是基线？ 就是文字底部对齐的那条线。
基线栅格就是——
- 所有的文字都对齐到同一条基线上
- 行高是基线间距的倍数
- 图片、组件的高度也是基线间距的倍数
基线栅格做好了，整个页面的文字会有一种"对齐的美感"—— 左边的文字和右边的文字，行与行都是对得齐齐的。
这种细节，普通用户可能说不出来哪里好，但就是会觉得"这个设计看起来很舒服、很高级"。
层级与节奏
好的排版，是有节奏感的—— 有重有轻，有快有慢，有张有弛。
建立清晰的视觉层级
用户看页面的时候，不是"读"的，而是"扫"的。 他扫一眼，能不能快速抓住重点，能不能理解内容结构——这就是层级的作用。
怎么建立层级？ 主要靠这几个维度的对比：
1. 字号对比
- 重要的字大，不重要的字小
- 这是最直接、最有效的层级区分方式
2. 字重对比
- 重要的字粗，不重要的字细
- 同样字号的情况下，靠字重来区分
3. 颜色对比
- 重要的字颜色深（黑色）
- 次要的字颜色浅（灰色）
- 强调的字用品牌色
4. 间距对比
- 重要的内容周围留白多（更突出）
- 次要的内容挨得近（更紧凑）
层级越多越好吗？ 不是。 层级太多，用户会混乱。
一般来说，3-5 个层级就足够了：
- 一级标题（最大、最粗）
- 二级标题
- 正文
- 次要文字/注释
- 强调文字（颜色不同）
层级越少，越简洁、越高级。
对比原则：要不一样，就差很多
这是排版里非常重要的一个原则：如果两个元素不一样，就让它们明显不一样。
什么意思？ 比如标题和正文：
- 标题 18px，正文 16px → 差别太小，没什么层级感
- 标题 24px，正文 16px → 差别明显，层级清晰
再比如字重：
- 标题 Medium，正文 Regular → 差别太小
- 标题 Bold，正文 Regular → 差别明显
"差不多"是排版的大忌。 要么就一样（说明它们是同级的），要么就差很多（说明它们不是同级的）。 高不成低不就，最尴尬。
这个原则叫做——对比要强烈（Use Strong Contrast）。
亲密性原则：相关的内容要靠近
排版四大基本原则（来自《写给大家看的设计书》）里，有一个很重要的原则：亲密性（Proximity）。
什么意思？ 相关的内容，要放在一起，靠近一点。 不相关的内容，要分开，离远一点。
比如：
- 标题和下面的正文是相关的 → 它们之间的距离要近
- 正文和下一个标题是不相关的 → 它们之间的距离要远
听起来很简单？但很多人都做反了——
- 标题和正文离得很远
- 段落之间的距离和标题的距离差不多
结果就是：用户分不清哪个标题对应哪段内容。
亲密性原则的核心： 用距离来表达"关系"——
- 近 = 有关系
- 远 = 没关系
用户不需要你解释，眼睛一看就懂。
排版的节奏感
排版就像音乐—— 不是一直快，也不是一直慢。 有高潮，有低谷，有停顿，有呼吸。
好的排版节奏是什么样的？
- 开头要有冲击力：大标题、大图，一下子抓住注意力
- 中间要有节奏感：标题、正文、小标题、正文……有快有慢
- 重点要突出：重要的内容，周围留白多，视觉上更突出
- 结尾要有余韵：不要戛然而止，要有一个收尾
怎么控制节奏？
- 通过字号的大小变化：大标题 = 强音，正文 = 平稳，小字 = 弱音
- 通过间距的变化：大间距 = 停顿、呼吸，小间距 = 紧凑、快速
- 通过颜色的变化：深色 = 重要、突出，浅色 = 次要、背景
- 通过图片和文字的穿插：图 = 视觉休息，文 = 信息密度
有节奏的排版，读起来是一种享受。 没有节奏的排版，读起来像念经——平平板板，让人犯困。
长文排版：让阅读成为享受
长文排版，最见功底。
因为长文要读很久——一点点不舒服，乘以几千字，就会变成很大的痛苦。
行长（Measure）
行长，就是一行文字有多少字。
行长直接影响阅读体验。
行长多长合适？
- 中文：一行 30-40 个字比较舒服
- 英文：一行 50-75 个字符比较理想
为什么行长很重要？
- 行太短：频繁换行，读着累，打断思路
- 行太长：读完一行，找不到下一行的开头，容易串行
不同场景的行长：
- 书籍：一般 20-30 字（因为书比较窄）
- 网页文章：600-800px 宽度的正文容器
- 手机：差不多就是屏幕宽度（手机本身就窄）
很多新手做网页设计，喜欢把正文拉得很宽—— 一行能放 60 个字，结果读起来特别累。
记住：正文不是越宽越好，合适的宽度才最好。
最佳实践：中文排版的细节
中文排版有很多小细节，做好了，质感会提升一大截。
1. 中英文之间留空格
- 比如："学习 React 框架"，而不是"学习React框架"
- 视觉上更透气，更好读
2. 中文和数字之间留空格
- 比如："今天是 2024 年"，而不是"今天是2024年"
3. 标点符号的使用
- 中文用中文标点（全角）
- 英文用英文标点（半角）
- 不要混着用
4. 避免行首行尾的禁忌
- 行首不要出现标点（除了引号、括号的前半部分）
- 行尾不要出现前引号、前括号
- 专业的排版软件会自动处理，但网页上需要注意
5. 强调的方式
- 不要用下划线（中文里下划线不好看，而且像链接）
- 推荐用：加粗、改颜色、加背景色
- 斜体尽量少用（中文的斜体不好看）
6. 序号的对齐
- 有序列表的数字，最好右对齐
- 这样列表的左边缘是整齐的，更好看
这些都是小细节，但细节决定品质。
列表与引用
长文里，列表和引用是调节节奏的好工具。
列表的排版要点：
- 列表项之间的间距要合适
- 列表符号（圆点、数字）和文字之间要有足够的距离
- 列表整体和上下文要有明显的区分（前后留白多一点）
- 如果列表项比较长，可以加大行距
引用的排版要点：
- 引用要有明显的视觉区分（左边一条竖线、或者换个颜色、或者斜体）
- 引用的文字可以适当缩小一点、或者换个颜色
- 引用的前后要有足够的留白
- 引用的来源（作者、出处）可以单独放，字号小一点
列表和引用，就像文章里的"休息站"—— 读了一大段正文，看到一个列表或引用，眼睛可以休息一下。
品牌排版系统
个人作品可以随意，但品牌设计需要系统。
一套专业的品牌排版系统，能保证所有物料的文字风格都是统一的。
字体系统（Type System）
品牌字体系统，至少要定义清楚这些：
1. 字体选择
- 中文字体：用什么？
- 西文字体：用什么？
- 等宽字体：用什么？（代码、数字用）
- 如果是网页/APP，还要考虑降级字体（用户没有这个字体的时候，用什么替代）
2. 字号层级
- H1 多大？
- H2 多大？
- H3 多大？
- 正文多大？
- 小字多大？
- 最好形成一个有比例关系的字号系统
3. 字重规范
- 标题用什么字重？
- 正文用什么字重？
- 强调用什么字重？
- 不要有太多字重，2-3 种就够了
4. 行高规范
- 正文行高是多少？
- 标题行高是多少？
- 小字的行高是多少？
定义清楚这些，不管是谁来做设计，出来的文字风格都是统一的。
字体与品牌调性
字体的选择，直接影响品牌的气质。
我们来感受一下：
衬线体（Serif）的气质：
- 传统、经典
- 高端、奢华
- 文化、艺术
- 正式、稳重
适合：
- 奢侈品
- 文化品牌
- 高端酒店
- 出版社、书店
- 律师事务所、金融机构
无衬线体（Sans Serif）的气质：
- 现代、简洁
- 科技、未来
- 年轻、活力
- 中性、客观
适合：
- 科技公司
- 互联网产品
- 年轻品牌
- 快时尚
- 大多数 APP 和网站
圆润的无衬线体：
- 可爱、亲切
- 温暖、友好
- 年轻、有活力
适合：
- 母婴品牌
- 食品饮料
- 社交产品
- 教育产品
手写体/书法体：
- 有个性、有温度
- 文艺、优雅
- 手工、匠人
适合：
- 文创品牌
- 咖啡馆、花店
- 设计师个人品牌
- 婚礼、活动
没有最好的字体，只有最合适的字体。 选对了字体，品牌的气质就出来了一半。
网页字体加载优化
网页用自定义字体，会有一个问题：字体加载需要时间，可能会出现"FOIT"（文字先隐藏，等字体加载完才显示）或者"FOUT"（先用系统字体，加载完再换成自定义字体，会闪一下）。
怎么优化？
1. 字重只加载需要的
- 不要把 9 个字重全加载了
- 一般加载 Regular + Bold 就够了，最多再加一个 Medium
2. 只加载用到的字符集
- 如果只用中文，就不要加载西文、日文、韩文……
- 中文字体很大，可以用"字体子集化"，只提取用到的文字
3. 使用 font-display: swap
- 先显示系统字体，等自定义字体加载完再换
- 虽然会闪一下，但至少用户能马上看到内容
- 比让用户盯着空白等半天好
4. 预加载关键字体
- 用
<link rel="preload">预加载最重要的字重 - 让关键字体更快到位
字体加载是体验的细节，但很影响用户的第一印象。
经典案例分析
案例一：《纽约时报》的排版——传统媒体的典范
《纽约时报》（The New York Times）的排版，是传统媒体的标杆。
它的特点：
1. 经典的衬线体
- 正文用 NYT Cheltenham（定制的衬线体）
- 标题用更粗的衬线体
- 非常有传统、权威的感觉
2. 多栏排版
- 报纸是多栏的，网站文章也是相对较窄的正文栏
- 行长合适，好读
- 符合阅读习惯
3. 清晰的层级
- 大标题 → 摘要 → 署名 → 正文 → 小标题
- 层级非常清晰
- 扫一眼就知道文章结构
4. 克制的装饰
- 没有花里胡哨的东西
- 排版本身就是装饰
- 内容是绝对的主角
《纽约时报》的排版告诉我们：好的排版，是让你注意到内容，而不是注意到排版本身。
案例二：苹果官网的排版——极简主义的极致
苹果官网的排版，是极简主义设计的代表。
它的特点：
1. 巨大的标题
- 标题字号非常大，冲击力很强
- 但文案很短，一两句话
- 一下子就能抓住注意力
2. 大量的留白
- 文字周围有大量的留白
- 产品周围有大量的留白
- 整个页面很"透气"
3. 清晰的层级
- 大标题 → 副标题 → 正文 → 链接
- 层级分明，节奏很好
- 虽然字少，但信息传达很高效
4. 统一的字体
- 整个网站只用 San Francisco 一种字体
- 靠字号、字重、颜色来区分层级
- 非常统一、非常高级
5. 图文配合
- 文字和产品图配合得很好
- 文字是产品的说明，产品是文字的展示
- 相辅相成
苹果的排版告诉我们：少即是多。把最重要的东西放大，其他的都简化。
案例三：MUJI 无印良品的排版——"空"的美学
无印良品的排版，和它的产品一样——极简、克制、空。
它的特点：
1. 大量留白
- 真的是大量大量的留白
- 文字只占很小的一块
- 但你就是会注意到那些文字
2. 统一的网格系统
- 所有内容都对齐在网格上
- 非常整齐，非常有秩序
- 有一种"干净到极致"的美感
3. 克制的字体
- 只用很朴素的无衬线体
- 字重变化也很少
- 没有任何装饰性的东西
4. 灰色的运用
- 很多文字不是纯黑的，而是深灰色
- 看起来更柔和、更高级
- 不刺眼，很舒服
无印良品的排版，是"无设计的设计"—— 看起来好像什么都没做，但每个细节都经过精心推敲。 最高级的排版，就是让你感觉不到排版的存在。
案例四：川久保玲 PLAY——文字也是图形
川久保玲的 PLAY 系列，大家都认识——那个歪歪扭扭的红心，还有两个黑眼睛。
但你有没有注意过它的文字排版？
它的特点：
1. 文字就是图形
- PLAY 的文字，不是"读"的，而是"看"的
- 字体、字号、排列方式，都是图形的一部分
- 文字和图案是一体的
2. 打破规则
- 不一定左对齐，不一定居中
- 可以歪，可以斜，可以叠在一起
- 故意"不整齐"，反而有了个性
3. 极简但有力量
- 就一个 logo，几个字
- 但视觉冲击力很强
- 过目不忘
这个案例告诉我们：排版的规则是用来遵守的，但也是用来打破的。
- 商业排版，要遵守规则，保证好读
- 创意排版、艺术排版，可以打破规则，追求个性和冲击力
但前提是——你得先知道规则是什么，然后再谈打破。
排版的常见误区
最后，我们来说说新手排版最容易犯的错误。
误区一：用太多字体
新手最常见的问题：一个页面里用了好几种字体。
- 标题用一个字体
- 正文用一个字体
- 装饰又用一个字体
- 英文还换一个字体
结果就是——乱。
正确做法：
- 整个页面尽量只用 1-2 种字体
- 一种字体，靠字重、字号、颜色来区分层级
- 如果用两种字体，一般是"标题字体 + 正文字体"的组合
少即是多。把一种字体用好，比用好几种字体更高级。
误区二：颜色太多
和字体一样，文字的颜色也不要太多。
很多新手喜欢——
- 标题红色
- 副标题蓝色
- 重点绿色
- 注释紫色
结果就是——花。
正确做法：
- 主文字色：黑/深灰
- 次要文字色：中灰
- 辅助文字色：浅灰
- 强调色：1 种（品牌色）
总共 3-4 种颜色就够了。
误区三：对齐方式太多
左对齐、居中、右对齐、两端对齐……一个页面里全用上了。
结果就是——没有秩序。
正确做法：
- 一个页面以一种对齐方式为主
- 最多再加一种辅助的
- 所有元素尽量对齐到同一条线上
误区四：到处都是重点
"这里要加粗，那里要换颜色，那个地方也要强调一下……"
结果就是——到处都是重点 = 没有重点。
正确做法：
- 一个页面里，真正的重点只有 1-2 个
- 其他的该弱化就弱化
- 有对比，才有重点
误区五：间距太小，挤在一起
很多人怕"太空"，所以什么都挤得很紧——
- 行高很小
- 段间距很小
- 元素和元素之间挨得很近
结果就是——看着累，喘不过气。
正确做法：
- 别怕留白
- 留白不是浪费，是呼吸
- 适当加大行高和段间距，阅读体验会好很多
写在最后
排版到底是什么？
我觉得，它是一种"尊重"——
- 对读者的尊重：让读者轻松地获取信息，而不是费劲地找
- 对内容的尊重：让好的内容，有一个好的呈现方式
- 对设计的尊重：在细微之处，体现专业和用心
排版不是什么高深莫测的艺术。 它是一堆细节的积累——
- 字号大一点小一点
- 行高多一点少一点
- 间距宽一点窄一点
- 对齐一点偏一点
这些细节，单个看好像都不重要。 但堆在一起，就决定了一个设计的品质。
新手和高手的差距，往往就在这些细节里。
怎么提升排版能力？ 没有捷径，就是多看、多练、多琢磨。
- 多看优秀的设计，看看别人是怎么排的
- 多做练习，纯文字的排版也能练出功夫
- 多对比，自己的设计和大师的设计，差距在哪里
慢慢地，你的眼睛就会越来越"刁"—— 差 1px 你都能看出来，行高不对你浑身难受。
到那个时候，你的排版就真的入门了。
愿我们都能做出—— 让读者舒服、让内容发光的好排版。