文字设计和视觉文化

中文排版网格系统的五大迷思

「孔雀计划:中文字体排印的思路」系列倡导从中文出发、以中文的思维方式讨论中文排版。本篇将着眼于宏观字体排印与微观字体排印的关系,从中文排版的底层本质为大家理清对「网格」的各种迷思。

也许对于很多设计师来说,版式设计中最经典的一个工具就是「网格」。瑞士现代设计的代表设计师约瑟夫·米勒–布罗克曼 (Josef Müller-Brockmann) 在半个世纪前整理出了一套西方的网格系统理论,被平面设计师们奉为圭臬,其著作《平面设计中的网格系统》也是设计师必读之书。该书于 2016 年发行简体中文版时,笔者也参与了监修工作。

理论重在实用。近年来,有很多设计师一方面没有吃透西方设计理论中「网格系统」的内容,另一方面又缺乏对中文网格的学习,把西方网格理论生搬硬套到中文排版里,做出了一些看似有网格、实际上却完全不符合中文体例的排版。本文就针对这些现象,对网格系统在中文排版中应用中常见的误区和迷思做一简单的分析。

在讨论开始之前,笔者必须指出本文讨论的重点对象是「编辑设计」中字体排印的情况,即主要针对书刊杂志以及长文阅读的网页的排版。这与整体视觉、海报等平面设计的「版式」的情况应该区别对待,敬请诸位读者留意。

迷思之一:网格是「舶来品」

en-grid
InDesgin 中的西式网格:在「首选项」设置「基线网格」之后打开「显示基线网格」,并在「网格对齐方式」里指定「罗马字基线」的效果。
cn-CJKgrid
InDesign 的中式网格:「框架网格」模式并指定「根据 CJK 网格调整字符间距」的效果。

很多设计师总觉得「网格系统」是诞生于瑞士「国际主义风格」的一个舶来品,现在拿来用都显得很「洋气」。可实际上,仔细阅读布罗克曼的《平面设计中的网格系统》就能发现,作者在书中后半部分「设计案例」中特别提到了东亚的网格系统,并以日文杂志《艺术手帖》的排版为例,明确写道「日文与中文一样,都是建立在正方形的基础上。」

《平面设计中的网格系统》书影,以《艺术手帖》的排版为例展示日文排版的网格。

在汉字文化圈,无论是在中国还是日本,传统报刊杂志的「定版设计」都是采用方格稿纸。也就是说,在设计版面时先要定下「基本正文字号」「基本正文行距」绘制出稿纸,即中文的基本网格。之后,在针对所有的标题、分栏等元素,不以毫米、点为单位,而都是以「字」「行」为基本单位进行设计。比如,对每个板块的设定都是按照「宽度占多少字、高度占多少行」的算法,绝对不会出现类似「行长/栏宽为 20.15 个字」这类尴尬的宽度。

以这种「稿纸模式」为基准进行排版计算的思路是真正从汉字方块字出发的、为汉字服务、符合汉字方块特征的方法,从铅字时代开始传统印刷行业就一直遵守这个模式,而这个流程在现代排版软件(如 Adobe InDesign、方正飞腾/飞翔)中同样也可以准确实现。

左边这份「小型报纸版式定版设计样」中,所有分栏、标题等元素都是基于正文字号的网格进行的。而右边则是使用 Adobe InDesign 对这种工作流程进行的完美复现。

西文排版中本没有「格」。在西方古登堡式印刷术诞生以来很长一段时间,西文一直只有「分栏」,而直到后来对版面控制的要求逐渐提高,需要更多的参考线才另外定义出网格。与西文不同,「方块汉字」的属性决定了汉字本身就是「一字一格」,因此对于中文来说,网格本身是已蕴含在中文字体排印内部的一个基本元素,可以从一个字格扩展到整个版面网格,这个网格绝对不是舶来品。

本系列文章的《「中西之别」重考》一文中笔者已指出,中文原生的网格系统就是所谓的「稿纸模式」,这个模式最具有中文特色,最能反映中文的需求,也更能体现和发挥中文排版的特性,而版面中最小网格即正文字号的正方形。这个「字格」是西文所没有的概念——中文可以套用西文橫格稿纸,但是用中文稿纸写西文就非常别扭。

当然,中西网格在本质上并非是水火不容。会熟练使用网格的设计师都有这样的经验,即单位网格画得越小,运用起来就越灵活。而中式网格就可以看成是西式网格系统的一个特例:把单位网格做成一个正文汉字大小,此时中西网格的概念就实现了融合。

迷思之二:做版式先留边距

如前所述,中文排版的基本单位要以「字格」计算,所以文本框的宽度即「一行排多少字」,必须要根据字宽计算。这对于方块汉字来说理所当然,也是必须的。

而西式排版的工作流程则不同。由于西文没有「字格」,因此采用「先算边距,再剩下版心」的做法,将页面剩下中间的部分当做版心填满文字即可。对于很多技法谙熟的字体排印师来说,往往还会套用各种版心样式,甚至会利用数学计算,采用「黄金分割」这类无理数(无限不循环小数)的比例数值来设置版心、栏宽。另一方面,西文字母本身就是比例宽度(所谓的「不等宽」),长文排版也多用左对齐而不用两端对齐,而且即使在两端对齐时也能灵活调整,较好地填满版心,因此对于文本框宽度没有严格要求。

然而,中文里的方块汉字决定了中文不具有西文的灵活度。事实上,传统中文出版界的做法与西文正好相反,是「先算版心,再余白」:

当版面确定后,设计者的任务就是确定版心的尺寸,以及版心在版面上的占位。以文字为主的出版物,在确定版心的尺寸时,是以排版正文字号的字数来确定行长(即版心宽度),再以行数和行间空距之和为版心长度。
——《实用出版与印刷工作手册》(第二版),1998年,印刷工业出版社。

由于方块汉字本身一字一格,因此中式排版必须先计算栏宽(比如每行 25 个字)定下版心之后,再把版心摆放到页面上。至于页边距里的天头、地脚、切口、订口这些「余白」的数值,是页面减去版心之后计算出来的,也就是说,并非事先「定」出来、而是之后「余」出来的。如果像西文那样先定边距,再去套汉字,这样的版心套上汉字就很容易出现不足一个汉字宽的零碎值。如果以这样非整字数倍的版心宽度/行长设置里再进行「两端对齐」,字距肯定不可控。

InDesign-OpenGrid
Adobe InDesign 在「新建」文件时的「版面网格」选项就是使用中文网格排版的工具。(图片选自 本站会员专享会刊 T06)
taoge

在中国传统的印刷术里,无论是雕版时代还是活字时代,一直都是先在书框里「套格」再进行「摆书」的。中西文种的差异是版式设计里工作流程差异的根本原因。这是传统做法,也是中文网格的起源,只要汉字是方块字,「字格」总是存在的。

迷思之三:不知中文排版的「占字」「占行」为何物

接上节所述,中文排版有了稿纸模式的基础网格之后,所有元素都是通过「占格」「占行」的描述来进行定位。这样的表述其实司空见惯,却往往很难按照西文方式(包括以西文思路开发的排版软件)的方式实现,比如

  • 中文段首缩进要「空两格」——西文的缩进多用点、毫米等绝对单位设定
  • 中文花名册里的人名列表宽度以「占三格」为栏宽——西文多用大网格通过 tab 对齐
  • 中文小标题的高度「占三行位置」——西文多通过段落间距进行控制
  • 中文栏间距为「占两个字」宽度——西文多依照网格用点、毫米等绝对单位设定
1927 年鲁迅为自己《朝花夕拾十篇》做的设计要求和成品。请注意左图中鲁迅本人用红字注明对字号的要求如「2」(即二号字)「5」(即五号字),以及对行距的要求如「空两格」「空一格半」等。

占字处理

由于汉字是中文网格的最小单位,所以在处理中文排版的时候,各元素都统一采用「占几个字」来描述。甚至连行内的标点符号也如此,比如在中国国标 GB/T 15834—2011《标点符号用法》中采用的用法都是「句号占一个字位置」云云。

而小学语文课上老师要求的「段首空两格」这样简单、基础的要求,居然很少能正确地在现代排版中被复现。很多设计师在使用 Adobe Illustrator 及 InDesign 等专业排版工具时,费力地去用「段落」面板里原本为西文排版流程设置的功能、别扭地用毫米去定义段首缩进,却不知道软件本身实际上已经配备了更为方面的、为中文排版而特别设置的功能如何使用。

paragraph-indet
中文段首空两格应该在哪里设置?Adobe 软件中「段落」面板中的「段首缩进」是以西文排版流程设计的,使用的单位是毫米,和中文习惯不符。
InDesign-ChineseIndent
Adobe InDesign 为中文预设的「段首缩进」功能,放在了「中文排版设置」对话框(2020 版之前称为「标点挤压设置」)中,还能进一步设置段首缩进与前括号的关系。

「花名册」也是一个富有中文特色的排版方式。中文的花名册即「人名列表」在正统的排版里往往需要按照「占三格位置」的占字法进行排版,比如下图中报纸所采用的方法。由于基础网格是「占三格」,因此,如果姓名过短,比如仅有两个汉字,则需要在姓名之间加一个字宽的空,以便与三个汉字的姓名对齐;反之,如果姓名过长或者加带其他信息,则其后的姓名不是固定空一格起排,而是必须依照「占三字」形成的网格,从下一个网格开始的地方开始排,以实现对齐。

非常遗憾的是,现在有很多平面设计师都不知道这种传统排版的占字排版格式,对人名列表的处理也是当做普通文本复制粘贴了之。原本可以用网格排得整整齐齐的版面,却被搞得乱七八糟。

PepleDaily-2
peopleList

另一方面,从电子书和网页排版方面来看,CSS「盒子模型」的本质从某种意义上说与中文网格非常类似。而 CSS 中的 em 单位即来自印刷排版的所谓「全角」,作为一个相对单位,其实际数值等于字号,使用这个单位就可以直接按「字格」进行定义了。大多数前端工程师也知道,在网页和电子书中实现「空两格」应该将值定义成 2em 而不是直接用 pt 或者 px 等绝对单位。

另外,CSS 中字号 font-size 还有一个看似奇怪的 rem单位,这个单位其实正是依照字格原则而导入的。rem 即 root em、即相对于 root 要素指定的単位,定义的是根元素(root element)的字号。使用这个单位的实际效果即相当于,用正文字号定义出了一个基本网格,也就是「字格」,然后所有其他元素都按照这个网格的倍数进行定位,即「占几个字」。前述普通的 em 是相对于父元素的倍数,会「继承」「遗传」,所以在许多层嵌套后 em 中就很容易迷失,从而带来无法预知的错误风险;而 rem 则直指根元素 ,只需要在根元素确定一个固定值,之后就可以随时拿来调用,清晰明了。这样,网页页面设计思路就能传统印刷页面工作流程的「定版设计」接轨,这也是当时熟悉东亚排版的专家们为何要极力导入 rem 单位的原因。

占行处理

如果以目前常见的横排考虑,「占字」是对横向度量的定义,那么「占行」就是纵向度量的定义。传统中文排版中,页面中非正文元素(比如标题、插图)应该如何摆放,应该通过「占几行」来描述。从思维方式来说,尽管这些非正文元素会临时打破基础字格,但由于是通过占行描述,因此能让其很好的服帖于基础字格,让它们「万变不离其宗」。

在排版中,所有标题都必须是正文行的倍数。
——《当代排版技术概论》第二版,1994 年,印刷工业出版社。
所谓标题的占行,是指在标题排版中,它所占的版面位置应是正文行的倍数。所谓对行,就是在一个版面上和一本书中,所有对应的正文字行都处于一个水平位置上。当所有的标题都是按正文行的倍数排版占位时,自然就能帮助正文对行的要求。
——《实用出版与印刷工作手册》第二版,1998年,印刷工业出版社

很明显,采用「占行」的计算方式可以保证通栏「对行」,版面会更整齐美观,也能提高文章的易读性。

在传统的金属活字排版习惯中,「接排的一级标题约占四五行;二级标题约占二三行;三级标题约占一二行」等等都是常见做法。而且,标题本身也可能不只一行,因此会有「双行题目占三行」这样的操作。这里「占行」当然都是以正文字号为依据说明所占地位,清晰易懂。

然而,由于当代大多数的排版工具都采用的是西文的行距计算法则,对于插入段落间的小标题,多采用「段落间距」的方式进行控制。这样做「对行」并不是不能做,而是相当繁琐,尤其是当时小标题的字号与正文不同时,需要认真计算才能保证网格对齐。

而数码时代的电子排版又如何占行呢?用 CSS 实现「纵向韵律」(Vertical Rhythm) 一直是中西文共通的难题。W3C 曾发布过CSS Rhythmic Sizing 的文档,已经很长时间没有更新,而从「占行」的角度来说,最为接近的属性可能应该是 line-grid,但目前由于专家们针对既有网页如何兼容等问题还有很大争议,这份草案还在激烈讨论中,前景非常不明朗。

当然,网页的纵向韵律控制在具体实践中遇到各种难度,与行高的计算有关。行高问题之所以复杂,是因为前端在进行「CSS 排版」时,实际上并无法预知会在什么平台、通过什么浏览器读取到哪个字体的什么度量信息进行计算,因此交给排版引擎实际渲染时,这其中的每个步骤都有太多变数。因此对于前端工程师来说,在写 CSS 时需要依照最终实现效果而进行妥协决策。这在本篇里不便展开,有兴趣的读者可以参考我们的播客「字谈字畅」第 103 期节目「行高行距行行hánghángxíng

迷思之四:过犹不及地认为「齐就是好」

正如前述,采用字格的中式网格进行排版时,只要控制好那些「非全宽元素」,就能很好地进行中文网格的「纵横对齐」。显然,这些「非全宽元素」包括调整宽度的标点符号、比例宽度的阿拉伯数字和混排在行内的西文字母。所以,如果要执行「网格绝对优先」原则,就可以采用简单粗暴的逻辑,把所有标点用全宽,不调整也不执行避头尾,所有数字和西文都采用全角,那么排出来的自然是「纵横对齐」。

但问题是,这样排出来的效果在造型上是整齐了,但是真的容易读吗?

Taiwanese Bible
台语汉字本《聖經》局部。(来源:台語漢字本聖經 - 掃描版

走路是为了达到目的地,路虽然要平坦,不能坑坑洼洼,但是也不能像大雪原的冰面一样过于平滑,不仅容易跌跤,而且没有树木等参照物反而容易失去方向。同样,阅读是为了获取内容,人眼在扫描文字列的时候自然要顺畅、不能凹凸不平,但也不能过于平整,不仅容易跳行,还容易导致困乏。任何事情都不能矫枉过正,在做排版的时候千万不能单纯为了形式而牺牲内容。

本站编辑钱争予早在 2013 年就曾撰文《纵横对齐不是现代方法》。作为现代汉语的表记形式,既然现代中文已经不能没有标点符号,那么现代中文排版必须对其进行认真细致地调整,根据易读性进行细致的标点宽度调整、避头尾处理换行位置处理,以优先保证易读性。对于混排的阿拉伯数字和西文,也要在现行编辑层面的正字法检查的基础之上(比如权衡使用阿拉伯数字和汉字数字,比如夹杂的西文改用中文词汇等),再进行形式的选择(比如在竖排时合理地采用所谓「全角字符」)。不应该一味让内容妥协于形式,单纯表现形式美的「纵横对齐」,这样的效果这也绝对不是合理使用网格系统的必然结果。

迷思之五:一蹴而就地认为「网格只用来定文本框」

作为《平面设计中的网格系统》日文版监修,日本设计师白井敬尚先生曾说过:「网格系统并不是一种单纯地对页面进行分割手法,而是要在理解字号、行距这些排版基本构造的基础之上才能成立。」因此在中文排版中使用网格系统,就必须要从中文的字号、行距的基本特性开始考虑,才能从本质上活用网格系统。

纵观市面上的中文印刷品,虽然有很多中国设计师说在使用网格,而实际上只是拿西式网格概念硬套在中文上,定出文本框之后就根本不去管文本框内字格问题,拉出的文本框里行长不是字号的整数倍,各行字距不等,根本谈不上去细究行内字格内部的细节。

book1
这本文艺书籍的排版,不仅每段最后一行的字距不同,第三段整段的字距也似乎和前面两段不一样。
Mag
这本中西对照的杂志似乎为了迁就西文的网格而忽视中文文本框的设定,每段最后一行显然字距不同。
Mook
繁体中文杂志多喜欢用「疏排」,可惜排法都不甚正确。这篇报道每段最后一行的字距明显不同。

如前所述,由于汉字本身一字一格,中式网格可以具体到行内。这也是为什么 Adobe InDesign 东亚版需要另外增设「水平网格工具」「垂直网格工具」让用户去设置文本框,而不是像西文那样只是一个简单的框框。而且,在使用中式网格进行微观字体排印时,总是要权衡「优先网格对齐」「打破网格制约」的利弊,进行版面调整。否则,网格形如虚设,段落排出来很容易变得稀疏不匀。

那么,什么是中文排版「具体到字格」的中式网格思维方式呢?在此可以举一个简单例子。在使用所谓「半角式」以及「开明式」排版时,经常会使用「对开」(或者称为「半宽」「二分」)宽度的标点符号。当一行字有偶数个对开标点时,最终行长依旧是整数倍。如下图第三行,其中两个逗号都采用半宽,这两个半宽加起来刚好是一个全宽,这一行依旧是整的。此时,虽然第一个逗号后面的几个字偏移了半格(图中淡绿色部分),但每格依旧字距均匀,并且能在第二个逗号之后又重新向网格对齐。

但是,如果像图中第二行那样,只有奇数个标点时,多余的半个字宽应该如何调整呢?

在活字排版时代多为手工操作,因此会采用工序尽量少、最有效的方式。因此如左图,由于第二行行内有且仅有一个逗号,因此把多余的半个字宽加在逗号后面,实际效果等于将半宽逗号改为全宽。虽然全宽逗号的空略为显眼,但这样既通过清晰显示行内最大的停顿处保证了文章易读性,又让调整范围限于标点而不用去挪动其他字符的字距,还让这一行字保持了网格对齐。

而在后来的照排时代,更多地会对第二行进行两端对齐处理,也就是将多余的半个字宽均摊到每一个字距中,效果如图右。这是活字时代绝对不可能采取的方法,一来活字时代找不到恰好合适厚度的铅空,二来这要求排版工要在每个字后面都手动添加铅空,操作极其繁琐。这样的「均摊」操作,优点是添加的空隙不如左图明显(而且行越长、字数越多越不明显);缺点是这一行的字距被拉大,与上下行都不一样(行越短、字数越少越明显),破坏了「密排」原则。从网格的角度来看,这个操作让第二行的所有字都偏移了网格,而且偏移量与第三行不同,实际上导致了三行字都具有不同的阅读节奏。

这其实只是排版中非常简单且常见的调整实例,这两种方法没有对错之分,只是风格之别。从网格的角度来看,由于需要调整,完全的纵横对齐既然已经不可能达到,那么就只能「尽量」保持部分对齐。如果「优先网格对齐」,可能左图好一些;如果对字距要求不那么细致,采用右图的方式,就必须「打破网格制约」。排版总是需要妥协,关键是在于妥协是否合理,是否与设计逻辑对应。这些才是在微观字体排印中,为了保证读者流畅的阅读体验而需要关注的地方。

小结:是参考线,还是金科玉律?

网格是一个便利的工具,其本质与方块汉字「字格」的特性一致,直接扎根于中文排版的基础之中。以网格为工具进行定版设计,灵活进行占字、占行,能非常高效地,在保证易读性的基础上实现多样化的中文版式。但另一方面,网格终究只是一个工具,需要「活用」而不能「死用」。我们既不能上纲上线地强制所有字符「纵横对齐」,也不能因噎废食地用西式网格随便拉文本框之后就放任不管。实现阅读流畅、版面精致的中文排版,需要以网格为依据,以中文易读性为指标进行具体定夺。哪些是基本原则需要遵守网格,哪些需要活用去打破网格,这既是网格工具的活用精髓,也是用网格排版的乐趣所在。

参考书目与资料

  • 印刷工业出版社编辑部.实用出版与印刷工作手册(第二版).北京:印刷工业出版社,1998.
  • 翟铭、杨新岚.当代排版技术概论(第二版).北京:印刷工业出版社,1994.
  • 曹洪奎.活字排版工艺.北京:轻工业出版社,1979.
  • 周承民等.活字排版工艺.北京:印刷工业出版社,1993.
  • 徐令德.排版基础知识.北京:印刷工业出版社,1999.
  • GB/T 15834-2011 《标点符号用法》

相关链接

尊重原创:关于转载

我们希望在中文环境中建立一种健康的 TrackBack 和链接机制,保证原创,并不影响传播。因此对于译文和原创文章,我们欢迎您在网站上推荐我们的文章,包括文字和图片片段,但不赞成任何形式的全文转载。
参与讨论或通过 TrackBack 推荐:Trackback URL.

参与讨论

你的Email地址将不会被发布或透漏。 标记*的项目为必填项目。

*
*

作者 / 译者