字库字体设计与运用(四)

Recommanded by editor
上海/UI设计师/5年前/7598浏览
字库字体设计与运用(四)Recommanded by editor

设计一款属于自己的字库字体运用到界面UI视觉中

一、 前期调研和对比


首先我们来看看目前线上主要互联网大公司的 APP 视觉设计中,数字字体的选用有什么特殊之处。

在 APP 视觉设计中,处理特殊数字字体时大部分选用类似 DIN 字体的字形,也有小部分 APP 用系统默认的字体,如支付宝、淘宝等,但是显然用系统默认的字体在美观和识别性上都没有前者好。


那为什么类似 DIN 字形的字体使用频率这么高呢?稍后来介绍。我们再来看看生活中的特殊字体。


商场里的商品价格标签,这个相对来说字形差异性比较大,其主要目的都是提高可读性和识别度。但不同的商场超市自主挑选字体的自由度高,把不同品牌的商家规范统一起来的可能性较小,也没这个必要。

金融证券中的字体,纳斯达克证券交易所用的 T-Star Pro 字体,其中数字采用的是等宽字形。等宽的数字字形优势在于数字怎么变化其一个数字所占用的空间是固定的,不会因为一个空间的数字由1调到4而改变空间大小。这种等宽数字字形大多用于动态数据报表、计算器或者电子手表等。

公路交通标识字体,说到交通标识字体就不得不说世界著名英文字体 DIN 字体,1936 年,德国标准协会规定了 DIN1451 作为国家工业的标准字体,包括交通、车辆管理领域、消费包装、平面杂志等。这个字体既美观,识别性又强,把德国人的严谨细致的精神表现的淋漓尽致。以至 DIN标准在国际和欧美范围内被广泛使用,也有很多国家和组织在 DIN 字体的基础上设计了自己字体,如意大利的 Italian Plates 字体。

虽然市面上有很多字体样式,但是真正优秀的、识别性较高的数字字体大多是外国设计团队或设计师设计的,由于版权和其他问题,如果是自己设计一款符合品牌特性的,较高可读性和识别度的字体。可能也是每位从事视觉设计行业的人所追求的。


二、确定字体风格


西方字体的造型基线。与中文汉字方形田字格规范一样,虽然造型基础不同,但西文文字也有其独特的规范。首先是基线(Base Line),所有大写和小写字母都是基于这条线来进行排列的。其次是 X线(X-Line、Mean Line)。大写线(Capital Line)表示大写字母的基础高度位置, O、Q、C 等带弧度的大写字母一般也要做细微的视觉调整,也有些小写字母如:b、d、k 等,有时会略高于大写线(Capital Line)的那个叫上伸线(Ascender Line)。不过因设计风格不同上伸线(Ascender Line)和大写线(Capital Line)有时会重合。小写字母p、q、j、g等在基线(Base Line)以下的部分那个线叫下伸线(Descender Line)。

一款西文字体设计的好不好看,这几条标准线之间的关系和比例尤其重要。


还有文字身体结构是确定一款字体风格的元素。文字躯干是文字本身的横竖,比较笔直的笔划;文字字碗是带弧形的笔划;文字字环是被包裹的空间。

字间距,一般有两种做法,一个是每个字母的间距相同,另一个是每个字母占用相同大小空间格,以单元空间格依次排序。两种方式有好有坏,根据字体的风格和使用场景来确定。

了解上面这些西文字体的基础知识后,可手绘自己要设计字体的基本风格。这是我当时手绘的字体基本风格草稿。


三、 电脑绘制和细节调整


首先规划好文字基线,在确定字体的字重,也就是字体的粗细。也可以先把基础字重全部设计好后,再匹配其他需要的字重。一款字库至少有三个字重,如 Regular、Medium、Bold。

然后就是细节调整和修改了,比如下面我说的几个示范。


当设计字母“B”时,如果上下圆弧的空间物理大小相同,那字母“B”上面的圆弧的空间在视觉上会给人比较大,整个字母感觉要倒似的,重心不稳。如果上面比下面的小,那看起来视觉上就比较平衡,让人感觉就比较舒适。下图中右边的“B”比左边的“B”看起来舒服很多

设计字母“A”时,左右两臂交叉内点也需要向上调整。如果不调,整个字母“A”视觉上会给人顶部笨拙内空间不透气感。如果左右两臂交叉内点向上微调一下,整个字母“A”视觉上就平衡舒适很多。

同理,字母“X”也要调整。当两臂交叉时,相交处在视觉上总是给人较大的感受,这时我们要把相交的上下点都要向中心微调,这样在视觉上就比较平衡和舒服。

在设计数字“4”和“7”时,有几处也要调整,看下图示范:

设计数字“0”时,圆弧做微调,这个涉及到工业设计中的曲线连续概念(感兴趣的同学可以自行度娘了解一下)。平时用 Sketch 或者 AI 软件中绘制圆角都是一段圆弧,直线和曲线的连接点处曲率从 0 立刻过渡到一个恒定值,带来的视觉感受就不顺畅。为了保证顺畅感就需要让直线逐渐过渡到曲线的曲率某个值。这个在实际操作中并非简单,也要求有一定的数学意识,但是在视觉设计中起码要做到过渡顺畅。

最后我们要调整字间距,不同字母和数字间的组合间距调整,以及整体观察设计风格。


四、 输出字体文件格式


前期的字形工作完成后,就需要用字体编码软件输出电脑能识别的文件。市面上的字体编码软件也有很多,如 FontLab Studio、FontForge、Glyphs 等。而我用的是 Glyphs,因为它和 AI 矢量软件很好的兼容,可以直接复制 AI 图形粘贴到 Glyphs 里。

Glyphs 是由来自德国的字体设计师、软件开发工程师 Georg Seifert 研发的一款专业的字体设计软件,近几年慢慢进入了国人的视野。教程也比较少,我当时也是看了美字社出的基础教程。

以下内容取之美字社出品的 Glyphs 使用教程:

软件界面

强大的曲线算法

在编辑视图下,可以输入任何文字进行排版效果测试,还可以对单个字符直接修改。

图层,可以用多个图层对比字重效果。

字偶距、连笔和替换字形的调整变的异常直观。

最后输出字体文件就OK了。


五、实际使用场景示范

总结

字库设计重在平面字形的创作与电子屏幕特征相结合,创造符合品牌特性和使用的场景。大家看完后可以自己动手试一试,创造一款属于自己的字库。




49
Report
|
104
Share
相关推荐
字库设计与运用(三)
Recommanded by editor
文章
字库设计与运用(二)
Recommanded by editor
文章
教程
教程
教程
教程
作品收藏夹
教程
1302
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
一大波可爱小动物
Homepage recommendation
韶音OpenFit 2+
Homepage recommendation
相关收藏夹
教程
教程
教程
教程
作品收藏夹
教程
1302
00学习资料
00学习资料
00学习资料
00学习资料
作品收藏夹
字体设计
字体设计
字体设计
字体设计
作品收藏夹
教程
教程
教程
教程
作品收藏夹
汉字
汉字
汉字
汉字
作品收藏夹
ui
ui
ui
ui
作品收藏夹
大家都在看
Log in