01.
造字源始——赋能商业
-
文字设计在促进人类的交流与沟通方面扮演着一个重要角色,也经历着越来越多的变化,尤其是电脑技术的出现和发展给现代设计注入了新的活力,作为视觉传达的重要因素之一 ——文字,也应顺应当下的变化,以积极主动的姿态满足现代媒体和社会心理的功能需要。
字体的设计伴随着商业的发展逐渐开拓了字体应用的新大门,特别是在营销相关的设计行业当中,需求量激增。专注服务于商业的阿里妈妈一直秉持“让每一份经营都算数”的理念,从商家经营的各个维度去思考,除了提供覆盖全域消费者的营销产品及营销IP,满足商家全链路经营诉求的数智商业工具等外,更为商家提供图文、视频、落地页素材及智能化创意工具,帮助优化创意效果与效率的创意中心平台,提供商家一个更全能周到的创意编辑工具、丰富创意的表达。
阿里妈妈依赖多年的矢量字符处理经验和AI技术等沉淀,设立了阿里妈妈·智造字方向,是补全创意中心在字体上的能力,以“植根商业,普惠商家”的理念,持续为商业开发营销字库,并永久免费对阿里商家开放使用,将为商家省去近千万的字体版权费用,也省去了版权申请的繁复流程,为商业经营降本提效,让设计赋能商业再升级。
02.
造字宗旨——美学.智能.商业
-
- 探寻中华深层审美规律
阿里妈妈智造字,研习古今造字脉络,跨越历史长河,传承汉字基因,紧随文化的足迹,探寻中华深层审美规律。
- 用智能,拓展字体设计的边界
以AI智能的方式开启造字新的起点,以博古存今的思维做突破创新。在曾经的边界,再延伸,再创造以时具进的、适配当下的多模态媒体的字体,满足商业之需。
阿里妈妈,以智慧编码解开造字密码,以智能美学探索字的无限可能。
- 植根商业,普惠商家
将展现字体千姿百态,触达每一个商业场景,阿里妈妈·智造字,植根商业,普惠商家,为阿里商家提供好用免费的字体,为商业创造更好的体验和价值。
03.
造字美学——字体设计范式
-
在造字美学上,我们坚持以东方美学为基础,结合互联网电商平台特点,以及当下的潮流,进行新的美学思考,我们将通过阿里妈妈智造字研发的四款字体展开讲讲,数字化字体设计在设计范式上的微妙思考:
- 1.阿里妈妈数黑体
阿里妈妈·智造字自产自研打造了第一款AI字体产品——阿里妈妈数黑体(公测版)正式上线。这款字的生成是人机协同工作的成果,设计原型,智能参与,人工干预,人机循环优化,直到最终生成满意标准字库。
数黑体是基于阿里妈妈营销应用场景下产生的营销字体,【通用性】和【易用性】强,适用于多品类商品,更高效的解决了电商类平台的用字需求。
数黑体为中文简体字库,收纳的中文字符包括但不限于GB2312,共计6767个汉字;英文大小写共52个;常用标点符号共206个,总计7025个字符。 字型饱满、体态中正,布白极具现代韵律,落笔厚实而简练;字里行间流露出先锋、时尚、醒目的视觉感受。适用于电商、广告、品牌形象、推广物料等场景。数黑体是永久免费正版商用字体,将对全社会免费开放使用。欢迎提出宝贵意见:alimama-font@list.alibaba-inc.com
字体应用Demo
- 2.阿里妈妈数智体
阿里妈妈·智造字自产自研打造的一款阿里妈妈自己的品牌标准字——阿里妈妈数智体。阿里妈妈是作为国内领先的品牌数智经营阵地,以技术创新、数智驱动的营销平台,其品牌基因是“数智”,我们需要传递的品牌心智是——轻盈的科技感;同时需要和品牌视觉资产保持一贯性,从数据点阵图形中找到视觉基因。而为了满足未来多变的应用场景,阿里妈妈品牌字注定是一款便于阅读的适用性字体,如何同时兼顾【轻盈的科技感】和【适用性】,并将这两者延续到每一个字符上,是本次设计的核心任务也是最大挑战。我们解构了传统的汉字,以当代的理解和对自身品牌的诉求在尊重自身品牌诉求的同时注入当代性,重构成了阿里妈妈品牌字——数智体。字里行间流淌的秩序美和科技韵律,随着每一次展示与应用,数智体将以独到的汉字美学传播品牌心智,成为阿里妈妈宝贵的品牌资产。
字体应用Demo
- 3.阿里妈妈东方大楷
阿里妈妈东方大楷是基于颜真卿的多宝塔碑算法生成并结合人力完成的一套字库,机器学习到了颜体的丰腴厚重之感,在笔画的描摹上做到了传统书法的收放起伏,规范了骨架、笔画,还原了书法中的落笔、转笔、藏锋、护尾等书写韵味,使整体更饱满、圆融、浑厚。近期即将发布,敬请期待。
字体应用Demo
- 4.阿里妈妈刀隶体
阿里妈妈刀隶体,通过机器学习了爨宝子碑的精髓,强调了三角点折弯与横画两端“雁尾”之方强,外露锋芒,耀其精神,介于隶楷之间,保持着浓重的隶书方笔意味,给人以坚实、朴茂、稚拙、倔犟之感,打破常规常态的匀称和均衡,结构极为大胆,布白和中宫常常出人意料,看似失度,实则深得艺理,险中求正,静中欲动,动中求静。近期即将发布,敬请期待。
字体应用Demo
04.
造字智能化——技术与艺术的融合
-
从传统印刷到人工智能,技术的应用加快了字体设计的变革。传统字体、字库的开发人力成本非常之高,如果全靠人力设计来完成,一套标准字库从设计到做成需要很长的周期,人工智能时代,智能将帮助设计师解决大量重复性工作问题,提升效率,人机比大幅降低。
如何在鼓励多样化、个性化、创新性的前提下,确保字库设计的规范化、标准化,实现营销字库多元与规范的对立与统一。阿里妈妈智造字通过对汉字规范分析,建立机器可描述的汉字结构规范体系,及通过深度学习古籍字沉淀书法特征数据集,将智慧编码和智能美学相结合进行创造,以数字化的表达传承汉字文化。我们在数黑体、数智体、东方大楷、刀隶体四款字上对智能化进行了探索和应用。
- 风格化迁移
对于自由度比较大的手写体,我们则采用了一个少样本字体自动生成模型来提高制作效率。即由设计师先设计新字体的少量汉字,然后用一个深度模型根据已有字体生成目标字体风格的其他字符,最后再由设计师对生成字符进行精修调整,形成最终字体库。
目前常见的少样本字体自动生成(Few-shot font generation)方法,采用的是风格迁移的方式,如下图所示,即用两个网络分支将字体的内容和风格分离,从源域字体(已知字体,通常为宋、楷等标准字体)图像获取目标字符的内容特征(即骨架等拓扑信息),从目标域字体(预生成的字体)图像获取字体的风格特征,将这两种特征汇合后通过解码器产出目标字体下的目标字符。训练时则采用生成对抗的范式,计算重建损失的同时,用判别器加强对生成字符在真实性、字体风格上的监督。
常见少样本自动生成方法示意图
这种方法的优点是风格与内容完全分离,通过AdaIN的方式结合后,模型可以将源域字体迁移成训练时未见过的字体风格,且笔触、粗细、长宽比等笔画风格能得到较好的迁移,但由于字符骨架等内容信息基本来自于源域字体,因此当目标域与源域字体在骨架上差异较大时,通常无法达到理想的迁移效果。DG-Font [1] 在这基础上采用了可变形卷积,以提取的风格特征为引导对内容特征做局部形变,从而增强对骨架等几何形变上的迁移,并通过实验验证了这种方式的有效性。
- 加强版骨架拓扑
如上所述,DG-Font在少样本字体生成上有良好的效果,因此我们采用DG-Font作为基础模型进行新字体生成。但在实践过程中,我们发现这种加强局部形变的方式很难对字体的内容信息进行较大幅度的影响,对于一些风格比较突出的非标准字体的迁移效果仍有很大的提升空间。
由此,我们提出利用数个基字体的内容信息来合成目标字体内容信息,尝试将基字体的书写习惯作为先验指导目标字体的内容信息生成。同时,我们还从整体骨架角度出发提出了一项新的损失函数进一步加强骨架的迁移。实验结果表明,我们生成的字体在骨架拓扑结构上得到了很大的提升,很大程度上摆脱了源域字体的约束,而更接近目标域字体的骨架。基于这种思路,结合人工调整,我们以两种碑文的拓字为参考字,生成新字体效果如下:
参考爨宝子碑生成字体效果
参考多宝塔碑生成字体效果
Reference
[1] Yangchen Xie, Xinyuan Chen, Li Sun, and Yue Lu. Dg-font: Deformable generative networks for unsupervised font generation. In IEEE Conference on Computer Vision and Pattern Recognition, CVPR 2021, virtual, June 19-25, 2021, pages 5130–5140. Computer Vision Foundation / IEEE, 2021.
- 拆字拼字
在字体设计中,通常将字符按照其自身结构分为上下、上中下、左右、左中右、独体、以及各种包围结构,除了自由度比较大的手写体,字符结构通常不会因为字体而变化,因此我们可以维护一份通用的字符结构与部件信息,在一款字体的设计过程中,运用这份信息快速扩充字符,从而提高设计效率。
拆字需要解决的是如何将已有的字进行正确的拆分,从偏旁部首角度进行拆解。已完成的字从 svg 角度来看其实是一整段路径 path,我们找到合适的分割点对 path 进行分割,从而得到单个部件的svg。
拼字过程中还可以按照设计师要求施加一些简单的策略,对部件的进行拉伸或者位置的移动来实现想要的效果。
-
计算黑体字
为了便于在浏览器端快速预览 OTF、TTF 字体文件,我们实现并开源了一款字体操作库 alibaba/font-toolkit,可以加载字体文件、检索字符路径,并基于 font-toolkit 实现了一定程度的黑体字设计自动化,比如理解黑体字的笔画布点,实现按照笔画逐对遍历路径指令,并以此为基础实现骨骼提取、笔画修饰等设计能力的自动化。
-
理解笔画
黑体字的笔画形状非常有规律,以 OTF 格式的阿里妈妈数黑体为例,不外乎如下几种:
-包含 M和 L的多边形
-包含两段笔画,利用 winding-order 机制绘制的“口”等闭合形状
-包含 M、L、以及C 指令的其他形状
在不考虑借笔、偷笔、或者冗余布点等设计手法的情况下,很容易实现逐对遍历笔画布点的逻辑:
这样我们就可以在程序上理解黑体字,只需要将字符拆分成多个笔画,再按笔画遍历笔画中的每对布点,就可以实现自动化的笔画修饰、骨骼提取等操作。
-
提取骨骼
仍然以阿里妈妈数黑体为例,逐对遍历笔画布点时,可以计算当前对的中心点,从而生成笔画的骨骼(下图浅灰色底的填充区域即原始数黑体字符、蓝色描线部分则是计算出的骨骼):
-
笔画修饰
继续以数黑体为例,我们还在遍历布点时根据布点所在位置来将布点归为如下几类:
-笔画的开端和结尾
-笔画的外角和内角
然后根据对应情况做一些自动化处理,比如按照设计风格自动增加倒角(下图右侧即自动生成的倒角曲线,2、3、4、5、6、7、8、9 等布点均为计算生成):
- 字体子集化
众所周知,中文字体由于文件体积比较大,在网页中加载会比较慢,在字体未加载的短暂期间,文本会从系统(网页)默认的字体「跳」到另一种字体,会有一个闪烁的过程,非常影响用户体验。阿里妈妈数黑体虽然字体文件只有 1-2MB 左右,但是对于网页加载这还是太大了。主要是因为中文字体字符太多,数黑体包含了 7000 多个字符,但通常我们常用的汉字只有 3000 个左右。在网站首屏、Banner 等场景,通常我们只需要裁剪自己需要的字符即可,这种裁剪我们称之为「字体子集化」。
传统的字体子集化工具速度不够快,在子集之后,还丢失了连字、竖排等非常重要的字体特性。为此,iconfont 研发了全新的字体子集化平台,不仅可以保留连字、竖排等特性,甚至还支持对可变字体的子集,这几乎是国内首家支持此技术的在线平台。子集后的字体文件通常只有几 KB 到几十 KB,这取决于字符数量的多少,但相比于原始的 TTF 或 OTF 文件,体积将大大减小,从而实现网页字体的秒加载。
在新版的 iconfont 子集化平台中,你只需输入想要的文字,就可以一键生成字体文件的 CDN ,放入你网站的 CSS 中就可以直接使用。在线使用:https://www.iconfont.cn/fonts/detail?cnid=a9fXc2HD9n7s
05.
造字展望——动态化及其应用
-
数字化的发展,使字体呈现形式也将从单一的静态字体向动态化方向转变,动态字体设计拓宽了字体设计的可能性,使得字体的表现形式越来越多元化,呈现更加的立体化。阿里妈妈将通过艺术与技术手段的结合,在表现形式和空间维度上使字体本身更具生动丰富的视觉传达性和展现性,为传播的字体设计带来生机。阿里妈妈未来将在动态字体的三个方向发力探索可变字体、动力学排版、字体动画的可能性,尽可能的满足未来媒介语境。
- 可变字体设计
可变字体更具适应性,更具人文关怀,相较传播的大中小字体的选择,可以为用户提供更多样的选择。可变字体基于静态字体设计,对文字进行字重、字宽、倾斜、中宫等属性的多特征变化,通过技术将可变形式组织起来,用户可以通过平滑连续的细微调整,定制属于自己最舒适的个性化字体,同时也可以设置程序自动变换字重,实现白天和夜间模式下的字重变化,同时适应各式屏幕尺寸。
可变轴的范围(如字宽和字重)使得我们无需加载过多的文件资源,就能在网页上更加自由地采用更多的排版设计,由于 HTTP 的请求更少(字体文件减少)、整体下载数据的节省(尽管这里也和字体压缩有关),这一切使得性能大大提高,也优化了用户的阅读体验。
- 动力学排版
动力学排版基于文字编排设计,将字体本身视作一个整体的图形,通过物理式的运动变化及位置大小的改变、挤压拉长的效果变化带来丰富的有韵律的节奏感,可以呈现出一些惯性运动、弹力运动、直线运动、曲线运动视觉冲击力,阿里妈妈智造字将动力学排版视作为一种偏探索性的实验,适合在广告营销、展览活动中应用。
- 字体动画
动态字体设计中应用较高的就是字体动画了,将文字的直观阐述加入其动态的设计中,使其充满一种趣味性,通过文字的图形设计可以快速的抓住字体要传达的含义,起到信息传达的功能,在广告营销当中非常适合这类字体的表达。阿里妈妈妈更有可能与商业品牌共创探索字体动画在营销当中的应用。
关于以上字体将陆续发布于
渠道一:阿里普惠体官网 fonts.alibabagroup.com
渠道二:阿里巴巴矢量图标库 www.iconfont.cn
感谢智造字项目组成员的给力支持!
❤️
设计:川良、南志、亮黎、熙柚、赵雅
前端:逸才、李牧、宫卫、壹丝
算法:云芑、积流、王驰