简体中文文本排版指南

简体中文文本排版指南

强烈建议知乎优化专栏文章撰写的编辑器,最好是能直接对接微信公众号的格式! @知乎小管家 (字号、颜色都不能改说不过去)

强烈建议知乎优化专栏文章在移动端显示效果(png 格式透明像素显示黑色这个太塑料了,我又重新更新了 jpg 格式图片)

有朋友知道专栏图片水印如何设置为取消吗?效果太差了。


全文超过七千字,建议先收藏。微信公众号的原文为:(如果在文中提到本片推送的排版格式说明,以微信公众号文章的编辑格式为准。)


如何只用文本就排出精致感(上)mp.weixin.qq.com图标


如何只用文本就排出精致感(下)mp.weixin.qq.com图标



在扁平化设计语言里边,去掉了很多拟物效果之后,为了将信息本身更好的呈现出来,注重字体排版成为非常重要的一点。而且在移动端阅读成为人们日常生活行为的今天,如何将文本排出既符合人们阅读习惯又美观的效果显得非常重要,对于平时的办公(比如制作文档和演示文稿等等)也大有裨益。

如何让我们手中鼠标操作下的文本呈现出优秀的视觉效果和传达效果,这篇文章将从以下四个方面来作详细阐述:


  • 字体选择
  1. 微软雅黑 + Arial
  2. 苹方-简 + Montserrat
  3. 字符间距
  • 对比构建
  1. 字号对比
  2. 字重对比
  3. 色彩对比
  • 段落设置
  1. 对齐方式选择
  2. 亲密性与几个间距
  3. 重复与段落栏宽
  • 排版规范
  1. 全角与半角
  2. 中英文空格
  3. 标点符号使用


其中不少做法是基于个人经验的总结,有一些做法甚至与以前小学老师教的手写规范有冲突,比如换段的缩进问题。这些冲突是在不同体系框架下的考量因素产生变化引起的,不属于原则性问题,这里先提前作一个说明。


1. 字体选择


由于我在制作演示文稿的时候,往往都是优先考虑在最少时间内快速实现较好的呈现效果,所以在字体选择这块,尽量做减法,大多数时候都是直接使用两种固定搭配:

  • 主要在自家电脑用:苹方-简 + Montserrat
  • 在其他电脑上通用:微软雅黑 + Arial

我在制作演示文稿的时候,一般中文字体和英文字体使用的是不同的字体,这在 PowerPoint 上直接框选文本,然后右键单击选择「字体」会弹出修改字体设置的选项卡,将这个选项卡设置好后,可以用「格式刷」工具快速地更改其他文本框的样式。

图 1 在 PowerPoint 中修改字体选项

关于其他更多字体的介绍,公众号以前有一系列文章,有感兴趣的朋友,可以去翻一翻,日常使用用固定搭配最高效不过了。

选好了字体种类,设置好「字符间距」就非常重要了。相比于微软雅黑 + Arial 的搭配,我其实更喜欢苹方-简 + Montserrat。有一个很重要的原因在于微软雅黑字体形态扁宽,一段段的文本排成豆腐块之后会稍显拥挤。

我在使用微软雅黑字体的时候经常会将「字符间距」加宽,而且加宽还要根据字号大小来加宽,什么意思呢?比如字号大小为 40 左右,我会将「字符间距」设置为加宽 2 磅,字号大小为 20 左右,我会将「字符间距」设置为加宽 1 磅。这在后面也会有举例。


2. 对比构建


在文本排版过程中,对比、对齐、重复和亲密性这四个基本原则同样适用而重要。此处将对比单独阐述,而其余三个原则会在后文穿插。

对比在文本排版中出现的概率为 100%,经常用来区分信息层级关系。老师们用的各种加粗标红,放大,艺术字等等效果其实都算是对比,只是对比用得太多,强调的东西太多的结果跟没有对比和强调其实是一样的,所以对比的构建要做到「有的放矢」。


2.1 字号对比


我在公众号推文的大标题,小标题,正文之间就一直在通过字号大小来进行对比,而且我有一个习惯,我喜欢用倍数关系,喜欢用约数较多的偶数字号。说起来有点绕,其实就是使用 12,16,24,36,48,60,72,80……这样的数字作为字号大小,当然,还有整十数。

比如我在这篇文章中,一级标题字号大小使用的是 48px,二级标题使用的是 32px,正文文本是 16px。层级关系的明显区分利于读者跟着我的写作思路来阅读理解这些文字。

下面这两个例子是在 PowerPoint 中排版的文本。大标题与正文之间字号同样有 3 倍关系,其中为了让两个例子比例接近,我将微软雅黑 + Arial 组的文本适当缩小了几磅。

图 2 微软雅黑 + Arial 组文本对比构建

图 3 苹方-简 + Montserrat 组文本对比构建

字号大小对比其实是很显然的一件事情,当我们制作演示文稿的时候,对于字体样式不一样的文本,建议拆分为不同文本框处理,尽量不要在同一个文本框中使用多个字体样式(加粗、标红这种强调还是 OK 的)。


2.2 字重对比


字重对比其实就是字体粗细对比,字重对比是比较容易被忽略的一点,包括我自己之前也对字体加粗有一些小偏见,觉得字小纤细才精致,其实完全不是这样的,该用粗体字构建对比的时候还是得大胆用上的。

以上提到的微软雅黑和 Arial 对加粗的支持算是比较好的,苹方和 Montserrat 本身就有多个字重。在构建字重对比的时候也是比较方便的。大号的粗体字很容易成为整个页面的焦点,用起来「屡试不爽」。需要注意的是,成段的文本全部加粗的可读性较弱,一般不建议使用。


2.3 色彩对比


字体色彩的对比也很容易理解,用得比较多的有运用单色系对比运用多色进行区分,以及「黑白灰 + 壹」的用色技巧。下面这个例子用的就是黑白灰单色系构建的亮度对比,当然,改变文本透明度大小同样可以实现对比,在图 2 和图 3 的文本段落就使用了 20% 透明度的白色。

图 4 黑白灰单色构建文本对比

运用多色的一种典型情况就是在制作一些关系图的时候,比如几个组织或机构合作干某一件事的流程图,其中不同组织有不同的分工,这个时候经常会使用到不同颜色对这几个组织机构的职责进行区分,而且关系图经常会结合后面要提到的文本背景色背景框来进行制作。

大家可以想象思维导图的例子,思维导图里边经常将某一板块使用同一种颜色以示这一部分内容有逻辑上的联系。比如我如果要做一张关系图或一个演示文稿来阐述演示中的三个角色,那么我会选择三种颜色来作为每一个角色的内容部分的主题色。

图 5 运用颜色对不同板块内容进行区分

在大的框架下使用颜色,我一直推荐的是:「黑白灰 + 壹」的模式,其中的「壹」其实就是我们平常说的彩色,这个彩色可以作为主题色,也可以作为点缀色或强调色。比如,在前面的例子中引入一个彩色就可以得到另一个效果:

图 6 「黑白灰 + 壹」构建文本色彩对比

使用「彩色」作为点缀色在网页中也是非常常见的做法,小面积的「彩色」可能不怎么占空间,但它又足够起眼,不会让你找不到它,因此网页中的一些关键链接和重要按钮都会用颜色标记的形式出现,举一个大家比较熟悉的例子——苹果官网的「购买」按钮。

图 7 苹果官网的「购买」按钮

不管是内容繁多的市场调研报告,还是简洁的幻灯片,使用「黑白灰 + 壹」构建色彩对比(不局限于文本)都是高效可行的办法。

图 8 内容繁多的市场调研报告中的色彩对比

图 9 简洁幻灯片中的色彩对比运用


文本背景


文本背景其实与色彩对比关系密切,文本的背景边和背景填充,包括一些其他效果,比如文本的描边等等,赋予了文本更多的可能性,

相比于前面所说的三种对比,对文本背景进行设置,构建对比的操作难度更大一点,也更难以把握一些,相对来说,使用的场景也要局限一些,最典型的就是像思维脑图这种关系图了,这里不做重点说明。

图 10 平板结合手写也可以构建对比

上面这张图是我用平板上的 APP 结合手写得到的文本效果,细心的读者可能也发现了我其实在前面的标注中也用了手写,偶尔用一用这种呈现形式感觉也是不错的。


3. 段落设置


一般来说,「段落」是指文章中内容意思相对完整的组成单位,以下介绍的内容对「段落」的涵盖范围做一个扩充,页面可视区域内的成组文本都可视作「段落」,也就是说,一级标题、二级标题和标注内容均视为「段落」。


3.1 对齐方式选择


对齐方式使用情景有两个:一是段落内的行对齐,二是段落之间的对齐。很多朋友制作演示文稿的时候往往只注意了段落内的行对齐,而忽略了段落之间(比如二级标题与正文文本之间)的对齐。

先说段落内部的行对齐,以 Microsoft Office 系列软件为例,对齐方式主要有五种,分别是:左对齐、居中对齐、右对齐、两端对齐和分布文本。

图 11 Microsoft Office 软件中段落的典型对齐形式

其中,右对齐使用得比较少,一般引用别人的话,或摘录一些文本标注引用源的时候会用到,比如:(我在公众号文章里直接通过编辑器制作的举例,知乎专栏的编辑器功能单一,我就直接截图了,后面也有几个例子同样通过截图给出。)

图 12 引用源使用「右对齐」举例

使用得较多的是左对齐、居中对齐和两端对齐。一般来说,只有一两行的一二级标题通常使用左对齐;居中对齐多用在轴心式布局的区域;三行及以上文字较多的文本段落用两端对齐或左对齐(英文仍然推荐用左对齐)。

在考虑对齐方式的时候,主要考量方块汉字在横向和纵向上都有比较好的对齐性质,排版后的「豆腐块」段落文本整体边界的对齐性也好。而西文没有这一特点,单词有长有短,所以栏宽词数较少时,英文排版使用两端对齐时单词间距容易时大时小,参差不齐。参考以下例子:

图 13 英文使用左对齐和两端对齐对比

轴心式布局,居中对齐和分布文本这三者经常两两或者三个同时出现,而且在演示文稿中多用在首页或结尾页。举个例子:

图 14 轴心式布局与居中对齐

在这个例子中,「文本排版的秘诀」和「CAI ZHENYUAN · 2018-11」这两个文本框都是使用的「分布文本」进行的对齐。

其实调整字符间距也是可以实现两个文本框两端对齐的,不过分布文本有一个好处在于其字符间距是随着文本框宽度变化而变化的,不像字符间距一次只能调一个间距数值,而且每次修改还需要点击鼠标和键盘多次。

文本框「谢谢」是使用的居中对齐,整个版面区域呈「轴心式布局」,也可以说是段落间的居中对齐。这种稳稳当当的布局形式常用于演示文档开篇和收尾,一些转折页面同样会用。

段落间的对齐方式用得最多的也是左对齐。这一点太重要了,如何在让几个内容上有联系的部分在视觉上也有联系,对齐是最常见的方式。还有一些比较特殊的对齐方式,比如「斜对齐」和「形状对齐」等等。

下面这个例子中右侧圈出部分就使用了「形状对齐」,这里是一个圆形,其实异形也是可以的,比如文本边界对齐人物轮廓等等。

图 15 杂志版式中的「形状对齐」

另外,对齐还可以参与对比的构建。比如下面这个写作框架的列表除了文本对比之外,还有依靠两条不同左对齐线构建起来的对比。这对于大家在演示文稿中写目录也是有借鉴意义的。

图 16 对齐线参与对比构建,区分信息层级关系


3.2 亲密性与几个间距


对齐是为了让观者知道某几部分内容有某种联系,而亲密性则是为了让观者知道,到底哪些元素之间的联系更加紧密。对于段落亲密性的分析,我又要放出这张我无数次使用的例子了:

图 17 一个说明亲密性的例子

上面这个举例中包含了四个文本框,而不是两个文本框。主要原因在于我将引号单独拿出来处理了,这并不违背对齐的原则,可以理解为「物以类聚」,这种处理方式比较常见,苹果官网等一些场景下就能找到。

至于亲密性,单单这么看可能还看不出我想说什么,那就对其进行一个局部放大,然后把几个间距标出来,我们就很容易发现一些关系了:

图 18 从几个间距关系体现出来的亲密性原则

这一张图中四个间距的大小关系为 C > B > D & A(其实还可以把字符间距也给带上放后面),原因就在于各部分亲密性关系不一样,不作赘述了。稍微提一下主要文本的行距设置,行距设置操作与上篇说的选中英文字体操作类似:

图 19 在 PowerPoint 中设置段落行距等参数

在 PowerPoint 中,行距设置参数有两种:倍数和固定值。这两种设置方式都是可以的,我们在看行距设置是不是合理的时候,关注的是 A、B、C 这样的「间距」的大小。这个间距太小会使文本的辨识度降低,远大过行的高度也不太符合阅读习惯(比如下面这两种情况)。

图 20 行距太小或太大都不适合阅读

举例「刻意练习」中(见图 17),大号加粗的主体文本字号为 67pt,使用的行距是固定值 90pt;下面的次要文本字号为 33pt,使用的行距是固定值 48pt。一般来说,文本字号越大,行与行之间的间距(B & D)相对于行高要小。用数据关系表示就是:

90 ÷ 67 < 48 ÷ 33

可能有点晦涩,再举个例子吧:

图 21 字号大小影响行距的大小设置

注意到以上两个文本框的行间距倍数的大小关系了吗?和前面所说的比值含义不完全一致,但大小关系是一致的。出现这种倍数大小关系的原因在于——大字号文本的间距 B 的绝对大小更大,这个间距大小越大,就越容易从视觉上将两行区分开来,所以倍数体现上反而小了。

以上这一点对于英文同样适用,而且由于英文单词集中分布在「三线格」的中间格,这使得其行高在视觉上看起来更小,所以相同字号大小的中文和英文文本出现在同一个视觉区域,具有同等地位的时候,英文文本的行距要小一点才能和谐。比如:

图 22 中英文文本段落混排行距设置

以上中英文文本字号大小均为 36pt,中文文本行距为固定值 70pt,英文的为 60 pt,有兴趣的读者也可以自己在 PowerPoint 中试一试看用同样的行距效果是不是真的要差一些。

另外,同一个文本框中的两个文本段落之间也往往会在行距的基础上增加一点。比如使用有序或无序列表的时候,可以在段落设置中增加段后间距。一些软件或编辑器在列表格式中也会自动增加段前段后间距。

我在编辑推送的时候,经常直接使用「隔行」来区分段落,而且不缩进。屏幕端阅读,不用考虑节省空间,不时隔一两行既区分了段落,又恰好是对版面的一个调节。


3.3 重复与段落栏宽


在制作演示文稿时,文本格式的重复使用,往往意味着几部分内容具有同等地位,而这个时候,页面的分栏也随之出现。强调一下,在之前提到的对比,对齐和亲密性的原则基础上进行「重复」。

图 23 「重复」与「分栏」往往同时出现

重点讲段落栏宽。首先是栏宽的定义,栏宽相对的,而不是绝对的。栏宽是指一行文本中能容多少个字符。一般来说,英文段落的栏宽一行能容纳 7-15 个单词比较合适,中文段落的栏宽一行能容纳 15-30 个字比较合适。

栏宽太「小」视线频繁切换,栏宽太「大」容易阅读疲劳。因此,市面上的 A4 大小杂志在版面上从来不会「一排到底」,而是会对页面进行分栏。

图 24 杂志中的分栏

打住,再往下讲就要引出网格系统了。还提一下我在调整栏宽时的习惯——我会比较留意文本段落右侧的对齐性和最后一行的字数,比如前面的那个例子,栏宽变化一下,效果也会有一些变化(可以试试和前面那个举例找不同):

图 25 调整栏宽时留意右对齐线与最后一行


4. 排版规范

排版规范这部分可能会引起一些人不适,觉得多此一举,太形式感。比如直角引号,中英文之间空格等等,其实这只是因为我们没有这样的意识。

这些规范是随处可见的:在 Word 中编辑文档,Word 会自动在中英文之间增加空格;在 PS 中编辑文本图层,如果将段落的间距组合改为其他组合,也会自动增加半角空格;包括一些比较重视文字编辑工作的公司也会有相关要求。这些规范一般都是为了在追求形式感的同时,更优地呈现信息


4.1 全角与半角

科普内容参考维基百科


首先简单说一说全角与半角。大家知道,汉字以前没有标点符号,是后来从西文中引入的。在文本数字化,走向屏幕的过程中,需要对字符进行编码,这个时候,就有了不一样。英语或拉丁字母语言字符少,使用一个字节的空间来存储一个字符就可以将其覆盖;而汉语、日语和韩语的文字数量大大超过 256 个,故惯常使用两个字节来储存一个字符。

在使用等宽字体的环境下,中日韩文字此时占据两倍于西文字符的显示宽度。所以,中、日、韩等文字称为全角字符,相比起来,拉丁字母或数字就称为半角字符。

有时为了让西文和中日韩的方块字对齐,就让西文字母、数字和标点也占用一个汉字的视觉空间,并且使用 2 个字节存储。这就诞生了中文输入法中的全角字符。

后来随着人们使用习惯慢慢养成,一些符合视觉传达的全角符号就被广泛运用了,比如全角的逗号「,」和句号「。」等等。而全角的数字和字母慢慢就不用了,所以我们看到输入法切换中英文的时候,标点符号会在全角和半角之间进行切换,但是数字和字母仍然保持半角字符。

中文语境下的文本编辑优先使用全角中文标点数字使用半角字符

正确:今年「双十一」销售额突破了 2000 亿人民币,再创新高!
错误:今年“双十一”销售额突破了 2000 亿人民币,再创新高!

完整的英文句,特殊名词和用法,其内容内部使用半角标点

正确:乔布斯在斯坦福的演讲中有一句话令人印象深刻——「Stay hungry, Stay foolish.」
错误:乔布斯在斯坦福的演讲中有一句话令人印象深刻——「Stay hungry,Stay foolish。」


正确:12,000 万亿美元,体温 37.5°, Apple, Inc.
错误:12,000 万亿美元,体温 37。5°, Apple,Inc。


4.2 中英文空格


中英文空格的完整表述为:全角中文字符与半角英文字符和半角阿拉伯数字之间应有一个半角空格。

需要注意的是,在 Word 中编辑文本的时候,Word 会自动在全角中文字符与半角英文字符和半角阿拉伯数字之间增加一个半角空格,所以不需要手动多输入空格。还有一些其他软件可能也有相关设置,使用时要留意。

正确:在 2018 年 10 月 30 日,苹果公司在纽约发布了新一代的 iPad Pro,售价 ¥6499 起。
错误:在2018年10月30日,苹果公司在纽约发布了新一代的iPad Pro,售价¥6499起。


数字和英文单位之间不用空格,这一点有异议,作为推荐。

推荐:该品牌一部储存容量为 128GB 的智能手机售价大概 3000 元。
避免:该品牌一部储存容量为 128 GB 的智能手机售价大概 3000 元。


全角标点符号与前后字符之间不要空格。

正确:前段时间,北京新开了一家高科技的「海底捞」火锅店。
错误:前段时间 ,北京新开了一家高科技的「 海底捞 」火锅店 。


正确:PPT(PowerPoint 的缩写)是……
错误:PPT (PowerPoint 的缩写)是……


4.3 标点符号使用


标点符号主要有句号、引号、逗号、顿号、冒号、圆括号……对于什么时候用什么标点,句号该放在引号内还是引号外这些内容这里不重点介绍。

在屏幕端阅读的简体中文文本推荐使用直角引号,比较正式的、需要打印的文件推荐使用正常的全角双引号(引号内部再引用使用全角单引号)。

示例一:「妈妈,你能再给我讲讲『小红帽』的故事吗?」
示例二:“妈妈,你能再给我讲讲‘小红帽’的故事吗?”


中文语境下文本中的纯英文词汇和短语圆括号用半角,左半括号前和右半括号后增加半角空格。(根据个人经验用全角圆括号也是可行的,但使用半角圆括号不加半角空格是错误的。)而括号内含有简体中文一律用全角圆括号

正确:使用 PowerPoint 时运用好组合命令的快捷键 (Ctrl-G) 能提高工作效率。
错误:使用 PowerPoint 时运用好组合命令的快捷键(Ctrl-G)能提高工作效率。
正确:好的 CIS(企业视觉形象识别系统,英文 Corporate Identity System 的缩写)能强化品牌认知。
错误:好的 CIS(企业视觉形象识别系统,英文 Corporate Identity System 的缩写)能强化品牌认知。


列举项目等语境下使用全角冒号,时刻表示使用半角冒号

正确:文本对比构建主要有以下方法:字号对比、字重对比和色彩对比。
错误:文本对比构建主要有以下方法:字号对比、字重对比和色彩对比。


正确:「8:00 am」或「上午 8:00」
错误:「8:00 am」或「上午 8:00」


多个并列的书名号、引号之间不需要使用顿号。

正确:现在这么大年纪的小孩子就已经读过《小王子》《动物庄园》《傲慢与偏见》等英文读本了。
错误:现在这么大年纪的小孩子就已经读过《小王子》、《动物庄园》、《傲慢与偏见》等英文读本了。


正确:中国道家文化讲究「道」「法」「术」「器」「势」。
错误:中国道家文化讲究「道」、「法」、「术」、「器」、「势」。


当表示数值间的范围(例如日期、时间或数字),或当表示两个名词的复合,或表示图序、表序的标号时使用连字符 ( - )

示例:2012-2018 年 GDP 增长,氧化-还原反应,图 3-2。


标点符号不能出现在行首。这一点在大多数的文本编辑软件中都会有相应的自动设置,避免标点符号出现在行首的情况。(不包括引号、书名号和破折号等比较特殊的标点,它们是可以出现在行首的,但是句号、逗号和感叹号这些表示句子节点的标点不能放在行首。



文本排版篇结语


这篇文章构思了很久,行文前思维导图已经比较清晰,文章写得很舒坦。小小的一个文本框,需要注意的地方其实挺多的,不过我总觉得像这样的工作,以后会有一些更智能的辅助工具能做得很好,来让我们直接选择然后「套用」。

希望连更的这两篇文章能对各位的文本编辑工作和提高字体与排版审美有所帮助(深夜发文希望也能有很多人看到啊),下一个推文主题正在酝酿中。


原文链接:

如何只用文本就排出精致感(上)mp.weixin.qq.com图标


如何只用文本就排出精致感(下)mp.weixin.qq.com图标


蔡振原 于北京

2018 年 11 月

编辑于 2020-03-12

文章被以下专栏收录