跳到主要内容

使用可变字体在线转换您的类型

网络上的排版已经走过了漫长的道路。大约十年前,它仍然被严重低估并且做得非常糟糕 - 具有破坏性用户体验。文本在网上不是很易读,而且一遍又一遍地使用相同的字体。人们把手放在空中,声称你不能在网上做排版。

但是有一个人一直试图说服其他人,那就是Richard Rutter,他是有影响力的UX咨询公司的联合创始人Clearleft。现在真的激动不已网络字体和排版,他是它的中心。

A photo of web typography expert Richard Rutter standing in front of pine shelves. An ampersand made out of flourescent tubing is clearly visible behind him.

Richard Rutter - 网络排版专家

目前最大的游戏改变者之一是可变字体的出现,这种技术使单个字体文件的行为类似于多种字体。 “这真是太有趣了,这是多么迅速,”Rutter解释道。

“Adobe,微软,苹果和谷歌都在全力支持可变字体,但他们都有不同的原因。谷歌特别是性能之一,因为你可以节省大量的空间。

您可以从根本上减少文件大小,因为您可以将常规和粗体组合在一起

理查德鲁特

“如果你特别处理中文,日文和韩文,那么字体文件的大小将只有几兆字节,而拉丁字体文件要小得多,”Rutter继续说道。 “你可以从根本上减少这些文件的大小,因为你可以将常规和粗体组合在一起。你只需要一个字体文件就可以获得无数的变化。看看如何输入也会非常有趣设计师将在他们的字体中提供非常不寻常的风格变化,这是我们以前从未见过的。“

可变字体现在可以在实际项目中使用。浏览器支持率已达到65%以上。 Safari和Chrome都支持可变字体,Firefox和Edge很快就会推出。最新版本的Photoshop和Illustrator也支持它们,它们也被包含在最新的Windows和Mac操作系统中 - Apple的系统字体旧金山广泛使用字体变体。

An image displaying layered ampersand symbols over halftone dots layered over a white circle with a red background.

Ampersand的网站使用可变字体+$(Image credit: Ampersand Conference)

Clearleft在网站上使用了可变字体和号,网络排版会议。它是有史以来第一个做这类事情的商业网站之一,这是Rutter在他的文章中探讨的内容,如何在现实世界中使用可变字体

“我们在六个不同的重量中设置了'&符号'这个词,”Rutter兴奋地说。 “每个字母的重量都略有不同,以赋予它更多的手绘感觉。过去你无法做到这一点!您可以将其作为SVG提供,但现在它是真正的文本,我们可以使用可变字体来实现,因为它的字符集非常小,因此字体很小。它有完整的字母表,而且很少,但这就是我们所需要的一个单词。“

Rutter最初研究化学工程,早在2005年与Andy Budd和Jeremy Keith一起创立Clearleft之前,就开始了他的职业生涯,设计了一些石油钻井平台。他在20世纪90年代中期首次发现了他对排版的热爱。网络出现了,任何人都可以构建一个网页,如果他们可以键入一些简单的HTML。 Rutter发现它非常有价值,所以他进入了设计阶段。

Richard Rutter found this book about typography something of a revelation

理查德·鲁特(Richard Rutter)发现这本关于排版的书是一种启示

“在我作为伦敦一家代理商的设计师的第一份正确工作中,我被介绍给Robert Bringhurst的书”印刷风格的元素“,Rutter回忆道。 “这是一个启示。我对它排版页面的方式及其背后的思考过程着迷。我意识到 - 并且爱上了 - 他正在为自己的工作投入的细节。它真的让我产生了共鸣。它有一种奇妙的怪异。

“有很多微小的,看似毫无意义的细节,有时候只有你或其他排版人才能看到。这是你自己的特殊代码,但如果你得到足够的正确,那么整个事情就会变得美丽和美好。他们都改善了阅读体验。“

有许多微小的,看似毫无意义的细节,有时只有你或其他印刷师才能看到

理查德鲁特

Bringhurst的书的发现促使Rutter开始在网上撰写关于排版的文章。他想向人们展示如何使用HTML和CSS中提供的技术来应用Bringhurst的指导方针,并成为一名自我指定的网络排版传播者。最终,它导致了路达自己的书,网络排版,一本设计精美有效的响应式排版的手册。

最初它的目的是由Mark Boulton和其他印刷工作者Jon Tan共同撰写,他与Rutter共同创立了开拓性的网络字体服务Fontdeck(现已关闭)。它也将通过Boulton的Five Simple Steps发布,当他的代理商被Monotype收购时,它将关闭。尽管遭遇挫折,Rutter仍致力于该项目,并决定在没有出版商和Kickstarter的帮助下独自前进;他的竞选活动在不到48小时内就达到了目标。

A photo of web typography expert Richard Rutter standing in front of a wall on which a street artist has painted a giant mauve question mark.

Web Typography面向设计师和开发人员,并将排版理论与实践和技术相结合。 Rutter试图包括他可能想到的与网络排版有关的一切。他所涵盖的理论之一就是如何在没有良好排版的情况下无法获得良好的用户体验。

“我们在网上做的绝大部分都是看文字,”他指出。 “每天都有数以百万计的人这样做,大部分时间都是这种体验,这就是为什么要做到这一点非常重要的原因。

几年前,微软与麻省理工学院合作进行的一项研究试图比较被认为是好的和坏的排版之间的差异。在阅读速度,信息保留甚至理解方面没有显着差异。他们发现的核心是,通过良好的排版,阅读速度感觉更快,整体感觉是放松和享受。由于排版不好,人们皱眉得更多,所以基本上他们发现好的排版让你心情愉快。如果这不是最终的用户体验,我不知道是什么!“

本文最初发表于308期,这是全球最畅销的网页设计师和开发者杂志。买问题308要么订阅网

想要了解有关在线充分利用排版的更多信息?

Richard Rutter is giving his workshop Responsive Web Typography at Generate London.

Richard Rutter正在Generate London举办他的研讨会响应式网页排版

理查德·鲁特(Richard Rutter)对排版和共同创立有着浓厚的兴趣和魅力Fontdeck,一种开创性的网络字体服务。作为一名自封的网络排版传播者,理查德是Clearleft的首席组织者和号网络排版会议。

在Generate London 2018,他的工作室将帮助您创建具有吸引力,适当,独特,富有表现力和可读性的网页排版的网站,适用于各种形状和大小的屏幕。您将学习如何将数百年前的工艺与尖端技术(包括可变字体)相结合,以便为您的读者设计和开发最佳体验。

Generate London将于2018年9月19日至21日举行。 立即获取您的机票

相关文章:



翻译字数超限