简体中文文本排版指南

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

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

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

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

如何让我们手中鼠标操作下的文本浮现出优良的视觉后果和转达后果,这篇文章将从以下四个方面来作详细论述:

  • 字体选择
  • 微软雅黑 + Arial
  • 苹方-简 + Montserrat
  • 字符间距
    • 对照构建
  • 字号对照
  • 字重对照
  • 颜色对照
    • 段落设置
  • 对齐方法选择
  • 密切性与几个间距
  • 反复与段落栏宽
    • 排版规范
  • 全角与半角
  • 中英文空格
  • 标点符号应用
  • 其中不少做法是基于个人经验的总结,有一些做法甚至与以前小学老师教的手写规范有冲突,比如换段的缩进问题。这些冲突是在不同系统框架下的考量因素发生变更引起的,不属于原则性问题,这里先提前作一个阐明。

    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 月