当我告诉别人我在研究字体时，他们常常会感到困惑不解。对大多数人来说，字体是 Word 或 Google Docs 中的下拉菜单。
——Bob Taylor
明明很喜欢的书，捧起来半小时就觉得头脑晕沉看不下去。有没有想过，可能这并不是你不够专注，而是碰上了不用心的字体设计。
字体设计对于阅读的影响能有多大？对于使用汉字的我们来说，这是个早就达成共识的问题。两千多年前，我们的祖先对于文字就有了传达信息之外的追求，美的追求。不论是《周礼》确立的六艺，还是春秋战国时代孔子推行的六艺，书法都是必不可少的重要技能。篆、隶、行、草、楷，不同的书体有着完全不同的美感，不过若是捧着一本用草书排版印刷的《诗经》，恐怕也很难品出“所谓伊人，在水一方”的朦胧感。
字体确实有着易读性的差别，规整字体给人的阅读压力要小得多。那是不是挑选好合适的字体就万事大吉了呢？
也不尽然。有一个读者很容易忽略的细节：即便是同种字体，稍稍改变一些参数，带来的阅读体验也不同。下面这张图片里，字体、字号、颜色、显示设备等等都没有变化，但一眼看过去，很明显最左边与最右边对读者都不太友好，前者模糊，后者局促。
当然了，字体设计师们早就注意到了这样的细节，也在尽可能地进行设计上的优化。今天想要介绍的可变字体，就是一种全新的解决方案。
认识可变字体之前，让我们再来看看上面这张图片，既然字体、字号等等都一样，那么从左到右这五块屏幕上显示的文字，到底是哪不一样？这里要引入一个不太常提及的概念——字重。字重，简单理解的话，像是描述一个字体重。字重代表的是笔划的粗细程度，“胖”就是笔划粗一些，“瘦”就是笔划细一些。
从设计的角度来讲，我们平常所说的某某某字体，其实都是一套字体，是一个集合概念。这一套字体下，一般囊括了 4 到 7 种不同的字重，这些字的样式大致相同，但身材比例可就不一样了。
就拿“思源黑体”来说，安装之后打开 Word 你能看到好几个叫思源黑体的字体可选项，它们的区别在于后面的字重标识，Light、Normal、Regular、Medium、Bold 等等。这些字重存在的意义，就是为不同的使用场景提供较为适合的字体。
好比给一本书排版设计，如果正文的内容都用标题的字重，那翻开这一页还没有品味文字内容的时候，眼睛和大脑就已经感受到了来自字体的视觉压力，读起来就会费劲；反之更好理解，如果标题、小标题用了正文的字重，那就无法起到第一时间抓住眼球、引导阅读的作用。所以，虽然看上去似乎只有一种字体，但一本书的编排至少也得用3到4种不同字重的字体。
有的朋友可能会有疑惑，说的好像很麻烦，设计个最“瘦”的字体然后逐渐加粗，不就有不同梯度的字重了吗，这不是很简单吗？调整字重并不是把图片丢进 Photoshop 然后几何拉伸那么简单，以拉丁字母为例，笔画环抱的内部空间（字怀），笔画的弯曲走势（字碗）等，这都需要从设计层面进行精细的调整，才能呈现出令人舒适的美感。
这还只是字重这一个纬度，如果加上字宽、倾斜等其他纬度，可想而知有多复杂。看似简单的一套字体家族，设计起来并没有那么简单。
字体从设计完毕，到呈现在我们眼前，中间往往还要融入一系列其他设计师的创作，或是产品的设计，或是网页的设计。字体设计师设计一套字体家族费时费力，有时候不少单个字体又用不到；其他设计师购买字体后，可能为了网页上的一句话或一个字而需要另一种字重、字宽等，就要多使用一种字体，也挺麻烦。
设计师们也早早意识到了这个问题，所以 2016 年，苹果、微软、谷歌、Adobe 联合推出了一种新的解决方案，可变字体（Variable Fonts）。
什么是可变字体？简单来说，它不再是某种特定情况下的字体状态，而是储存了一定范围内字体参数的变化数据，它不再是“XX字体 Regular”或者“XX字体 Bold”，而是“XX字体 0~100”，是可以随意变换的字体家族集合体。
在目前计算机字体支持的规范协议下，通常有 5 个经常使用到的纬度：字宽（Width）、字重（Weight）、倾斜（Slant）、斜体（Italic）、视觉修正（Optical Size）。在进行可变字体的设计时，字体设计师就可以在一个轴或者多个轴的纬度上进行更为全面的设计：可以是只针对字重进行可变字体的设计，也可以设计出允许使用者同时调整字重、字宽、视觉修正等更为强大的可变字体。
可变字体最直观的优势体现网页设计上。网页设计师不必拘束于 3~5 种同家族字体的限制，借助于可变字体，网页设计师可以随心所欲的对不同区块、不同功能的文字进行细微的调整，不再局限于给定的 Light、Regular、Bold 等等框定好的字体参数，而是在一定的范围内随意修改设计，直到自己满意。与此同时，因为可变字体的高度压缩，它要比安装全套字体家族文件小得多，所以设计师也无需顾虑字体文件影响用户网页加载的速度。
更具价值的是，可变字体也能优化各尺寸屏幕的适配问题。想要在显示器、笔记本、平板、手机等不同尺寸的显示设备上，呈现出一致的视觉设计，这对网页设计师与品牌设计师来说都是不小的挑战。从横屏切换竖屏，从32寸切换到4.7寸，字体参数如果不进行适当的调整，美观舒适与信息传达方面都会有所折扣。以目前的研发进度来看，使用 CSS 控制可变字体渲染、呈现效果的标准已经在开发中，这允许设计师充分考虑到用户不同的使用场景，做不同显示设备的适配。
另外，可变字体也提供了“视觉修正”的可能。在油墨印刷的年代，为了保证清晰度与可读性，经常会字体进行视觉修正，主要集中在衬线字体上。用通俗易懂的概念来理解，衬线就是字体端点处的装饰线。顾名思义，衬线只是装饰性的元素，移除衬线并不会阻碍读者辨识文字，但引入衬线后可以让文字的排版更美观、赏心悦目、标志规整。早年间在报纸等出版物实际印刷的过程中，很难精细的控制油墨，所以需要设计师在设计字体时就考虑到一些变量，为不同使用场景下的字体调整、精修衬线，这就是视觉修正。
近几年来，简洁舒适的无衬线字体是设计界的宠儿。如果字体设计师考虑到视觉修正，并且允许使用者或其他设计师在视觉修正这个维度调整可变字体，让他们自由发挥，或者让他们设定参数自动适配，说不定衬线字体又会展现更加别样的呈现，也可能再掀潮流。
从一个外行的角度来看，可变字体给我的感觉像是一次工具的革新，它不是具体到字体上的一种突破或是耳目一新，还是在设计思路与创作上的一种解放。做个可能不恰当的比喻，可变字体就像是新时代网页设计的活字印刷术，它提供了一套灵活可变的解决方案，让设计师能自由发挥。
当然了，可变字体并不能带来虚幻引擎 5 这样如此震撼的冲击，但深入了解之后我觉得这些设计师真的很酷，致力于细微之处，追求极致，努力带来更为精妙的设计与革新，化设计于无意识，只留下美好、舒适的体验。每每学习到新的知识，就愈发加深了我对于设计的兴趣。
设计远比想象中要好玩。
评论区
共 72 条评论热门最新