字体之外的西文排版

平面化设计风潮流行后,去装饰、重内容的设计理念让更多的设计师对 typography 有了关注,闲时话题也从「如何用一个图层做出逼真的相机图标」变成了「谁把经典的字体用出了新活力」和「谁又推出了支持 Variable Font 功能的新字体」等。毕竟是设计师嘛,在「与时俱进」这件事上我们从不含糊。

尽管中国本土的设计师在工作中很少接触纯英文的项目,但由于英文语言的普及性性我们并不能完全避免要对英文内容做排版的情况,而作为非英文母语的设计师,要如何做好英文排版呢?回头看,从 Helvetica 到 Proxima Nova 再到现在的 Circular,设计圈里每过一段时间就会有一阵字体流行的风潮,不跟着好像就会过时的样子。但做 typography 不只是跟跟热点、换个字体那么简单——尊重文字内容,严谨地选择合适的字体并为之赋于恰当的格式才是第一步。

就像之前的排字师傅,他们一般会先在脑袋里面想清楚什么样的字体和样式适合,然后再去铅字盒里把需要用到的字模一个一个捡出来排好再去印——肯定不能是每次都先印出来看看样式合不合适吧,大家都想少摸几次铅字,铅中毒或者癌症也并不是玩笑。

那么完全不需要摸铅字,生活在发达的数字排版时代的我们通常会怎么做呢:

第一步肯定是键入/粘贴一些文字内容不用说;然后再打开设计工具的字体列表,一个一个切换不同的字体,慢慢地找那个看起来效果最合适的这也很正常;最后到字体面板选择一些让效果看起来「更好」的样式,可能还会用到其实是不到万不得已千万不能碰的假粗体假斜体

我以前真就常常这么做,文字排版的第一步总是先找一个看起来好看的字体,排出来不好看就觉得应该是要换一款更酷的字体才对。不过,在这么好的硬件条件下竟然如此这样对待字体和文字内容,相信各个肤色与性别的前辈都会对我感到很失望。


先排好一款字 · Typesetting with one typeface

字体的选择对于 typography 来说是非常重要没错,但排不好就一定是字体的问题肯定有错。在仅有一款字体可以使用的情况下,我们能做的事情依旧很多。比如对大小写 (Case)、字重 (Weight) 与样式 (Style) 的合理应用与安排,也能让我们得到一个精致的结果。

拿著名的专业排版工具 Adobe InDesign 中默认字体 Minion Pro 举例,下面这篇文章,如果用全大写来排,效果是非常不理想的。

我们在读用全大写排的内容的时候,除了右侧换行的位置,很难找到喘气的机会。另外全大写有着重内容的作用,全篇使用就失去了这个功能,一般只在比较庄重和正式的场合才这样使用,这里并不合适。

切换成全小写后,由于上伸部 (Ascender)与下降部 (Descender) 还有数字带来的起伏,我们读起来会稍微容易一些,但依然不能找到正确的节奏。

而在按英文书写规则把部分首字母和词汇以正确的形式修正后,我们得到的结果看起来就正常多了,试着读一下的话,可以比较容易地找到句子的开始与结束。作为东方人,这基本也是我们平时看到的样子,中规中矩,还不够好,但不至于出错。可如果我们再讲究一些,像排字师傅一样的话,还可以做哪些事情?

这几个被高亮的地方,它们在文章中本不是需要我们着重的地方,但由于它们本身字符的特殊性,只能以大写形式出现,那这时候排字师傅们可以做的是什么呢?用小型大写字母 (Small Capitals) 来「削弱」它们!

在用了小型大写字母后,视线的流动变得更加顺畅。我们再假装排字师傅往下面继续看,发现有一句话在文中是值得被突出,“held the No.1 three-day opening weekend”,好成绩当然要拿出来说,我们跳一档不用 Medium 直接用 Bold 来着重它,因为变换样式的意图一定要明显,而 Medium 与 Book 太过接近显得暧昧不清,读者不能第一时间理解我们的意图。

看起来不错,继续往下读,发现有一句被引用的台词,引号包起来的,但总觉得引号不够明显。这时候我们可以用意大利体 (Italic) 来显示它——意大利体有表着重引用外来语作品名的用途,我们顺便把作品的名字也一并调整了。

做到这里,整篇文章的效果已经比「不至于出错」好了 10 分,这时候我们再来看看真正的大师是如何排这篇文章的。

在我们之前的基础上,他还应用了经典的首字母下沉 (Drop Cap)、让节奏更加流畅的旧式数字 (Old-style Figure)、合适的连字 (Ligature) 和一些能让文章观感更优雅的替换样式,比如 “No.” 与 “E” 还有 “I” 他就选择了 Minion Pro 的其它样式来替换,十分美丽,好像就是文字本身应该传达出来的样子。这位大师是著名写作平台 Medium 的 Design Lead 和 Typographer,可以说 Medium 如此优秀的阅读体验是一大半都是 Marcin Wichary 的功劳,他的文章 Death to typewriters 就完美展示了这一点。


从你从未留意之处开始留意 · Notice first the unnoticed

作为一个中国的设计师,如何能在西文排版上更接近这位大师一步,像他那样灵活运用各种细节?我个人的方法是从现在就开始去留意那些我们从来没有留意过的细节,就算面前没有铅字盒,也要知道自己所能使用的工具有哪些,才能在合适情况下拿出来用。

比如英文的标点符号就是我们平时不太留意的地方,像常用的引号、连接符号等,都是国人出错率很高的细节,而作为设计师在这些部分出错就不怎么说得过去啦,所以接下来就由我这个曾经出错不停又改过自新的同行来带大家去重新认识并了解如何在设计师最常用的操作系统 macOS 上输入它们。

引号 · Quotes

在非代码环境下,英文引号应该使用弯引号——也就是能让人明显看出来前后方向的引号(按英文习惯,引号的「前、后」也常被称作「开、闭」),通常前引号会长得像阿拉伯数字 “6”,而后引号则像被旋转 180° 后的 “9”,这样的目的是在遇到后引号与前引号相隔更近的时候不会让人误以为它们中间的文字才是被引号包裹起来的内容。但如果我们使用直引号的话,对于这种情况就必须要阅读中间的文字才能辨识它们是否属于被引号的内容了——毕竟我们不是计算机,可以快速从第一个引号数到最后一个,010101…

我们把易读的弯引号称作 Smart Quotes,而把直引号称作 Dumb Quotes,但 Dumb Quotes 并非没有存在的价值,这个不分前后的引号起初是为了节约打字机的键盘空间而诞生的,后来被沿用到了计算机的编程环境。

不过需要注意的是,Smart Quotes 并不会一直都长这样,Dumb Quotes 也是。它们在不同的字体中会有不同的样子,但区分的关键是它们是否能方便分清前后。像 Apple 生态中的最新字体 San Francisco,它的 Smart Quotes 就只是能看得到轻微的角度倾斜与粗细变化。

而 Dumb Quotes 可能也会在某些字体设计师的小心思下变得「就算用错也没有那么糟糕」,著名字体 Gotham 的设计者 Tobias Frere-Jones 的新作品 Mallory 中的 Dumb Quotes 看起来就像是后引号一样,当然也有可能是为了让用错的人感受到一种「为什么都是后引号啊不行我要改掉」的不适感。

另外还有单前后引号也需要使用弯角样式的,包括表示缩写及所有格等含义的撇号 (Apostrophe)。

知道了如何使用,下一步是输入它们。尽管现在的操作系统非常聪明,大部分情况下都会自动地帮我们将 Dumb Quotes 替换为 Smart Quotes,可作为设计师我们依然需要知道如何正确直接地输入它们,以下是在输入各种引号的快捷键:

  1. 前双引号 (“):option+[
  2. 后双引号 (”):option+shift+[
  3. 前单引号(‘):option+]
  4. 后单引号/撇号 (’):option+⇧+]

连接符号 · Dashes

除引号外,另一类常被我们弄错的常用英文标点是长短不一的三条横线,从短到长它们分别是连字号 (Hyphen)、En Dash 与 Em Dash。

通常,Hyphen 用于表示合成词,也在应用齐头尾 (Justify) 的段落对齐方式时按音节折行过长的单词以保证两端对齐的效果;En Dash 用于表示范围,也就是从什么到什么;Em Dash 用于表示语气的转折,用法类似于中文的破折号,不过它也正是中文破折号的来源。

然后是在 macOS 下输入它们的方法:

  1. Hyphen (-):数字键 0 右侧的 ”-
  2. En Dash (–):option+-
  3. Em Dash (—):option+shift+-

其它符号 · MISC

除了上边介绍的引号与连接符号外,我们在平时的文字排版工作中其实还会遇到各种需要到别处「复制粘贴」才能使用的符号,比如注册商标、商标、版权以及苹果标志等。

当然也并不是所有的朋友都会花时间去找内容复制粘贴,更多的使用方法是直接用文字替代,比如用 “(R)” 来替代 “®”,用 “TM” 来替代 “™”,用 “(C)” 来替代 “©”,这不仅不是正确的做法,还可能会引发一些误会。举个例子,在网站的页脚位置,我们都会放一句版权申明,比如 “© 2016 Company Name” 这样,但如果你用了 “(C) 2016 Company Name” 这样的写法,很有可能老板就会来找你谈话了——这是说我们公司是 C class 的意思吗?所以还是该用什么就用什么比较好:

  1. 注册商标 (®):option+R
  2. 商标 (™):option+2
  3. 版权符号 (©):option+G

可除了这三个以外,我们平时还会碰到很多要输入其它符号的情况,比如用来表示乘以运算或品牌联名时用的 “×” 以及用来表示角度时用的 “°” 等,它们都是没法通过快捷键输入的,或者是我并不知道如何用快捷键输入它们——已经记过 9 组快捷键了,再多恐怕就会乱套。

毕竟是生在发达数字排版时代的设计师,我们需要培养的是对待内容的好态度,而不是本末倒置去记一大堆快捷键。所以在以上 10 个符号外,我都是通过输入法的「词典」功能来保证自己可以快速地输入想要的内容的。在遇到需要使用不知道如何输入的符号的时候,我们可以先用 Google 找到这个符号,然后再将其复制粘贴到自己的输入法词典当中(macOS 的词典可以通过 iCloud 在不同设备间同步内容),这样下一次要使用的时候就会便捷的多。

另外,使用 macOS 自带的字符显示程序 (Characters) 功能也是一个方便的做法,可以解决我们的绝大部分需求,而且还能用它输入我们在 iOS 设备上常用的 Emoji 表情,相信因为这一点大家应该都不会忘记使用它,呼出它的快捷键是 control+command+space

注:以上两种 Characters 窗口的状态可以通过点击右上角的 “⌘” 图标切换。


本篇文章整理于我几个月前在外面的一个小分享,内容十分基础,但有很多朋友在当时听完后说这简直是满满的干货,让我感到惊奇。其实我更希望大家把它当作鸡汤来读——作为设计师,在当前如此优越的数字排版条件下我们对待内容的态度不应该比曾经的排字师傅差一分一毫。Typography 是一件只要用心就一定能越做越好的事,我才在路上不远,有很多真正为之付出努力与贡献的大师还在我们前头,一起去追他们吧,从在新的一年做一个不止是会噼里啪啦打字的设计师开始。

另,本文内容得到了很多朋友的帮助与勘误,在这里感谢他们:
特别感谢我亦师亦友的好朋友 Tom 谭沛然以及以及我文中用于排版示范的文章作者 Marcin Wichary
感谢带我上路的 Type is Beautiful 博客
感谢 Ryo LuWentin 以及在  Wikipedia 贡献了相关内容的前辈们等