400-700-1307

【UI高级教程】如何做一款字体库

2019-01-29 16:39

1、字体选择

关于字体选择可以根据业务需求抉择,如果是自己练习也可以根据自己的喜好来决定。我选择宋体的原因除了个人喜好之外,更多是因为宋体本身气质优雅端正,在日常工作中可以很好跟业务结合然后被广泛使用。

 

2、提取字体特性

宋体,气质优雅,是被使用最广泛的字体之一。宋体的起源是为适应印刷术而出现的一种汉字字体。笔画有粗细变化,而且一般是横细竖粗,末端有装饰部分(即「字脚」或「衬线」),点、撇、捺、钩等笔画有尖端,属于衬线字体(serif),常用于书籍、杂志、报纸印刷的正文排版。

然而在互联网时代,字体在屏幕显示的频次远高于印刷,所以传统的宋体细节过于精美,字体笔画曲面过多,在屏幕大范围显示中会多多少少有些问题。研究表明在屏幕显示中,简洁清晰的笔画会减少视觉疲劳更适合阅读。

 

以黑体为例,左边那个是传统黑体,右边这个是现代黑体(苹方字体)。传统黑体不完全是横平竖直,他会有一定的弧线,我们称这个弧线为喇叭口。在数字印刷出现以前,那个时候还是活字印刷。活字印刷有一个问题就是油墨会晕染,笔画交接的地方比较粗,笔画两端比较细,为了解决填白(平衡白空间)问题,设计喇叭口,为了让字体显得更平衡。

数字印刷时代到来之后,填白问题没有了,而且现在文字的载体很多都是屏幕,那作为屏显字体,曲线少的话就可以少占用字库空间。另外,横平竖直曲线锯齿变少了看起来会更清晰,作为正文字体也更适合阅读。

 

3、明确设计目标

在对宋体和屏显字体有了有了基本的了解后,心里大概明确了字体设计的目标——做一款可以被多业务使用的适合屏幕显示的宋体。所以这款字体大致的方向应该是在一款笔画更简洁骨骼端正的宋体,中宫正,重心稳。

最终产出的字体在笔画上你去掉了很多细节,只保留了宋体横细竖粗的特征并且把这特性放大让它更具宋体特色,然后保留衬线。

最终产出的字体在在笔画的衔接上也更干净,竖的笔画完全直线处理,两段的切角则是为了保留宋体的字角特征。转角处的顿笔修饰过于繁琐,则去除。

 

4、调整细节

汉字讲究的是穿插避让,空间和谐。一款字体从0到1,并没有想象中的那么简单,中间有无数次的细节调整,甚至相同的笔画在不同的字上也会有略微的差异,其中耗费的时间和精力,只有投入其中才有体会。

① 横线的调整

在开始的时候因为一心想要极简,想把所有的细节都去除,但是真正执行的时候会发现,太过于简单,会是去宋体的韵味,调整后的“横”对右侧的顿笔细节特征做保留并进行优化,让它更有自己的个性。

 

② 同笔异形

因为汉字的结构比较丰富,有些字比结构比较简单,有些字结构比较复杂。汉字讲究空间和谐和穿插避让。看一下同样一个木字旁,杠和杆就差很多。为什么呢,因为杆字的一横跟木字的一点正好在差不多的位置,那杆字的木字旁那一点就要避让那一横。所以做字体其实每个都需要单独推敲,做相应调整。

 

5、笔画输出

在确定文字的最终风格后,就可以先整理出常用的汉子笔画和偏旁,这样之后做别的字的时候会方便很多。

 

6、成型

 

7、场景应用

 

总结

字体设计的手段千千万万,不同的设计师在实践中都会形成自己的方法论,在不同的业务中字体风格也千变万化着。在设计过程中,对于字体设计的字重、重心、中宫的取舍都可以根据业务气质做调整。作为初学者,希望自己的寥寥经验也能有幸跟大佬们一起讨论研究。

 转载请注明:学UI网 » 如何从0到1 做一款字体库

兄弟连官网:www.itxdl.cn
【免责声明】本文系本网编辑部分转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与管理员联系,我们会予以更改或删除相关文章,以保证您的权益!

开班信息

当前校区

北京校区
  • 北京校区
  • 上海校区
  • 广州校区
  • 沈阳校区
  • 杭州校区
  • 南京校区
  • 郑州校区
  • 成都校区
  • 深圳校区
  • 西安校区
  • 苏州校区
  • 深圳沙井
  • 深圳观澜
  • 深圳龙岗
  • 武汉校区
  • 西宁校区
  • 石家庄校区
  • 湖北咸宁
  • 广东惠州
  • 广东佛山

                    Copyright © 2007-2019 IT兄弟连教育 版权所有 京ICP备11018177号  京公网安备 11010802026987号