58轻风体全新发布 ©️FontWork


58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork

字体,是我们生活中最日常的存在,我们每天看到的各种文字信息,以各种字体形式呈现着。字体设计,正在成为越来越受关注的设计课题。

我们也迈出了自己的第一步:2020年,58UXD成立了FontWork创作组。2021年5月,推出了58同城首款中文设计字库字体「微笑体」并且在全集团广泛使用。之后,在设计总监何潇的号召下,FontWork创作组迎来了新的课题:设计一款有个性的无衬线字体,一款更偏正文字体属性的新字体。

就是在这样的背景下,轻风体应运而生。这,是一款不一样的黑体字。


58轻风体全新发布 ©️FontWork

当我们讨论“黑体字”时,我们其实是在讨论中文无衬线字体。黑体字,没有衬线装饰,字形端正,笔画横平竖直,笔迹全部一样粗细。

这一次,要怎么去设计一款不一样的黑体字,怎么定义“我们的字”?带着这个疑问,我们开始尝试寻找答案。

一款好的正文字体,要能够快速认读,最好能够像一杯白开水一样无色无味很自然。而我们所要寻找的答案一定不只是白开水。我们需要加一点点料,让它有一些自己独特的味道。既要有特点,也不能太夸张。所以这次只能在有限的范围内进行设计。需要的是一种克制的设计,轻设计。

 自然舒展。

首先,字型的基本比例设定为23:22横向略宽的正文字体。字型方中略扁,字面饱满,中宫开阔,布局匀称。意在营造一种自然舒展的感觉。

58轻风体全新发布 ©️FontWork

 连接之意。

生活中应用最广泛的黑体字,现代简约、匀称百搭,而且非常适合屏幕显示。而硬笔手写字,是我们原本学习和工作中最常用的书写形式,却正在越来越多地被键盘敲出的黑体所替代。

手写与黑体,是两条不同的路径,有没有可能把这两条路径交叉?如果把硬笔手写特点和现代的黑体连接融合,会是什么效果?

58轻风体全新发布 ©️FontWork

回想学生时代的我最熟悉的事就是写字。手里捏着钢笔,每天都要写很多字。记笔记要奋笔疾书,写得龙飞凤舞,写连笔字和叠字符号都是非常顺手的。

于是我用连接笔画的设计细节,融进横平竖直的黑体字中,让板板正正的黑体也多了一点灵动的感觉。比如竹字头,从撇到横用一笔贯通,撇到低处突然提笔向上然后平着横画出去。再翻回来把一个点横卧在下面。上下翻飞的笔势就像几片竹叶随风而动。这样的设计还有很多处:“禾”字中从撇到横的连接、“让”字中从竖到横的连接,“美”字中撇捺的连接,“装”字中竖提笔画的连接,等等。每个字因势就形,都可以在笔画中找到连接笔画的结合点。也不强求一定要做连接笔画设计,要自然才好。

58轻风体全新发布 ©️FontWork 58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork 58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork


58轻风体全新发布 ©️FontWork
连接,是把从前熟悉的书写重新融入到现代屏幕显示字型中,是传统手写与现代黑体的新“连接”。将手写的柔和质感与黑体的冷静平直在字型中和谐呈现。

连接,也是58同城的品牌基因。作为国民生活服务平台的58同城,最初就是通过信息发布来帮助用户建立有效的“连接”而产生价值。同时,设计轻风体时,也思考了与58同城品牌logo字体的呼应。两者设计了一致的宽高比例和结构特征。

连接,是轻风体的设计切入点,是最核心的设计特征。以笔画的“连接”这一细节设计为黑体字注入了一些新鲜的感觉。

58轻风体全新发布 ©️FontWork58轻风体全新发布 ©️FontWork

 贯通之气。

确立了“连接”概念之后,我尝试把更多笔画也关联起来设计。比如倒八头的波浪线连接,形断意不断;比如撇捺笔画,直接使用跨过竖线的连笔;比如竖提笔画,像是飞行器转弯的飞行轨迹。圆润的连接转笔,加上波浪线的造型特征,让整体看上去好像有一股气流贯穿在字里行间。

       58轻风体全新发布 ©️FontWork         

 刚柔并济。

在平直的笔画之间,做了很多曲线连接设计,让原本横平竖直的笔画之间有了弯曲柔和的质感。笔画的起笔收笔的切角,没有刻意的统一处理为平切或者竖切,而是顺应笔势保持直角形态,自然舒展。 而在转角处,保留了小圆角,这种更加柔和的状态,与连接笔画的柔和曲线形成呼应。方头而圆角,让字型整体更加刚柔并济和谐统一。    

58轻风体全新发布 ©️FontWork 

58轻风体全新发布 ©️FontWork


 蕴古生新。

沿着书写的思路,我注意到传统书法中,有很多书写细节是非常漂亮的。对比了书法字和一些繁体中文字体之后,我尝试把这些带着古韵的笔画融入了轻风体。

比如繁体的绞丝旁,像是植物生长的叶序特征。这个特点完全可以结合到简体写法中。比如,有些笔画在书法中会断开来写,比如“的”字左边“白”的一撇,就是分开来写。还有,草字头也延续传统书法里断开的写法,源于篆书中的“艸”(cǎo),把“艹”字头,写作像两个十字的“⺿”。还有“低”字的繁体写法是会把最下面的“点”笔画长长地横卧在最低处。我们从书法和繁体中发现这些漂亮的细节,进行融合设计,让轻风体蕴含些许的古韵。 

对于看惯了日常字型的我们来说,这些传统化设计细节会让字型有种陌生感。本身笔画的设计是传统韵味的,但这层陌生感带来的视觉感受却是新鲜的。

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork58轻风体全新发布 ©️FontWork58轻风体全新发布 ©️FontWork58轻风体全新发布 ©️FontWork

也有一些,是我们在设计的时候,为了更好的识别度,优化布白空间,进行一些笔画的减省设计。比如右上角的“点”笔画,在狭窄空间时就做连笔设计。更简洁干练更容易识别。 点的设计分很多情况,我们对他们也有进行分别归类,总结设计规律。

58轻风体全新发布 ©️FontWork


 中西相融。

在数字和英文与符号的设计中,我们也尝试把连接这一设计特征融入进去。让数字和字母与中文设计更搭配相融。

  58轻风体全新发布 ©️FontWork58轻风体全新发布 ©️FontWork         

目前轻风体英文字体、标点符号设计,共计完成122个。为了保证英文字体和中文字体的一致性,在结构比例、锐角处理、连笔特征处理上,与中文保持一致。


58轻风体全新发布 ©️FontWork   

 可显可藏。

轻风体在用作标题字的大字号情况时,能够显露更多的笔画设计细节,把字体具有设计感的一面呈现出来,传达出字体微表情。而在段落文本排版等小字号使用时,又能够把细节基本藏住,呈现简单易读,自然流畅的正文字体特点。 


58轻风体全新发布 ©️FontWork


58轻风体全新发布 ©️FontWork                 58轻风体全新发布 ©️FontWork58轻风体全新发布 ©️FontWork58轻风体全新发布 ©️FontWork
58轻风体全新发布 ©️FontWork
58轻风体全新发布 ©️FontWork
58轻风体全新发布 ©️FontWork
58轻风体全新发布 ©️FontWork
58轻风体全新发布 ©️FontWork
58轻风体全新发布 ©️FontWork
58轻风体全新发布 ©️FontWork
58轻风体全新发布 ©️FontWork
58轻风体全新发布 ©️FontWork
58轻风体全新发布 ©️FontWork
58轻风体全新发布 ©️FontWork
58轻风体全新发布 ©️FontWork

已实际应用轻风体的设计项目

在日常工作当中,已经有一些设计项目开始应用轻风体作为标题或者段落文本排版字体使用。

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork


58轻风体全新发布 ©️FontWork


58轻风体全新发布 ©️FontWork

2021年5月8日,FontWork创作组推出了首款设计字体“微笑体”。第二期的创作计划,在设计总监何潇的指导下,我们的目标定为设计一款正文字体。相对于标题字来说,设计一款正文字型难度是更大的。因为正文字型对布白匀称和识别度的要求更高。但有挑战的事情更值得去做。于是我们把需求确定下来,由灵魂导师王丹号召UXD的设计师们,大家一起来开始字型设计大PK。希望能集思广益,选出一款最适合的字型作为我们的第二款字体产品。 

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork

经过1轮设计征集和2轮的方案提报,最终确定了轻风体设计方案。

58轻风体是由FontWork小组完成的第二套中文字库产品。经过第一款字体“微笑体”的历练之后,我们在之前的经验基础上,有了一些新的发展。 

第一,达成共识,统一工具,多人共创。还是采用了设计师共创的方式,本次共有23位参与到轻风体的设计中。基本工作原则是:集中宣讲,分头设计,按期汇总,统一修改。 

第二,首次使用Glyphs软件直接进行字体设计。之前我们是用AI先把字型做出来,最后再统一录入Glyphs。这次直接使用Glyphs开始制作,大家学会了一款可以快速上手的新软件,更可以方便快捷地调用字符和部件。 

第三,字型分类+使用智能部件。我们尝试把偏旁做更系统的分类,使用常用偏旁智能部件来拼出汉字。这样做既能提升效率,又可以最大限度地保持一致性。大家分头做字却可以调用同一个部件偏旁,就保持了同样的设计特征。我们共设计了592个智能部件。 

第四,使用python编写代码,智能合并文件。尝试利用Glyphs软件的API,以代码命令来实现20多份文件的合并。代码合并仅需2秒,效率大大提升。 但是过程中仍然有一些文件覆盖问题尚未解决,希望在之后的工作中再慢慢学习和改进。


第五,统一修整。最终合并之前,所有字来一遍大修整。首先,把字重、灰度、重心、中宫等等细节问题我们汇总达成统一意识;其次,把所有的字按照5组划分,由5位小组长分头进行修正;再次,交流问题,再达成共识,继续修改。最后,把所有修整文件统一整理合并。这次修改非常重要,改掉了大量的基础问题。让字型的整体统一度大为改观。

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork

第六,细节优化和字距调整。在发布之前,我们先内部发出了内测尝鲜版,在线收集问题并修改对应错误。这一步还做了部分基础kerning工作。

第七,发布准备。大家一起参与,创作设计海报,并且设计了一辑字体手册,2个视频导演组分别完成了一支设计视频,和一支创作纪录片。谢谢辛勤的手册组和导演组的小伙伴们。

其中,有很多设计细节,并不是最初就确定下来的。轻风体在项目推进过程中一直有新的生长和发展。在共创的路上,设计师们付出了很多创意和思考,有创新有讨论,经过共同议定和取舍,才最终有了现在的轻风体。

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork


58轻风体全新发布 ©️FontWork

一路协同,共创。这的确是,我们的字——轻风体。

特别感谢猴哥(王丹)在一开始就筹备了纪录片导演组,让我们的创作过程可以通过影像的方式记录下来。
也许,做字这件事情,之于我们的日常设计工作来说,会有多几分余味。像喝茶,入口有苦味,但余味悠长,有回甘。

做字的过程是漫长而又辛苦的,但结成果的余味或许可以久久回甘。

谢谢一路相伴的共创者们。


58轻风体全新发布 ©️FontWork

58轻风体™由用户体验设计中心的“FontWork创作组”共同创作完成。

出品人:何潇

项目管理:王丹

轻风体主创设计师:徐勤栋

西文与符号设计:徐雅

字库共创设计师:徐勤栋、徐雅、李源、姜楠、訾亚磊、杨哲、温正远、郑婧欣、崔秉鉴、隋玉鹏、刘雅静、赵德馨、李洋、马亚荟、伍思晟、何潇、黄珊、杨忠、王弼华、廉勇辉、王映照、李国辉

字库统筹修改:徐勤栋、李源、杨哲、姜楠、訾亚磊

鸣谢:李生、张莉、黄珊、李岩、崔登学、连盟

【轻风体设计视频】导演/分镜/建模:温正远,动画:隋玉鹏,脚本:温正远、徐勤栋‍

【轻风体创作纪录片】导演/剪辑:伍思晟,摄影/剪辑:崔秉鉴,脚本:王晓彤、葛韵迪  动画:贾付涛

【轻风体设计手册】訾亚磊、王弼华、杨哲、刘雅静、赵德馨、隋玉鹏、李源、伍思晟、郑婧欣、崔秉鉴、徐勤栋

【轻风纪念T恤】姜楠、王映照、廉勇辉

【九九消寒图】杨哲、王丹

【轻风表情包与海报】伍思晟

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork

58轻风体全新发布 ©️FontWork

——-

Copyright © 2022 FontWork, 58UXD. https://www.58uxd.com/. All rights reserved.
版权所有 © 2022 FontWork, 58同城用户体验设计中心. https://www.58uxd.com/. 保留所有权利.



58轻风体全新发布 ©️FontWork

徐勤栋

字体设计爱好者

58轻风体全新发布 ©️FontWork

扫码进群

58轻风体全新发布 ©️FontWork

转载时请连同下方内容一起转发

请与该公众号联系获取内容授权

长按二维码   轻松关注

微信公众号:i58UXD

58轻风体全新发布 ©️FontWork

58同城用户体验设计中心


58轻风体全新发布 ©️FontWork


本篇文章来源于微信公众号:58UXD

UI/UX

15岁的腾讯公益更“红”了!

2022-6-30 17:00:28

UI/UX

视频搜索体验价值论

2022-6-30 18:30:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索