与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、排版引擎应该是什么样的？对外国企业来讲，这些问题是国际化、本地化。但作为母语使用者，我们有义务去提需求，有义务去设计、提高中文排版。不要总想着老外帮你把本地化做得多好，作为中文母语者，作为专业设计师，我们应该有自己的思考。

原创： UX Coffee 

公众号：设计咖UXCoffee