品牌动态

Variable Font已经发展到什么程度了? 有什么应用?

前言

什么是Variable Font(一般简称vf)? 普通字体可能有多种字重(如浅色、常规、粗体)、斜体(斜体)等样式,并且它们是独立的静态文件。

可变字体,在保证字体风格的前提下,可以通过程序任意调整字体的粗细、倾斜度,甚至拉伸程度,同时字体文件体积更小。

动态品牌广告案例_品牌动态_动态品牌设计该如何理解/

如果你想体验一下,可以拖动建站网站Cargo在线体验下的滑块:

动态品牌广告案例_品牌动态_动态品牌设计该如何理解/

在Android一年前开始大力推广的Material You设计语言中,系统底层全面支持可变字体; MIUI的小兰亭可变字体可以让用户通过拖动滑块找到自己喜欢、习惯的界面字体。 厚度; 在最近的 Figma Config 2022 更新中,还支持了可变字体,这似乎突然将这个概念推向了一个比较热门的水平。

Figma官方对可变字体功能的介绍和普及:

那么,可变字体在实际中如何使用呢? 众所周知,中文字体设计难度要高出几个数量级。 目前中文可变字体的发展情况如何? 经过简单的研究,本文将讨论这个问题。

动作设计

很多常见的字体其实可以有7种甚至10种字重,所以在静态显示场景下基本可以满足,所以静态显示并不是可变字体的价值所在。

可变字体的优点在于,不同粗细之间的切换是完全平滑的过渡,而不是直接从浅色跳到常规,因此动态过渡效果是很自然的应用。

举两个Material You的例子:

当屏幕关闭并显示时间时,文本为黑底白字,并使用细字体。 当屏幕打开时,会出现背景颜色,并且文字会加粗以确保可读性。 虽然背景壁纸可以使用淡入淡出效果,但是字体的过渡有点麻烦。 这时候可变字体就可以派上用场了。 当您点击屏幕或举手打开屏幕时,您可以使用可变字体来实现最重要的时间数字。 由薄到厚的过程,效果非常流畅。

动态品牌广告案例_品牌动态_动态品牌设计该如何理解/

另一个是闹钟铃声应用程序。 谷歌为它设计了强弱动画来提醒你时间到了。

动态品牌广告案例_品牌动态_动态品牌设计该如何理解/

当然,在这两个例子中,数字是主要元素。 在其他地方要找到这样的应用有点困难。

品牌动态

随着移动互联网的普及,品牌几乎都会考虑在社交媒体和应用网站上进行线上营销,甚至“原生”留在线上。 那么利用前端技术实现品牌动画的案例也越来越多,让品牌在众多竞争对手中脱颖而出,多了一个记忆点。

对于经常使用字体作为主要标志的品牌来说,动态字体是一个很好的组合。

例如,全球最大的广告集团WPP在其总部Amsteldok使用了可变字体VI,这体现在各种材料甚至交互式接待屏幕中,而不仅仅是简单的循环动画。

进一步阅读:

动态品牌广告案例_品牌动态_动态品牌设计该如何理解/

甚至从技术上来说,也有开源项目使用贝塞尔曲线+插值计算来创建可变字体的伪3D效果。 这意味着3D品牌动态也很容易。

动态品牌广告案例_品牌动态_动态品牌设计该如何理解/

动态品牌广告案例_品牌动态_动态品牌设计该如何理解/

中文可变字体

大家都知道思源字体家族,它是中文最著名的开源字体。 设计师一定经历过一次下载7个字重、200M的字体包的痛苦。

去年4月,思源黑体发布了2.0(思源黑体vf),直接是可变字体。 字体包只有30M。 今年1月,思源松体也更新至2.0。

下载链接:

除了开头提到的“小蜜兰亭vf”之外,几乎没有其他真正的中文可变字体。

动态品牌广告案例_品牌动态_动态品牌设计该如何理解/

思源海蒂VF的出现是一个非常重要的里程碑。 中文开源字体的风潮也是思源带来的。 2014年,思源发布,成为首款开源、高品质、多权重的中文字体。 今天,每个人都有很多选择,并建立一定的字体商业模式。

字体设计工具在几年前就已经引导大家朝着可变的方向进行设计,但毕竟如果没有对实际应用和商业模式的探索,也不会得到更多的支持。 这次思源支持可变性,进一步促使大家改变对字体设计的思考方式。