TEL: 180-210-69380

Figma中Inter 的诞生:GitHub 和 Mozilla 使用的新开源字体是如何诞生的

Nov,01,2023 << Return list


Rasmus Andersson在 Figma 的工作中提出了 Inter 的想法。多年来,我们一直使用 Roboto(由Christian Robertson为 Google 设计)作为我们的主要字体,但我们遇到了它的局限性。它最初被构建为既可用作显示字体(用于标题等内容)又可用作文本字体(用于段落等较长块)。但当 Roboto 很小的时候,阅读起来很困难(Figma UI 中的大部分排版都是小文本)。

Rasmus 和设计团队进行了为期一个月的研究项目,以找到更适合的选择,但 Roboto 仍然名列前茅,我们坚持了几年。

这次经历让 Rasmus 开始思考文本较多的用户界面和字体。他决定尝试制作自己的字体,专门为计算机用户界面设计,并将其免费提供给全世界。他于 2017 年 8 月发布了国际米兰的第一组标志符号,从那时起他就一直在不断迭代。

我们与拉斯穆斯坐下来,了解更多有关国际米兰的背景故事,并了解创建全新字体的过程。



卡梅尔·D.

在加入国际米兰之前,您在字体设计方面有多少经验?

拉斯穆斯 A.

很少。我以前从未制作过文本字体。我在业余时间制作了一些业余爱好字体,并在 Spotify 制作了一些显示字体。[编者注:Rasmus 是2006 年Spotify 的首位设计师]。但这些都没有接近这个项目的规模。

当我开始做这件事时,我不明白这需要做多少工作。如果我想做得好,我想可能需要一年或类似的时间。

事实证明,要完全完成这件事可能需要五年、十年的时间。



卡梅尔·D.

您花了多长时间才了解核心字形集?

拉斯穆斯 A.

你如何定义“核心字形集”?世界上有超过 150 种不同的书面文字——至少是那些得到广泛认可的文字。其中只有一小部分是基于拉丁语的,就像英语一样。大写字母 A 看起来像 A 之类的东西。

然后是与拉丁字母和西里尔字母相似的希腊字母。然后我们有阿拉伯语和朝鲜语,它们与拉丁语排版非常不同。间距不同,大写字母,小写字母,事物的根本设计有很多差异。

您可能会花费一生的时间来制作一种包含所有这些脚本的字体系列。

卡梅尔·D.

您决定从哪里开始?

拉斯穆斯 A.

因为我是一个拉丁字母类型的人(这是我所熟悉的),所以我专注于这一点。在开源之前的第一年里,我有一些内容涵盖了 200 个最常见的拉丁字符。

卡梅尔·D.

你为其他一切做了什么?

拉斯穆斯 A.

我从 Roboto 回填了字形。很长一段时间以来,西里尔字母和许多希腊字母都来自Roboto。因此,该字体获得双重许可。我没想到这会如此有效,但我发现这是一个很好的入门方式。随着项目的进展,我一一重新创建了这些符号,以适应国际米兰的风格。

卡梅尔·D.

Roboto 的回填效果如何?

拉斯穆斯 A.

我确实发现 Roboto 非常好的一件事是它的 x 高度与大写字母高度比例 - 大写字母和小写字符之间的比例或大小差异。



如果您使用小写“x”和大写“X”并测量两者顶部之间的距离,您会发现不同字体之间与小写“x”的高度相比的比例差异很大。



Roboto 在小写和大写字符之间有很好的比例,类似于其他一些奇怪的字体,如苹果的 San Francisco、Akkurat、Graphik、Aeonik、Helvetica 等。有一种……它是新古典主义的,我不知道,它已经成为……古典主义的,因为很多事情都在这样做,因为它确实有效。我认为它有效。


国际米兰的相对x高度恰好是帽子高度的3/4。


卡梅尔·D.

Roboto 回填角色的哪些方面效果不佳?

拉斯穆斯 A.

Roboto 更加简洁。它在 X 轴上稍微挤压在一起。考虑到回填了一些西里尔字母和希腊字符(例如 Omega),解决这个问题是一个挑战。



卡梅尔·D.

这个项目的一部分似乎是知道何时减少损失并接受现有的东西,而不是从头开始重新创建。

拉斯穆斯 A.

我对此几乎没有焦虑,几乎没有压力。我可以在漫长的一天结束后回到家,花 15 分钟对字形等进行一些小改进。我可以花整个周末的时间集中精力来处理它。有时我会在早上上班前花一个小时。

您可以为明天或下次有时间坐下来做一些小笔记。您可以说,“当‘n’的弯曲向下进入其垂直茎时,当以这种尺寸观看或设置为低对比度时,它有点太胖了。”

然后第二天或下周或类似的事情,你终于有一点时间了,你看一下你的笔记……然后你修复了“n”中的弯曲,对吧?对我来说,这是一个非常随意的迭代过程。有无穷无尽的有趣的小事情可以做。

当我去度假时,我经常在冒险之间找到一些时间来做一些事情。以下是今年早些时候前往锡安国家公园拍摄的两张照片,当时正在研究国际米兰的“薄”重量,该重量是该项目后期出现的:



我喜欢早起,煮点咖啡,然后在一天开始之前做一些有趣的工作。

卡梅尔·D.

这听起来很冥想,就像心流工作一样。你可以放大微观,让自己沉浸其中。

拉斯穆斯 A.

很多冥想工作都是在对事物进行调整。

制作显示字体与制作文本字体所关注的细节是不同的。对于文本字体,您将大部分时间花在间距、节奏、字干粗细等方面,比设计实际的字形要多得多。你还花了很多时间研究角色之间的关系。

对于显示类型,您通常会花费更多时间来处理曲线形状并使字形感觉非常准确。厚度、定位、阀杆角度。影响光栅化的细节。像这样的东西。



卡梅尔·D.

听起来你可能会发疯,因为你可以调整到无穷大。你调整一件事,就会用另一件事打乱节奏。

拉斯穆斯 A.

我在这个项目上花了将近三年的时间,我觉得我可以轻松地再花三年。几乎每周我都会对此做一些事情,即使只是在某个地方回答问题 5 分钟。


在国际米兰的每次公开发布中重播“Rag”字形


卡梅尔·D.

谁问你有关国际米兰的问题?

拉斯穆斯 A.

世界各地的人们。我收到很多电子邮件、推文、相关问题等等。总是会有反馈——关于人们如何使用它、缺少什么、还有什么可以做得更好。

例如,我重画了,不是全部,而是相当多的西里尔字母。我不是一个母语西里尔字母的人,所以我觉得我在这方面有点挣扎。

来自俄罗斯的某人发现了一个问题并说:“这个特殊的字形,在我看来完全错误。我不习惯看到它。” 我问:“正确的秘诀是什么?” 他说:“我真的不知道,但这看起来不对。”

排版中有很多有趣的情况,我们习惯看到的许多字符都没有明确的形状。大写的 T 通常是两个矩形在一起。正确的?但是,如果是小写 a 呢?那么S呢?字体中没有一个 S 与另一个 S 相同。这些形状实际上有无限的变化。



卡梅尔·D.

你用什么工具来设计国际米兰?

拉斯穆斯 A.

我开始使用RoboFont,这是一个商业软件。它是您通过插件扩展的基础,因此为了在 RoboFont 中绘制矩形,您需要一个矩形插件。它是一个向前编程的平台,您可以通过编写 Python 脚本来完成大量工作。

可能由于历史原因,或者可能是因为 Van Rossum 兄弟,大多数(如果不是全部)排版工具都是Python虽然也有例外,但所有主要的字体编辑器都提供插件系统和 Python 脚本。所以,Python 就是这样。

卡梅尔·D.

您认为这只是因为早期在计算机上创建字体的先驱者喜欢 Python?

拉斯穆斯 A.

确切地。不,是的,无论如何,Python 并没有任何固有的因素决定它对于排版的好坏。

一年多前,我转向Glyphs,这是其他流行的商业应用程序之一。同样,它还有一个基于Python的插件系统。它提供了出色的性能,其中一位创作者 Georg Seifert 似乎是一个非常好的人。他非常积极地回答我的问题并立即发送测试版来解决问题,我认为这对于一个两人商店来说是令人难以置信的。


在字形中编辑


卡梅尔·D.

您在版式设计软件中特别需要什么而在 Illustrator 或其他软件中无法获得的?

拉斯穆斯 A.

排版中的许多工作都与绘图无关,至少与面向文本的字体无关。相反,它与机制、间距和元数据有关——字体中存在的各种影响文本显示方式的指标。因此,有一定比例的绘制字形,然后剩下的就是大量的编程、字距调整和许多小的调整,同时不断地针对各种文本样本测试字体。

涉及到很多组合,因此组件是一个非常常见的工作流程。在这些字体工具中,您可以说:“这个上面有点的东西组成了 A 和点字形。” 现在,将来当我对 A 进行调整时,它会自动调整所有基于 A 的字符。您可以通过使用组件来创建这些非常有效的迭代设计的方法。

卡梅尔·D.

基本上,它就像Figma 组件。

拉斯穆斯 A.

事实上,它的工作原理与Figma 组件非常相似组件和字距调整辅助等功能是这些特定于字体的设计工具的主要优点。

卡梅尔·D.

Inter 成为 Figma 中的 UI 字体有什么故事?这一直是计划吗?

拉斯穆斯 A.

不。当我开始这个项目时,我希望如果成功的话可以在 Figma 中使用,但这不是计划。我们的设计团队花了相当长的时间来考虑这个问题。

为什么花了一段时间?

拉斯穆斯 A.

因为我个人在 Figma 工作,而 Inter 是我的业余项目——也许这是瑞典的一个奇怪的事情,但是——我觉得我根本不能真正建议在 Figma 中使用 Inter。我希望它有用,但我没有抱太大期望,当然也没有推动它。

2018 年底,我们有一个项目需要重新设计 UI


,作为其中的一部分,我们评估了该工具中的版式。我保持沉默,但团队的其他成员最终提出了这个建议。当我们尝试时,效果非常好。


卡梅尔·D.

哪些方面效果很好?

拉斯穆斯 A.

Figma UI 的很多部分都是基于排版的。我们主要通过间距和排版来组织 UI 中的信息,并使用文本来表示您可能很少与之交互的元素(例如菜单)或需要理解的特别重要概念的内容(例如图层/资源面板标签)。



我们发现 Inter 在我们的用户界面中比其他选择更容易阅读。有些数字更清晰,有些字符如“度”号、百分号等。

卡梅尔·D.

您是否正在为 Figma 创建自定义 Inter 字形?

拉斯穆斯 A.

我还没有这样做。未来,我认为Figma有可能分叉Inter并做出自己的改变。正确的?这是开源的巨大优势之一。其实没那么难。

卡梅尔·D.

国际米兰最令人兴奋的采用是什么?

拉斯穆斯 A.

GitHub 和 Mozilla 都是相当大的名字。这真的很令人兴奋。有一家日本机构将其用于某种大型展示,例如东京第二大广场。真是太随意了。真的很酷。

卡梅尔·D.

你是怎么知道的?他们告诉你了吗?有人拍照吗?

拉斯穆斯 A.

是的,他们联系了我。我真的希望人们能更多地这样做。如果您阅读本文并使用国际米兰来做一些很酷的事情,我很想听听。

卡梅尔·D.

这是你了解国米如何被利用的唯一途径吗?人们必须告诉你吗?

拉斯穆斯 A.

对于其他类型的软件应用程序,有很多围绕分析和下载计数之类的基础设施以及反馈循环。

对于字体来说,这只是一个关于谁在使用某些东西的黑匣子,然后你就无法返回。你完全依赖于使用它的人告诉你它的情况,但可能没有人这样做,对吗?

卡梅尔·D.

就像,如果您在应用程序商店下载了一个应用程序并打开它,您不会向创建者发送电子邮件并说:“嘿,我使用了您的应用程序,”对吧?

拉斯穆斯 A.

字体也是如此。已经……不知道有多少人下载了。我确实有一个柜台。大约有10万人下载了它,或者至少10万人,我不知道这意味着什么。这意味着至少有几千人正在使用它。哈哈。

正确的。

拉斯穆斯 A.

可能还不止这些。

卡梅尔·D.

有多少人实际上告诉过您他们正在使用它?

拉斯穆斯 A.

我听说过大概有100个。


Screenshots: Github homepage, Mozilla design guidelines typography page showing Inter typeface

Inter 在 GitHub.com 和 Mozilla.design 上使用


卡梅尔·D.

我想我告诉过你,安德里亚(我们的同事)正在做一个关于内容策略的演示,我当时想,“哦,那个字体是什么,我真的很喜欢它?” 她说:“这是国际米兰。”

拉斯穆斯 A.

这样的事有很多。GitHub可能在一年前或类似的情况下开始使用它,实际上,这是相当早的,我真的很惊讶。有一天,有人说:“嘿,你看过这个吗?” 我去了 GitHub,在 GitHub 上到处都看到了国米的身影。我当时想,“好吧,那很酷。我不知道。” Mozilla 也做了同样的事情,他们让国际米兰成为其品牌更新的一部分

卡梅尔·D.

你知道他们是怎么知道这件事的吗?

拉斯穆斯 A.

不。

卡梅尔·D.

那个好好笑。

拉斯穆斯 A.

我不知道。我没有对此做过任何营销。除了我自己的时间和投资在我购买的软件上的钱之外,我没有花过任何钱。

有时我会从已经使用它一段时间的人那里听到一些东西。我想,“等等,什么?我不知道,这真的很酷。”