Jason Pamental 的 Smashing Podcast 第 5 集：什么是可变字体？

每两周，我们都会发布一个播客，我会在其中与网络行业的某个人就不同的话题进行交流。 在这一集中，让我们了解可变字体的所有内容！ 我就此事与知识渊博的人交谈，Jason Pamental。

显示注释

每周更新

• “品牌插图系统：绘制强烈的视觉识别，”刘一辉
• “努力应对交通高峰，”苏珊娜·斯卡卡
• “构建 CSS 布局：与 Rachel Andrew 一起直播，”Rachel Andrew
• “2019 年网页设计和开发来临综述”，雷切尔·安德鲁
• “你的投资组合网站应该是 PWA 吗？”，Suzanne Scacca

可变字体

• 在 rwt.io 的网络上查找 Jason
• 网页排版新闻通讯
• “可变字体：网络作者需要了解的内容”，Jason Pamental
• 艾伦·拉普顿 (Ellen Lupton) 的著作《用文字思考》
• 埃里克·斯皮克曼 (Erik Spiekermann) 的书《停止偷羊，看看字体是如何工作的》

成绩单

Drew McLellan：他是设计策略师、UX 领导者、技术专家、网页排版专家，以及 W3C Web 字体工作组的特邀专家。 他就如何在数字平台上更好地设置字体进行写作、演讲并与团队和品牌所有者合作。 他曾与 Adob​​e、Audible、Conde Nast、GoDaddy、IBM 等组织进行过交流，并在世界各地举办过演讲、研讨会和会议。 他的时事通讯 Web Typography News 很受那些希望获得最新的网络排版更新和提示的人的欢迎。 他显然是网页排版方面的专家。 但是你知道他代表瑞典参加了 1984 年奥运会的草坪槌球比赛吗？ 我的粉碎朋友，请欢迎 Jason Pamental。 你好，杰森。 你好吗？

Jason Pamental：我太棒了。 尤其是在介绍之后。

德鲁：我今天想和你谈谈网络排版，因为那真的是你的事。 您是网络排版方面的真正专家。 关于这一点，但特别是，谈谈可变字体。 我将是第一个承认我不是排版专家的人。 我的意思是，请认为我和任何倾听的人一样不知情。 你不能用任何关于排版的信息来光顾我。 我想我们已经在网络上使用了大约十年的可用网络字体了。 那正确吗？

杰森：是的。 实际上，前几天在推特上发起的不是你吗？ 好像是 2009 年 11 月 9 日。从 Typekit 推出到现在已经过去了 10 年。 我知道 Font Deck 在同一时间框架内是正确的。 不久之后，Google 字体和 Monotype 服务。 我的朋友 John Cianci 给了我一个测试版邀请，他现在仍然是我妻子在 2009 年某个时候在 Typekit 工作的代理机构的同事。那是对我对网络的兴趣的彻底改造. 我的意思是，这对我来说简直就是一场革命。 我的意思是，当我在学校学习排版时，我一直很喜欢它，但 15 年来我们无法在网络上用它做任何事情。 那真是太神奇了。

Drew：现在肯定有设计师在 Web 上工作，他们已经使用了 10 年以上的 Web 字体。 现在有一些设计师在网络上工作，他们从来没有设计过一个没有能力从大量字体中进行选择的网站。

杰森：是的，这是真的。 没有这种经验的人必须像我们成长过程中那样在两个方向上推动像素上坡。 我们不是那些对着天空挥舞拳头的脾气暴躁的老人。 但是，是的，就网络上发生的所有变化而言，这有点令人惊奇，有些人从未以任何其他方式经历过的想法是了不起的。

Drew：当我们获得网络字体时，我们开始在网络上使用排版的方式发生了巨大转变，因为我们可以真正开始在网络上使用排版。 显然我们可以使用网络安全字体做一些事情，但我们非常受限于一个非常有限的调色板。 但现在可能还有另一个重大转变，可能与可变字体几乎同样重要。 我的意思是，什么是可变字体？ 他们为我们做什么？ 我们从哪里开始？

杰森：我总是尝试从给人们一个参考框架开始。 因此，当我们考虑在网络上使用字体时，我们必须记住的是，目前使用“传统”字体，每种字体都是该字体的单独宽度、粗细、倾斜度和变体。 对于我们想在网络上使用的每一个，我们都必须加载一个文件。 对于您将其用于正文复制的典型网站，您通常会加载四种字体：常规、粗体、斜体和粗斜体。 所有这些东西都必须加载。 每一个都是一些必须下载、处理和渲染的数据。

Jason：所以通常情况下，我们多年来所做的就是限制自己使用极少数的字体，这实际上并不是特别好的排版实践。 在平面设计中使用更广泛的范围更为常见。 在给定的设计中，您可能会使用 8 种或 10 种不同粗细和变体的字体。 在网络上，由于性能的原因，我们受到了很大的限制。 可变字体的最大区别在于所有这些排列，这些变体包含在单个文件中。 这种格式非常有效，因为它所做的是存储该字符的常规形状，然后是所谓的增量，即沿这些曲线的点将移动的位置以将其渲染为粗体或细体或宽体或窄体。

Jason：所以通过只存储差异，您不必存储整个轮廓。 这是一种更有效的格式。 虽然它不像单个字体文件那么小，但它仍然比单独拍摄的所有单个字体文件要小得多。 如果您查看 IBM 的 Plex Sans 之类的文件，所有这些单独的文件可能接近 1 兆字节，其中两个可变字体文件包含一个文件中的所有宽度和粗细，另一个文件中的斜体为 230K。 那是为了非常非常完整的字符集。 大多数人可以使用其中的一个子集并将其变得更小。 对于典型的西方语言网站的需求，我通常看到这些文件大小在 50 到 100K 左右。 这与加载没有什么不同……一旦加载了三个或四个单独的字体文件，您可能会加载比这更多的数据。 这是一个有趣的性能胜利，但它也为我们打开了整个字体范围，以便我们通过 CSS 在 Web 上使用。

德鲁：所以这几乎就像是提供食谱而不是送餐。 这里不是斜体版本，而是粗体版本。 就像，“这是常规版本，如果要斜体，你可以这样做，如果要加粗，你可以那样做。” 这减少了通过网络传输的文件大小。

杰森：是的。 嗯，在某种程度上，它给了你所有的成分，然后你可以制作任何你想要的食谱。 因为你真的可以从……回到 Plex 的例子，从 100 到 700 的重量，其中 700 是典型的粗体，400 是一种正常的重量。 但是你有更轻的。 所以你可以做非常大和非常细的行标题或块引号或不同的项目或类似的强调，然后能够调整你想要的粗体以不同的大小。 您可以做各种不同的事情来获得更好的排版、更好的用户体验，同时获得更好的性能。 那是看门人。

德鲁：所以在我们今天认为的常规和粗体之间几乎有无数的步骤调整？ 你真的有能力沿着那个轴去任何地方在两者之间进行调整吗？

杰森：对。 作为一个学习平面设计并且多年来一直密切关注印刷设计的人，我认为对我来说真的很令人兴奋，大胆的想法应该根据你正在渲染的文本的大小而改变。 所以默认情况下，正常和粗体的 400 和 700 是网络默认的。 但事实上，你叫粗体的唯一原因是你想要一些强调，你想要一些突出的东西。 但是字体越重越小，越难阅读。 它有点填补了狭小的空地。 当它设置为大约 16 像素大小或我们在那里使用的任何内容时，不要使用 700 作为正文副本，而是使用 550、575 来获得足够的强调，但字母形式仍然更加开放。 然后随着它变大，你可能会使用更重的重量。

杰森：但同样，这在某种程度上是你的选择。 通过调整它以获得正确的强调水平，但仍然保持非常好的易读性，我们有更多的灵活性。 我真的希望随着这些变得更流行和更广泛使用，我们可以开始教人们在使用该范围的方式上更加细致入微，同时实际上变得更具表现力和可读性.

Drew：我注意到将设计实现为前端并实现给我的设计的一件事是，不同的颜色对比组合和深色背景上的浅色文本与浅色背景上的深色文本，权重看起来完全不同。 所以大概，这将有助于平衡并根据这样的变化来调整视觉和阅读体验？

杰森：当然。 这是我通常会在研讨会和会谈中展示的内容之一，即添加对轻模式媒体查询的支持。 你可以翻转这种对比，但你确实想以一种微妙的方式来做。 根据字体的不同，衬线字体最终可能看起来很重或有点细长。 有时你想要重一点或轻一点，但是当你把它放在深色背景上时，你也往往需要将字体隔开，否则字母会形成一种流血的形式。 您可以在排版中调整一些小东西。 媒体查询非常简单。 我的意思是，将它添加到您的网站就像两行代码。 然后就是你用它做什么。 它不一定只是反转颜色。 有时您需要调整对比度，但还要调整字体本身以获得更好的易读性。

德鲁：所以大概，不只是重量可以在可变字体中变化。 还有其他方法可以更改显示的字体吗？

杰森：是的。 这完全取决于类型设计师。 我认为在浏览器中强调这并不是对所有人免费的，这真的很好。 浏览器只能渲染字体中已启用的内容。 最终，是字体设计师说重量从这个到这个。 您可能有一个宽度轴。 它会变得更窄或更宽，但也有能力拥有所谓的注册轴。 有宽度、重量、倾斜、斜体和光学尺寸。 这些都是映射到 CSS 属性的核心内容。 倾斜允许一个和另一个之间的角度，如此直立，我实际上已经看到了具有反向倾斜和向前倾斜的角度。 那是完全开放的。 斜体通常打开或关闭，但不一定。 实际上，您可以...嗯，有些字体设计师已经尝试过在您从正常变为斜体时逐渐改变字母形式，并在此过程中替换字母。 这是一件很有趣的事情。

Jason：但是还有自定义轴的能力。 类型设计师可以定义他们想要改变的任何自定义轴。 你已经看到了一些增加重力传播的滴水和各种有趣的扭曲形状，或者延伸衬线，改变上升和下降的高度。 在小写字母形式上，更改它们是否为衬线。 你可以做各种各样的事情。 这完全取决于字体设计师的想象力。 我认为对于所有这些事情可能会实际发生什么，我们只是触及了表面。 这一切都可以通过 CSS 访问。

德鲁：是的。 所有这些属性都可以通过您与设计的其余部分一起提供的普通 CSS 进行调整。 我们可以在 CSS 中做哪些事情来触发这些变化？ 是否就像我们对响应式布局所做的那样，我们有媒体查询来触发它？

杰森：有各种各样的方法可以做到。 你必须做一个小的改变。 我假设我们将提供一些链接，这些链接将帮助人们玩弄这些东西。 我的意思是，我已经写了一堆。 希望这会帮助人们。 然后在使用端，字体粗细轴只是映射到字体粗细。 您只需提供一个数字，而不是说常规粗体。 您可以使用媒体查询来改变它。 您可以使用 JavaScript 更改它。 你可以用它做任何你想做的事。 我一直在使用一种叫做 CSS Locks 的技术，我从 Tim Brown 那里学到了基本使用数学的方法。 CSS自定义属性和计算来缩放它，一旦你从一个小断点到一个大断点，它会平滑地缩放字体大小和行高。

Jason：如果你愿意的话，你也可以使用一点 JavaScript 来做同样的事情。 权重轴映射到字体权重，即 CSS 属性。 字体中的宽度轴将映射到字体拉伸，这只是以百分比表示。 我应该注意，许多字体设计师不一定会考虑如何表达这一点，因此您可能会看到一些奇怪的重量范围，例如从 400 到 650。您仍然必须将其表达为百分比，但它确实有效。 没关系。 您只需要知道什么是正常的，并且所有字体都已记录在案。 然后，除了这两个之外，目前，对倾斜和斜体的实现支持有点不平衡。 很多你需要回退到使用字体变化设置的东西，然后你可以一次提供几个东西。 这有点像字体功能设置。 这是一种较低级别的语法，您可以在其中提供这个四个字母轴的逗号分隔列表和值，下一个，下一个。

Jason：人们需要记住的一件事是，当你使用字体变化设置时，你会失去对它的所有语义理解，并且你会失去回退。 所有浏览器都普遍支持字体粗细和字体拉伸。 您绝对应该使用这些属性。 对于其他任何事情，您可以使用字体变化设置。 但是像通常那样使用字体粗细的好处是，如果变量字体没有加载，浏览器仍然可以使用它。 然而，如果它不理解可变字体，或者它没有加载，如果一切都在字体变化设置中，那么你会丢失所有的样式信息。 就在哪里支持什么而言，这只是一个小旁注。 但我还应该说，在大多数情况下您可能会遇到的所有发布浏览器都支持它。 I-11 不起作用，但您可以提供静态网络字体，然后使用 CSS 中的广告支持来切换到可变字体。 然后，您将避免任何重复下载资产，并且效果非常好。 我已经在几个站点上进行了生产。

德鲁：我认为就像你看到的许多更现代的网络技术一样，如果有一种可变字体已经悄悄地冒泡了一段时间，并且只有当它最终沸腾并且我们在浏览器中获得支持时像你这样的人对它制造噪音并让每个人都知道它就在那里。 标准设计人员或开发人员几乎可以感受到这种感觉，他们只是每天都在继续他们的工作，而不是跟踪所有最新的下载。 它似乎是凭空出现的。 但我想这已经冒泡了很长时间……我的意思是，你提到了我们现在正在处理的两个略有不同的实现。 有一种较旧和较新的实施标准吗？

杰森：嗯，它实际上并不老和新。 他们俩都非常故意。 我稍后会回到这个问题，因为真的值得了解它们之间的区别。 但你是对的。 该格式是在三年多前引入的，也就是 2016 年 9 月。实际上，三周后，我们在 Safari 的夜间构建中实现了第一个工作实现。 我们拥有工作浏览器的速度非常快。 Safari 是第一个提供全面支持的。 我想那是High Sierra出来的时候。 我不知道，它就像 Safari 12 或类似的东西。

Jason：但不久之后，我们最终在 Firefox、Edge 和 Chrome 中获得了支持。 实际上，我们已经支持浏览器将近两年了。 但是没有大量的字体。 有这种稳定的演变。 对在网络上使用它们的支持实际上比其他任何地方都要长。 我的意思是，从技术上讲，这种格式也适用于桌面操作系统。 因此，如果您有 TTF 格式，则可以将其安装在 Windows 或 Mac 上的桌面操作系统中，并且可以在任何应用程序中使用它。 您不能总是以您可能想要无限地使用它们的方式来改变轴，但是在该字体文件中嵌入了命名实例的概念，将其映射回我们习惯的内容。

Jason：例如，在 Keynote 中，没有明确支持可变字体，但如果在 Tech Sense 中有类似的东西，格式确实可以工作，再次，压缩，轻。 您将拥有那些正常的、常规的、常规的粗体、窄体等，所有这些都可以在下拉菜单中使用，就像安装整个家庭一样。 然后，如果您使用 Illustrator 或 Photoshop，或者现在使用上周刚刚发布的 InDesign 或几周前发布的 Sketch，它们现在都支持可变字体，这样您就可以访问所有不同的轴并在您的心的满足。 但在浏览器中，我们还有很多工作要做。 从你妻子那里得到启示，我一直在敲打这个鼓，试图让人们更加了解它。 然后感谢 Firefox 团队在创建开发人员工具方面所做的工作。 在 Jen Simmons 的推动下，我们可以在浏览器上使用令人难以置信的工具来帮助我们了解字体的功能。

Drew：您提到了字体设计师和字体功能。 有很多可用的字体吗？

杰森：嗯，现在很多人都在这样做。 寻找它们的最佳和最全面的地方可能是 Nick Sherman 的网站 v-fonts.com、v-fonts.com。 那只是一个目录网站。 它正在迅速变得非常非常大。 现在一直有更多可变字体出现。 开源的数量并不多，但如果你在 GitHub 上搜索可变字体，你实际上会在那里找到一大堆项目。 但谷歌已经推出了他们新 API 的测试版，其中提供了大约十几种可变字体。 他们还有更多的东西。 他们刚刚在 recursive.design 上发布了 Recursive，这是 Stephen Nixon 的一款出色的新字体。 Plex 变量，一个是可用的，它是开源的。 然后是大量的商业广告。

Jason：很酷的一点是 Monotype 已经发布了一些非常大的产品。 但是，在这种格式的试验中，有很多较小的代工厂和个人设计师在引领潮流。 我认为这对设计和网络来说真的很棒，因为我们看到所有这些来自新设计师或小型设计师的新设计都在打破这个新领域。 因为我喜欢看到他们在这方面取得成功，因为他们真的主动把一些很棒的东西放在那里。

Drew：我们是否看到将现有字体更新为可变字体以将系列替换为单个可变字体？ 这真的发生了吗？

杰森：是的。 Monotype 发布的那些是对一些非常经典的字体的更新。 FF Meta 是我去年通过设计演示帮助他们推出的。 他们明白了。 Univers、Frutiger、Avenir，我认为这些是他们迄今为止发布的那些，这四个。 这些是真正的核心经典品牌字体。 他们正在做更多的工作。 我知道他们至少还有半打左右，处于不同的生产阶段。 我知道为大公司做大量自定义字体工作的 Dalton Maag 有几种非常好的可变字体。 我一直在用 TypeTogether 做一些工作。 他们也有几个非常棒的字体。 我知道那个…

杰森：我在一些会议上展示了阿迪达斯也有自己的东西，他们已经在他们所有的品牌印刷作品中使用了将近两年的时间。 这是非常非常了不起的东西。 但马克西蒙森也在研究 Proxima Nova 的可变版本。 这是一件大事。 这是有史以来最畅销的网络字体之一。 正在发生。 它发生在规模上和规模上的点点滴滴。 但即使是订阅 David Jonathan Ross（每月俱乐部的字体）这样简单的事情，几乎每个月都会为您提供可变字体。 我的意思是，他对他一直在推出的东西真的很不可思议。 这就像一年72美元或类似的东西。 他一直在推出各种非常漂亮的东西。

Drew：这很有趣，因为很明显，有了可变字体的功能，您可以创建利用这些的新设计。 但潜在地，可能有一些网站正在生产中，现在有可变字体版本可用，有人可以返回，重新访问它，并用基于新可变字体版本的新实现替换多个字体文件。

杰森：是的，绝对的。 这是我经常收到的一些问题。 最近，我在看一个相当大的体育广播网站，开发团队问我同样的问题。 我看了看，果然，对于他们使用的两种字体，有可用的可变字体。 一项快速研究表明，我们可以用两个可变字体文件替换一个字体的四个实例和另一个字体的三个实例，并在五个请求中占用超过 70% 的文件大小。 我的意思是，从性能的角度来看，这将是一个问题。 对于真正大规模的站点，当您考虑从数百万用户中删除近 300K 的数据下载时，这实际上增加了真正的美元节省和带宽成本。 即使从纯粹实用的角度来看，无需重写任何 CSS，只需替换那些字体，这对他们来说已经是性能、页面渲染时间以及实际带宽成本方面的重大胜利。

Drew：实际上，它是否像听起来那么简单，只是将一个换成另一个？

杰森：可以。 我认为最完美的例子是谷歌在 9 月的 ATypI 上不经意间放过的东西，他们已经开始与 Oswald 一起每天进行 1.5 亿次。 他们制作了它的可变字体版本，然后他们刚刚开始在使用足够多实例的网站上浏览它，这会产生显着的好处。 他们没有告诉任何人。 他们没有告诉网站所有者。 没有人必须做任何事情。 因为它具有正确的权重轴映射，所以默认值可以正常工作。 每天 1.5 亿次是很多字体服务。 这开始让他们更好地了解如果他们可以开始切换他们所服务的前五种网络字体，这种情况对他们来说会是什么样子？ 我假设 Open Sans 可能就是其中之一。 我知道 Lato 可能在里面，Roboto。

Jason：因此，如果您查看这些并查看它们的优化版本可能是什么样子，那么您会发现谷歌有一些非常明确的原因会对此感兴趣。 然后，如果您从另一方面看，如果公司使用自己品牌字体的整个范围而不是不得不更换不同的字体或更多，那么设计空间以及公司对品牌声音的真实程度可能会如何限制在他们的调色板中。 所以在这个范围的两端，有很多有趣的事情需要学习和探索。

德鲁：这听起来像是一个令人兴奋的、勇敢的排版新世界，并且有机会在网络上以一种比我们以前能够做的更敏感和可能更具创造性的方式进行打字。

杰森：嗯，这当然是我希望的。 我认为在所有阶段在网络上采用字体的最大障碍之一就是性能。 那么会发生什么？ 加载需要多长时间？ 这对页面上的渲染时间意味着什么？ 我们遇到了那些不可见文本或无样式文本的问题。 与所有这些事情作斗争，真的，它回到到达那里需要多长时间？ 浏览器对此有何反应？ 我们可以做很多事情来缓解其中一些问题。 但归根结底，如果我们有更好的字体和更好的服务方式，那么所有这些问题都会变得不那么重要。 因此，有了它，我们就会变得更有表现力。 我们真的可以尝试推动这一设计的结束，并尝试更有创意。

德鲁：因为你最近写的文章表达了这样一种感觉，也许网络已经陷入了为每个站点设计文章模板的陷阱，可能对几种不同类型的内容有一些变化。 但是每个人都倾向于这种 medium.com 风格的单列文本，在我看来非常可读。 排版很好。 那是一件坏事吗？

杰森：我不认为这很糟糕。 我只是觉得它会变得无聊。 我的意思是，当 Medium 出现时，那是相当新颖的。 我的意思是，我认为那一栏……就像你说的那样，它的排版非常好。 它有一个不错的区域。 它并不拥挤。 它不是局促和侧边栏和所有其他的东西。 总是会有商业模式的问题，以及什么会支持它。 这就是为什么我认为，Mule Design 的 Mike Monteiro 几年前对西雅图时报进行了非常漂亮的重新设计。 在它推出之前绝对华丽。 然后他们在柱子的两边放了这些巨大的横幅，它只是把所有的空白都带走了。 这是一个真正的耻辱。

杰森：我知道公司必须赚钱。 这有一些后果。 因此，如果将其作为一种选择，那就太好了。 有那个漂亮干净的布局。 但它不应该是唯一的。 我们在 CSS 中拥有所有这些功能，使我们能够用边距和布局做非常有趣的事情。 我的意思是，这不仅仅是我们现在有网格的事实。 但是我们可以在浏览器中用 CSS 进行计算这一事实让我们可以做更多有趣的事情。 你把它融入其中，让字体更有表现力，然后我们就可以开始看看他们在杂志上做了什么。 《名利场》没有一篇文章模板。 他们有六个或七个或八个。 如果你真的看看他们是如何布置这些东西的，就会发现有大量的可变性，但它是在一个系统中发挥作用的。

Jason：所以当我们为我们的网站创建一个设计系统时，我们不会只停留在一个布局上，而是有一种相对简单的方法来在我们的内容管理系统中构建一些开关。 它们中的大多数都支持相当大的灵活性。 我们没有理由不能给人们选择。 我想使用布局一、二、三、四、五、六。 这将引入不同的边距，不同的偏移量。 也许引入了创建一些列的能力。 我们可以做很多不同的事情来打造一个更有趣的网络。 我认为这种类型可以在其中发挥非常重要的作用。

德鲁：在为网络添加更多个性方面，打字是我们的救星吗？

杰森：嗯，我认为可以。 我认为我们已经在网络上进行了漫长的演变，以实现更好的可用性。 但我认为，当我们所关心的只是功利主义时，其中一个伤亡是可用的方法吗？ 这往往会打败个性。 然后，当每个网站都......再次出现时，我们有了网络字体，这创造了我们以前没有的新水平的表现力。 然后突然之间，我们可以……显示变得更好了。 所以衬线字体又回到了混合体中。 我们可以在网络上再次使用它们。 这些东西增加了一些生命。 然后我们使用一两个 San-serif 对每个人进行了优化。 它是 Open Sans 或 Roboto 或 Oswald 或其他。 我们有点回到同样的事情上，那里有大量非常好的、非常易读的字体。 我们还没有真正教过当前这一代的 UX 设计师，他们经常推动很多关于排版的事情。 任何关于它的表现力，它可以改变情绪和语气的程度。

Jason：所以我们有大量的人在决定网络上事物的设计方向，他们对字体的想法可能不如学习平面设计和可读性概念的人那么见多识广。 我们需要把这些东西放在一起。 这不是一个或另一个。 这是一个和。 它需要。

德鲁：尤其是当我们谈论个性、语气和情绪时。 从商业角度或从我们所谈论的角度来看，是品牌的各个方面。 因此，在让一切看起来都一样的过程中，我们是否失去了向客户传达品牌的能力？

杰森：当然。 不要涉足政治，但我认为整体......我们在美国肯定经历过的主要问题之一，我敢肯定这与过去几年在英国发生的事情没有什么不同。 当所有新闻都通过一个平台消费时，一切看起来都一样，就没有声音的区别了。 因此，大约 75% 的美国成年人表示他们从 Facebook 获得了很大一部分新闻。 我的意思是，让我们搁置这通常是多么可怕。 但鉴于一切都是统一呈现的，卫报、纽约时报、华尔街日报、华盛顿邮报和乔的右翼新闻之间的文章没有区别。 一切都以完全相同的方式呈现。

杰森：当我们看到那个标志，那种字体风格时，卫报是如此的有特色。 《华尔街日报》很有特色。 当我们看到它时，我们会立即认出它，即使只是一个标题。 我们知道那是从哪里来的。 然后是与该品牌和真实性的自动关联。 当你把所有这些都去掉时，你会说，“好吧，我要在标题上评估这个。 然后是，谁写了一个更好的标题？ 这不是很多事情要做。 所以我认为我们损失了很多。 如果你看看 Apple News Plus 正在尝试做什么，一些公司正在努力尝试并重新引入它。 布伦德尔在欧洲做了一件非常有趣的工作。 他们在美国推出，但我不确定他们是否真的那么成功。 那是一个平台，可让您订阅和查看所有这些不同顶级报纸和出版物的内容。 It would always be in their own design. So that was really kind of an interesting approach there. It was always preserving the brand voice, that authenticity and that authority that would go along with that news. It really helped provide some cues for you as a reader to kind of evaluate what you're reading.

Jason: I think that's important. I think it's not something to be taken lightly.

Drew: Thinking back to RSS readers in days gone past, the same sort of problems we were seeing then where everyone's content was being just distributed via RSS and appearing in a reader in identical format, identical layout. I think you do lose something of the personality and the voice.

Jason: Yeah. 这是真的。 I don't think that's an entirely solvable problem. I think if you can imagine an RSS reader with a different typeface for every headline, it would be crazy. There's a reason why that that doesn't work that well, but there has to be some middle ground. Type does play a role in that. Then certainly, once you get back to the website, there is that sort of instant recognizability that will help that experience stand apart from seeing it anywhere else.

Drew: So say I'm a designer. I'm working in a small agency. I'm turning out designs for all sorts of different clients. I look at my work. I think, “This is all good. This is readable, but it's got no personality in it.” Where do I start to actually put back some interest, some excitement, and not just lean on this sort of uniform UX driven layout that I've sort of conditioned myself to use?

Jason: Well, I think the thing to do is if you've never studied typography, you haven't necessarily kind of trained your eyes to see what the differences are in one typeface to another. Even when you have studied graphic design, you have to remind yourself of these things all the time. So I think oftentimes that I'll recommend, and actually, I wrote about this a few weeks ago because I kept getting asked like, “Where do you start?” I made a list of books that I think are really helpful. So something like Ellen Lupton's book, Thinking with Type is a fantastic introduction to looking at type and seeing it. Erik Spiekermann's book, Stop Stealing Sheep is a great one although I think at the moment, it's out of print. I think that he might be working on another edition but that's so… If you find that one, that's a good one as well.

Jason: Those will help introduce you to the terminology and understanding what the differences are between the different styles of text. Then once you have that basic introduction, it gives you a better frame of reference when you look at other websites. Getting a sense of like, why does this one feel warmer than that one? What are the combinations of type? 有什么特点？ As a web developer often does or web designer often does, you inspect an element, see what the typeface is that's being used there, and that can start to help build a palette of ones that you become familiar with. Very often, designers do hone in on a few that they get to know well and they tend to use them on a lot of different projects. 这不一定是坏事。 It's certainly better now if you're working with a variable font and you can be that much more varied.

Jason: So you can decide that on this website, this is what I want to call normal. This is the width that I want to use and the other aspects of it. So even using the same typeface across websites because you have access to the full range of characteristics, it could still look quite different.

Drew: So I think there's a lot of reading to be done. I'm sure we'll add some links to the show notes of all the excellent articles you've written up and some references to these books and what have you. Because I think there's so much to learn. I think we've always got to be learning with these things. The learning never ends.

Jason: It's true. 是真的。 That is something that I've enjoyed immensely when I started writing this newsletter. Every week when I'm writing it, I'm reading more of the specs. I'm reading more of what other people have discovered and written. There's tremendously knowledgeable folks out there. Rich Rutter, for instance, from Clearleft, wrote a fantastic book called Web Typography. He was one of the founders of Font Deck, which was one of the very first services to launch. He's always been kind of the most scholarly of authors about this stuff. I mean, he's really tremendously thoughtful in the way he puts those things together. But there's a bunch of people doing really interesting stuff. That has kind of forced me to kind of keep up with what other people are doing all the time, which is really fantastic.

Drew: Is there anything in particular that you've been learning lately?

Jason: The stuff that I've been learning the most is actually the corners of the specs. I think it's something that… I mean, again, probably the biggest influence for me on that is probably Rachel [Andrew]. That she's always talking about like, “Well, if you actually read what's written here, there's actually really good stuff to know.” So in reading exactly what the specs are, there's a tremendous amount of great typographic control that is available to us. Then layering into that different things like mix blend modes and CSS and learning more about different size units and how they interact together and learning how to use and where you can use CSS custom properties. I keep reading little bits more and more and then kind of compare that to what the browsers are doing. It really has been a tremendous experience for me in what I've been learning every week. Even having been doing this stuff for 25 years, there's still like a new gem every time I dig into one of these things.

Drew: That's fantastic. 谢谢你。 So if you dear listener would like to hear more from Jason or perhaps hire him to work with you on your web typographic challenges, you can follow him on Twitter where he's @jpamental, or find his website at rwt.io where you can also find the web typography newsletter to sign up to. So thanks for talking to us today, Jason. Do you have any parting words?

Jason: Yeah, experiment. I mean, there's lots of open source stuff to play with. I think once people get this in their hands and get familiar with it, that I think they'll start to see more and more how much fun they can have with this stuff and how much more expressive they can be. I think I was talking to the design director at The Wall Street Journal actually on Friday. I was then talking to their design team. We were talking about it's great that you have a design system that standardizes things, but it's then like any good design where you break that rule. That's where the exciting things really happen. So we've gotten this necessary evolution of like getting really good at the system. Now we've got to break it some. That's when we can get excited again. Break the rules. That's my best advice, I think.