与Eric Liu聊聊中文排版设计

 

「中文排版的技巧和金属活字一起消失啦」

 

UX Coffee:你怎么会想到去做 Type is Beautiful、翻译字体书籍、进入字体排印这个领域的?

 

Eric:这跟我的成长经历有关系。我大学是学外语的,现在也在国外,所以能更客观地看待中文字体排印的现状。Type is Beautiful 的主编 Rex 在伦敦,他做这个博客是因为他发现用中文介绍字体排印的网站特别少,西文却有很多。我们在国外接触到字体排印的信息比较多,也有能力把这些东西介绍给国内,会有一种责任感,思考我们作为个人、组织能做些什么事,就这样越陷越深,无法自拔。

 

这对我们也是一个学习的过程,一开始 Type is Beautiful 的很多文章都是我们自己的学习笔记。前段时间我翻译了《西文字体》系列、《西文排版》,很自然地,我会想有什么介绍中文字体的书,但市面上并没有,所以我就自己开始写。我们要「三步走」,第一步是「拿来主义」,没有东西的话你就去翻译,先去把国外东西学来。第二步是消化。第三步是自己把知识总结写出来。

 

 

Type is Beautiful 是一个关于文字设计和视觉文化的媒体计划。他们关注的话题包括字体、排版、平面设计、公共设计、技术和视觉文化。

 

 

 

UX Coffee:其中你有遇到过什么困难或者挑战吗?

 

Eric:我们第一个遇到的问题就是术语,很多术语在国内都没有公认的翻译,比如说最简单的 Typography 这个词,我会翻译成「字体排印」,国内很多人说是「文字设计」、「字体设计」,但后两者就和 type design 混淆了。如果从概念开始就混乱,那后面谈的东西都是错的。

 

另外,我个人感觉更深的就是「知识断代」。印刷行业经历过三次巨大的技术变革。最早是金属活字、铅字,需要用热铅铸字机。到了 70 年代,印刷被用胶片的照相排版取代。到了现在,大家都使用电脑排印了。

 

随着技术变革,字体设计、字体排印也经历变革,中间的传承就是很严重的问题:在字体设计方面,铅字师傅的基本功和技巧,有没有传给照排师傅?有没有传给现在的字体设计师?在排版方面,以前是有排版师傅的。以前的设计师只做宏观的排版,就是版面设计,比如图放在哪里、文字放在哪里。而剩下的事情,比如一行多少个字,标点符号如何处理,是排版师傅的工作。

 

现在没有排版师傅了,所以要设计师自己去做,但其实设计师并不知道该怎么做。这就是很严重的断代。所以我经常说,中文排版的技巧和金属活字一起消失了。

 

 

金属活字和字体尺

 

 

 

「互联网中文排版发展到什么程度了?连最基本的字体都没有。」

 

从铅字时代到照排时代,再到信息时代,我们把文字排版的任务,很大程度上交给了电脑软件和浏览器。在信息时代,浏览器的排版引擎替代了铅字师傅和照排师傅,它就像城市的基础设施,我们一直用着它,但不会一直想着它。

 

但问题在于,这种基础设施是由西方世界定义的,他们不懂中文,所以包括 Eric 在内的一群专家撰写了中文排版需求,把中文排版的需求传递给技术规则的制定者,希望能建立起信息时代中文字体排印的基础设施。

 

Eric:你有没有思考过电脑打字背后的技术?这是个非常复杂的过程,用到了很多技术,包括键盘键位、键盘映射、输入法、编码(Unicode)。最后显示到屏幕上,还有字体和字体渲染的过程,浏览器接受到 html 和 css 的排版信息,通过排版引擎显示出来。

 

那我们现在中文排版引擎发展到什么程度了呢?到目前为止,我们还不能在网页上指定仿宋体。仿宋体可是四种基础中文字体之一(宋体、黑体、仿宋、楷书)。你在大陆看到的报纸,肯定都会有这四个字体。但因为现在整个架构都是老外的,他们的 font-family(字体样式 )里最常用的有 serif (衬线体)和 sans-serif (非衬线体),你把宋体套上 serif,把黑体套上 sans-serif,那楷体和仿宋怎么办呢?

 

在新版本的 CSS 里,楷体被套到了 cursive (手写体)里面。然后又为仿宋单独做了一个 fangsong 的样式,但现在还几乎没有浏览器可以渲染出来,所以说前途是光明的,道路是曲折的。

 

 

Eric 等人受邀整理了 W3C 上的《中文排版需求》,把中文传统排版的需求翻译给技术规则的制定者

 

小学就学过的标点挤压,在电脑上怎么就这么难?

 

UX Coffee:说到中文字体排印,大家可能觉得这是设计师的专业技能,但事实上我们每个人都学过中文字体排印。早在写小学作文的时候,我们就学到了这些知识,比如「标点挤压」,但这些在当时理所当然的规则,到电脑和手机上却被忽略了。

 

Eric:当有连续两个及以上的标点放在一起时,因为中文的标点是全宽的,所以看起来会很稀疏,在纸面上就是一个窟窿。因此在正规的书籍排版中,我们会调整标点符号的间距,让标点挨得近些,这就是「标点挤压」。小学生用文稿纸写作文的时候,语文老师会要求把连续两个标点写在同一个格子里,也是同样的道理。可是在网页排版里,这是没办法轻易实现的,你必须用 JavaScript 强制把它们挪到一起。

 

 

连续出现句号和后括弧两个标点时,把句号按半宽处理,是一种常见的标点挤压方式

 

标点挤压也是有不同风格的:传统论文会比较紧一点,轻松小说可能稀疏一点;不同的出版社也有不同的风格。在出版行业,大家都知道一种叫「开明式」的标点挤压方式。但隔行如隔山,很多设计师不知道,所以我们要把它翻译出来,让做网页设计的朋友知道。

 

 

「开明式」按语义调整标点宽度,代表句子结束的标点(如句号、问号、感叹号)用全宽,句中标点(如逗号)用半宽。徐调孚等编《开明新编国文读本》(注释本乙种第一册),开明书店,1948 年初版,上海福州路。| 图:台湾华文电子书库

 

UX Coffee:另外一个很常见的场景,就是做设计的时候,我们经常随手拉开一个文本框,开始打字。在中文排版里,这个文本框不应该是随手拉出来的。因为在中文排版里有一个基本原则:文本框的宽度应该是字号的整数倍。

 

Eric:中文是方块字,中文排版应该两端对齐。但是两端对齐后,最后一行的字距是不会变的。如果文本框宽度不是字号的整数倍,也就不是字数的整数倍,那前面几行都会被拉开,以达到两端对齐的效果,而最后一行没有被撑开,那么最后一行和前几行就无法对齐。

 

 

左对齐时,右边会有空格,不适合中文的方块字

 

 

若行长不是字号的整数倍,两端对齐后,前几行通过拉开字距的方式,达到了两端对齐,但最后一行依然保留了左对齐的字距,无法和前几行对齐。

 

 

行长改为字号的整数倍,两端对齐时,其他行的字间距和最后一行保持一致

 

这条规则在中文本来是理所当然的。但因为西文默认是左对齐的,而且西文作为字母文字,有更多字距调整的方式,所以在西文排版里,大家一般会先算好两边页边距要空出多少,不在乎每一行有多少个字。而在中文排版里,需要先算好每一行要放多少个汉字,再去看两边的边距。这就是中西文排版的根本区别。

 

纸面上做这一点比较容易,网页上需要考虑响应式设计,会有不同的宽度,但如果你有关注这方面的需求,实际做法有很多。比如苹果公司的中文网页排版,你去看源代码就知道,排版非常精细。你可能在 iPhone、iPad 或者电脑上看苹果的网页,这些屏幕的宽度不同。为了在不同屏幕上达到好的效果,他们非常认真地把网页上的小标题用 span 一个个括起来,来控制换行的地方。

 

 

从大屏幕切换到小屏幕,换行只会换在「轻轻地,」后面,符合阅读规律

 

中西文混排:为什么不能随便「拉郎配」

Eric:中文排版的另一个特点是中文和西文的混排,中西文混排的第一步就是选择合适的字体。中文字体里附带的西文实在是太难看了,比如老的中易宋体和中易黑体,里面的西文是等宽的,像打字机一样,根本没办法用于长篇排版。所以绝大多数设计师还是分别为中文指定一个字体,西文指定一个字体。这在网页排版是可以实现的,在 CSS 里把西文字体写在中文字体前面就可以了。

 

不过,这么做的前提是你会用复合字体,会微调中西文的搭配。因为同样的字号,汉字显得大,西文显得小,因此需要调整它们的大小。另外,西文是以基线为基础的,而汉字是以字框为基础,基线和字框有时无法对齐,需要手动调整位置。

 

你也可以自己把这些都调好了,封装成一个新的复合字体 woff。苹果就是这样,它的中文字和西文字的大小是调过的。

 

你也可以用已经搭配好中西文的字体。比如很多人用的开源字体「思源宋」、「思源黑」,里面的西文有针对中西搭配的场景调整过,放大了西文、调整了基线。所以你可以直接用这两个字体做中西文的混排。

 

中西文混排还有一个间距问题。印刷时,原则上中西间距是 1/4 空。但是这在网页上还没有办法控制,很多人会手动去控制,就是人工在中英文之间输入一个空格,但理论上这应该让排版引擎去实现。这个问题我们会在 CSS 的 level 4 里解决,还需要花一段时间。

 

其实网页上有一套现成的排版框架。 Ethan (陈奕钧) 制作了「汉字标准格式」,这是一套支持各种印刷效果的 Sass + JavaScript 排版框架。你可以借此来实现刚才提到的效果。当然添加这些代码的话,肯定会影响性能,所以这还是设计决策的考虑:你自己要拿捏好「实现效果」与「性能」之间的平衡。

 

 

「汉字标准格式」里有诸多高级排版功能,包括「标点挤压」、中西文混排间距调整等

 

最后我想说一点,很多人都是平面设计师出身,其实平面的要素就是图和文。我非常希望大家在平时的工作和生活中多想想:「我们很重视图片的设计,但有没有足够重视同样重要的文字?」

 

UX Coffee:这对 UI 设计师也适用。UI 设计本质上是图和文字的混排,很多时候那张图还是用户上传的,你无法控制,你只能控制 UI 里的字体排印,这甚至是比设计图片更重要的技能。

 

Eric:另外,Typography 这个概念其实是从国外过来的,大家现在用的电脑、字体技术、整个排版引擎,操作系统其实都是国外的。大家可以想想在这样的基础设施上,中文应该怎么体现,中文的 Typography、OpenType、排版引擎应该是什么样的?对外国企业来讲,这些问题是国际化、本地化。但作为母语使用者,我们有义务去提需求,有义务去设计、提高中文排版。不要总想着老外帮你把本地化做得多好,作为中文母语者,作为专业设计师,我们应该有自己的思考。

 

 

南视频素材网是一个优秀的网站,一个纯资源下载站,本站仅供交流与学习,你可以在这里找到一切你想要的素材,若文章侵权请及时联系删除,无意冒犯,感谢你们!
南视频素材网 » 与Eric Liu聊聊中文排版设计

发表评论

南视频素材网是一个专注于分享各种高质量素材资源的网站!

查看更多 联系客服