本文译自 Jon Gold 的 Taking The Robots To Design School，略有删减。

大概在一年前，我开始尝试把「字体设计」和「人工智能」这两个东西结合起来。
现在是 2016 年了，我打算把脑子里的东西搬到网上来。部分原因是它实在是有趣，其次是我想作为日志，便于以后翻看。但最重要的是，我想更多人能读到这些东西。

背景

自打我做设计师以来，我就被设计系统中数学的纯洁性所吸引。我一直很欣赏瑞士的设计。我一生中最爱的设计师或许就是 Karl Gerstner，他著有作品 programmatic design。2011 年我在 Prismatic 做系统化的网页布局算法。然后 2014 年受到了 Flipboard’s 布局算法 的启发，我开始把注意力转移到抽象化上，开始做一些 元-元-元-设计系统和工具，让人类设计师思维更开阔。

就这么到了 2015 春，我开始在 The Grid 工作——一个利用人工智能来建站的工具。介绍一下，这个工具某些地方跟 Squarespace 或者 Wix 挺像的，都可以让非设计师快速搭建起一个好看的网站。但不同的地方在于，它没有主题或者模板，而是根据内容，用精准的设计算法去设计网站，再呈现给用户。酷。这个是探索设计系统的好地方，我受命去把这个版式设计系统变得更好。

那是个开放性的理念，它让我变得对自己生涯有了更多的思考和有趣的探索。据我所知，我之前所做的版式设计系统的工作仍然在保密协议之内，但它实质上是针对人类的。对此我定义了自己的理念，我希望这个系统是可以认识、选择和根据人类设计专家的细微区别去应用排版。

定义

有时当我说「AI 文字设计」时候，别人以为我在设计新的自生成字体。那确实是很有意思的领域，但那个臆断是因为用词不当。澄清一下，在开始之前和你对这篇文章失望之前：

版式设计（Typography）：字体的使用
字体设计（Type design）：新字体的创造

谢谢 Stephen Coles 对此简洁的定义。如果你对用神经网络设计字体感兴趣的话，不妨看下 Erik Bern 大神的 Deep Fonts 项目，大概对 50000 个字体进行视觉分析。所以说，「AI 文字设计」——让计算机做字体设计。

设计一个能生成复杂专业的中心法则的人工智能系统，确实是有点挑战。这需要我在工作中，从一些基本法则里学习人工智能和相关的所有学科（我并没有计算机科学的背景，我是项目中唯一一个设计工程师）。记得那个时候，我每晚都会远离屏幕去 Pacific Heights 附近散步，看着日落，仔细琢磨那个项目的艰巨性。有一次走着走着，Alan Turing（译者注：艾伦·图灵，计算机之父）的一句话跳进了我的脑子里。

与其说试着去写程序去模拟成年人的心智，为什么不试着去写个可以模拟小孩的呢？如果它受到适当的教育，它应该会获得一个成年人的大脑。
— Alan Turing, Computing Machinery and Intelligence, 1950

与其说把设计当成一个整体去看，如果我把设计看成一个个基于人类设计师教育的模型呢？
我相信在这 65 年期间，那个方法论被 AI 纯粹者给推翻了。但作为混沌的开端，它看起来还是合理的。

Part 1: 学会去看

对于设计这个东西，你不用非要做设计师才能够触碰到它。在西方社会里，我们有数百年共通的视觉文化——我们先天就知道事物是怎么传达的，即便我们还不能去标记它。

通过文字（和 Taylor Swift）来传达完全不同的情感

平面设计的目的是去唤醒目标群体的情感——可以是设计师，但更多的是「普通群众」。就是那些喜欢聊颜色、图形的黑魔法和对字距泛泛而谈的外行人。但这不妨碍设计把信息传达给他们。如果一个普通人不能从设计中得到一些信号暗示的话，设计师就没有存在的必要了。非设计师不知不觉中，就能感受到设计带来的触动。

它们分别传达不同的含义——如果没有，就没设计师这个专业

但另一个角度来说，计算机，它们丝毫不懂得设计，一点点都不。对于计算机来说，字体就是一些 .otf 文件和还有字符串形式的字体名称。对于计算机来说，颜色就是一些十六进制、RGB 和 HSL 值。默认来说，计算机甚至不是一个非设计师人类的对手。

我们用的这些工具它们根本不知道自己长什么样子

对于计算机来说，它们只知道一些很卑微的字符串——最卑微的数据结构。但人类却有着非常强大的传达情感的方式。只是人类不能仅仅靠字体名称来做设计而已。因为我们可以看到它们和了解它们，所以计算机为什么不行呢？把我们的算法带到设计学校前，首先需要纠正这点。

设计学校提供了一个从情感到理性的映射——我们学到为什么事物在我们脑子里生成情绪反应，还有怎么利用那些思想去在别的事物上重现情感。为此我们学到了一些术语；学习了怎么辩别 歌德体 (Grotesque)、人文字体 (Humanist)、迪东体 (Didone) 和 过渡字体 (Transitional)、德文尖角体 (Fraktur) 还有 圆体 (Rotunda)。我们学会了怎么用一些元属性辩别一个字体：x字高、笔画粗细对比、宽度、超过x高度部分 (ascenders)、字怀 (counters)，而不仅仅是字体名称。

抽象化的目的不是要得更含糊，而是利用它去创建一个能绝对描述准确的语义层。

• Edsger Dijkstra, The Humble Programmer, 1972

这些新的、精确的术语让我们在工作中有规律可依。我们可以用像 x字高、笔画粗细对比 这些来标记字体。我们用这些特点来辩别字体，而不是简单的说，「哦我看它长得像这种字体」。

字形的每一个部分，都有一个能准确描述的术语——插图来自 Ellen Lupton 的《Thinking With Type》

我们要做的事情就是，让计算机用同样的概念去标记和选择字体。

乍一看，我们可以用手动去标记字体。但这带来两个问题：

• 这很耗时，我出了名懒
• 这样既不够聪明，也不能规模化

上面第一点足以说服我永远不去碰需要人工干预的事儿了。那怎么才能用算法去区分字体呢？

栅格化尝试

我第一个反应就是观察下这些字体。有时可能会涉及一些计算机视觉和分类学。我想自己是否足够聪明去以截取部分的方式构建一些字符，然后弄明白它们长什么样儿。但我发现自己掉到一个全是像素的无底洞，一直在绘制字体和测量「模糊抗锯齿彩色印片法」输出的结果。

最开始有这个想法可以理解，但它效率并不是最高的。为了可以更快和重复地做上面这些操作，我用了 PhantomJS 和 HTML5 canvas 来做。但在 canvas 里画网页字体真的很蛋疼，而在 PhantomJS 里做些视觉复杂的事情也很麻烦。我花了 9 个月时间去尝试，期间经历过很多挫折；但我提起这件事的原因，是因为它让我发现……

矢量图形！

面对柏林残暴的高温天气和无数次对 PhantomJS 和位图的吐槽之后，我决定重新来过。之前我之所以对一个个像素点分析，是因为我把问题归结到「视觉」上，而计算机视觉就是以像素为主。但其实应该还有其他办法！

因为字体是矢量的，这让一切计算都变得非常简单。它就是几何学而已。所以我开始写一个小小的库去解析字体文件，把它们转化成 SVG，但我很快又发现了一个更好的东西。opentype.js 是一个 OpenType 和 TrueType 文件的解析器，它让你在 Node.js 和浏览器环境中可以访问到矢量的字形，还包括所有的内嵌 opentype 数据。很好很强大！

有了这种靠谱的方式后，我开始写一些算法去标记那些功能了。看看这些例子：

x字高

「x字高」指的是小写字母 x 的高度，这很明显。为了让所有字体都能得到一个可规范化的数值（字体可能被绘制成不同的大小），我们用大写字母 A 作为对比，记录比例值。这个数值大概在 ~0.45 - 0.8 之间，听上去蛮合理的。

1
2

(defn x-height [font]
  (/ (char-height font :x) (char-height font :A)))

笔画粗细对比

有些字符真的很能展示出字体的笔画粗细对比。特别是重叠 O、o、A 字符让我很清晰了解到字体是怎么分化的。这个对比可以用以下算法来表示：

1
2

(defn contrast [font]
  (/ (char-area font :O) (char-bounding-box font :O)))

字体宽度

找一些最容易感受到字体宽度变化的字符，M 和 N 相对于其它而言，就是个很好的选择。但我们不能只是量它们的宽度（因为字体可以是不同尺寸），所以我就取了它们高宽比例的平均数。哈哈。

1
2
3

(defn width-ratio [font]
  (mean [(/ (char-width font :M) (char-height font :M))
         (/ (char-width font :N) (char-height font :N))]))

然后发现一个有意思的事儿。我当时在给我的设计项目中找一些相似的字体。有想到 Gotham, Proxima Nova 和 Avenir；Tiempos Headline 和 Leitura Display；San Francisco, Aktiv Grotesk 和 Helvetica; Aperçu, Patron 和 Maison Neue 这些组合。

按照经验来说，搭配字体时都会找一些有笔画粗细差异的字体。像 Gotham 和 Proxima Nova 搭配比较少见，但如果 Gotham 搭配一个衬线字体就会有意思得多。

这是三种人类设计师觉得相似的字体。但计算机怎么看呢？

可是有些时候你想要找特定属性相近的字体。比如说，你可能会想要搭配一些x字高差不多的、笔画粗细接近的字体。

所以我弄了一个「相似度评分」，用来展示任意字体属性组合的欧氏距离。默认它表示每个字体属性之前的距离，但它也可以用来表示字体的一些差异，像 x字高 和 笔画粗细对比。

1
2
3
4
5
6

(defn similarity [x y & attrs]
  (if (empty? attrs)
        (recur x y [:x-height :contrast :width])
        (euclidean-distance (map x attrs) (map y attrs))))
(similarity helvetica aktiv-grotesk [:x-height :contrast]) ;; etc

在写了这么多算法之后，我在一些测试数据上跑了一下，把数据比例缩小到 0 和 1 之间，将结果绘制成了表格。

把 8 个字体按照与「Proxima Nova」的相似度排序

这个结果很理想！根据相似度排序之后，发现 Proxima Nova 和 Gotham 确实是最像的，而和 Didot 差异最大。这符合我的预期，但能用代码表示出来这很棒。

但当然了，只有 9 个字体不足以让人兴奋，所以我很残暴地把 Google Fonts 上的所有字体上都跑了一遍。

对比超过 800 个字体

这些结果再次说明了我的代码是对的。看字体的预览效果和它们的得分，我们可知这些数值是匹配的——赞！

但 <table> 并不是一个字体系统，所以我继续研究我的设计学校初级理论：规则。

Part 2: 基于规则的系统

设计是一连串的规则，不管你意识到这点没有。有一些很简单明了的规则：一行文字应该在 66 个字宽左右，文字颜色应该有一定对比度便于阅读。文章段落不该出现寡行或者川流（译者注：rivers, 即纵向裂缝）；字体缩放比例的不同削弱了字体间的反差。这些都是显而易见的规则，我们可以很容易在书上找到。

但也有一些隐含的规则。这些隐含的规则是我们设计师经验的总结。我们接手的每个项目、每件事都可能做得更好或者更差；但每个奇淫技巧我们都记得。虽然没有万能的解决方案，但我们仍可以挽起袖子去不断探索。

即使是那些嘲笑现代主义设计的人，他们所在的职业也会有一些人不合常规。David Carson 有着他自己的一套，Neville Brody 也是。他们也许不是十分正统，也不会被写进书里，但我们每个人自己身上都有一套专属的规则。框架被用来处理设计，它有着一系列可以把设计需求变成可交付物的方法。这或许不是表面可见的东西，但我们可以去发掘一下。

在基于规则的系统前提之下，我提供了一些面向设计师的接口，可以用来创建规则。我受到了像 core.logic 和 miniKanren 这些逻辑编程程序库的影响后，就开始想让一个系统变得声明式(Declarative)和组合式(Compositional)。

如果听上去很抽象，那么给你看看这些我们都用的基于条件的程序：

这是两个常见的组合式、基于条件的查找器。酷。

所以这很酷——我们可以指定一些元规则像「给我找到有这几种属性的字体」，而不是说「给我找到这个字体、那个字体」，以更高的层面去理解字体。「根据这种新闻标题字体，给我根据这些属性搭配文章正文」、「如果像这种字体展现在页面上，就不要搭配像那种字体」。我想实际实现的规则不会有理论上那么有趣（因为规则可以被调整）；但大意就是以更高的层面去探讨字体，而不是只看字体的名字。

*那个字体*

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

(defn small-x-height?
  [font]
    (<= (font :x-height)
        0.75))
(defn too-similar?
  [a b min & attrs]
    (>= min
        (similarity a b attrs)))
(defn legible-serif
  [font]
    (and (= :serif (font :formality))
         (not (small-x-height font))))
(defn pair
  "given a display font, find a legible
  serif for the body that isn't too similar"
  [library display]
  (->> library
    (filter legible-serif)
    (filter
      (fn [body]
        (not (too-similar display body 0.35))))))

上面这些东西的目的就是暴露一个接口给设计师，去创建和调整被添加到系统的规则。但很快我意识到自己把这个模型很重要的一部分给忘了…

Part 3: 宏观观察

创建这些规则变得越来越手动化，所以我想自己对这个行业的理解，寻找一个解决方案，理论和实践相结合。这就是我的模型的第三部分：宏观观察。

作为一个学生，你会有一些行业领袖作为你的偶像，史书上的或者当代的。逐渐增长的设计知识让你能够把他们的创作和自己的关联起来；从你的事业轨迹中探寻到他们的作品。

在我学生时期，Experimental Jetset，Spin 和 Non-Format 这些是我一些最爱的工作室。在伦敦学校无数个下着毛毛细雨的冬天夜里，我凝视它们的作品，试着去了解他们怎么修炼自己的个人美学。认出他们所用的字体，然后研究为什么这些字体就可以。看他们所用的颜色，然后去搞清楚它们是从哪个调色板中得到的。我从来没有想过在真实项目中复制他们的作品，但像那种形式的观察在学习过程中肯定是有意义的。

两个我最爱的网站（译者注：分别是 Font In Use 和 Typewolf）

我把这种「在现实中观察设计师们用什么、做什么」的形式给模型化了。有一些我很喜欢的网站，它们收集了其它一些排版能给人灵感的网站，根据字体分类，构建出一个庞大的关系型数据库。这可以是一个体力活，但如果让爬虫把这些数据全部自动化抓给我就更好了。无论如何，几行代码加上大量的 HTTP 请求，最终我就可以拿到真实世界字体使用情况的庞大数据集。

把它们可视化最自然的方式就是用节点图吧，通过线连接相互被使用的字体。虽然这样看上去很晕，但是数据看上去很丰富，很吸引人。

但这个图表有一个和字体簿（译者注：FontBook，MacOS 的字体管理器）一样的问题。虽然这些关系很有趣，但它们仍然通过字体名称进行关联。如果你读过之前的章节，疑惑机器学习会进入到哪一个人类衍生出来的相对狭隘的系统的话，那么这就是了。通过创建一个能分析任意字体和基于几何特性绘制出图表的系统，我们就可以把关系从字体名称转移到字体富属性上了。

我们可以通过查询来找出一些匹配的字体，但也可以遍历图表去找到许多相似的有意思的相关字体。我们可以看到一些字体组变得越来越流行，但可以看出是因为它们有着一些特定的字体属性。这个图表告诉了我们哪些字体是流行的，但我们的几何系统告诉了我们为什么流行。

通过看一些设计博客，你很容易了解到 Aperçu, Maison Neue, GT Walsheim 和 LL Circular 这些字体很流行。但对我而言，通过一个系统去找出字体搭配就更有意思了。这个系统可以知道为什么一些字体会流行起来，通过他对排版的知识也可以去预估未来设计的趋势。它或许可以提出一些人类想不到的，但看上去貌似合理的字体组合。

Part 4: 微观观察

如果把这个行业当成一个整体，以一个高的层面去构建我们对潮流趋势的理解，那么去深入了解其它设计师也是很重要的。了解他们怎么做的，观察他们做出选择的过程。他们尝试过的方法，他们放弃的、保留着的东西。不断询问，留心他们解决问题的技巧。

在我们学生阶段、实习阶段、甚至是刚当设计师那会儿，就学会了怎么去做上面这些事情。最开始我们经常和一些年长的设计师打交道。我们从一些同行和大师中，学到了很多东西。

英国瑞文斯博学院。设计师在忙活。

作为人类，我们会以个体、小组和更大的社区形式，去为其他设计师创造一些模范。比如这些在工作室氛围中形成的文化基因，和一些设计师群体聚在一起，对外分享的一些思想火花。所有伦敦的设计学校，基本上就是「瑞文斯博风格」的学校和金斯顿大学、切尔西大学、伦敦传媒学院和中央圣马丁艺术与设计学院这些学校的较量。但也有「伦敦风」、英伦风和欧洲风这些不同风格群体。像更远的，「耶鲁风」一下子被认出来了。学校之外也有一些有着同样想法，但不同物理空间的派系——在 Dribbble 和 Behance 上设计师和插画家之间明显的潮流趋势，或者其他我们互相欣赏对方作品的地方。

了解其他设计师所掌握的东西，最好的方式就是坐下来和他们闲聊，或者窥看他们的画板和他们制作的方式。关于这个最酷的地方就是，这也是可以通过算法学习到的。把「站在其他设计师肩膀上」这个动作给数字化。

我有一些工具可以去探索这个想法：去合法观察其他设计师如何做设计。最酷的地方在于，我们的算法越聪明，我们就越能从匿名数据中抽取出所需要的含上下文的东西。这就需要去丰富和改变训练数据，让我们在设计师中找到潮流趋势。在大型的生产企业和工作室，会用一些内部设计工具，或许我们能构建出这些使用者的特征模型。更多关于设计工具融合化的事儿，以后再说。

后记

我今年初（2016）离开了 The Grid 团队。这几个月由于公司需求太忙，这个版式设计项目一直没继续，我一直没能把它应用到生产环境上，现在想想还是很悲伤。#创业生活

当然事后很容易知道什么事情可以做得更好，这也督促着我的工作向前推进。The Grid 目的是想打造一个设计系统，把所有详细信息都抽象出来给终端用户。但在我把所有智慧装进这个版式设计系统之后，我被告知只能用一个 <input type="range" /> 滑动条将其展示出来。

问这个系统怎么用的设计师朋友肯定会对此很失望。除去我在那里为设计行业未来人工智能所做的贡献之外，我更想让这些智能算法去更好帮助设计师，而不是说取代他们。

一个研究团体预计 1980 年前，人工智能的发展会让机器的独立思考或者解决军事问题成为可能。那就是说，大概还有 5 年时间去发展人机共生关系和 15 年的时间去使用它。这个 15 也可以是 10 年或者 500 年，但那应该人类历史上最激动人心和智慧最闪耀的时刻。
— J. C. R. Licklider, Man-Computer Symbiosis, 1960

在翘首完未来之后，再看现在所用的设计工具，无疑是让人失望的。我们的软件缺乏了上下文理解和行业意识。这些工具操作的是文本、矢量和布尔值；不是设计。但工具是最容易发生改变的东西，所以我在创造一些设计工具，它整合了跟设计流程相关的聪明算法，可以让设计师通过学习他们在做什么，我们在做什么，从而变得更好。增强他们而不是替代他们。

对于一些特定的设计子集，想法趋同很重要

设计师最不愿意去选择用什么工具了。对于算法设计来说，优化组合是一个有趣的机会。个人来说我并没有想把互联网变得更同质化，但设计确实是有一些共通的法则。这不需要变得很趋同，有很多方式可以去公开和使用这些数据。我们的工具应该让彼此更接近，或者远离趋势。当然我们现在去提议一个更受欢迎的字体，但我们找到那些主流分支相似的但未被发现的宝藏。我们可以提议、暗示和修正；这些都建立在扎实的设计原则和我们作为设计师的经验总结之上。这些都是触手可及的。

设计就是一系列的规则，而我们从这些规则中学习。

对于设计者来说，Licklider（译者注：利克里德，人工智能的先驱，上文观点被引用的人）已经离开有些年头了。虽说 Macintosh 机器让我们工作得更快，但我们对于语义层面的交互来停留在 1984 年。几十年之后，我们就会开始觉得像是开拓一个新的时代。那将是我们行业历史上最激动人心和智慧闪耀的时代，真正人机共生的尖端时刻。