高效打造品牌字体库

上海/UI设计师/4年前/815浏览
高效打造品牌字体库

使用未授权的字库存在一定的风险,我以1号会员店品牌字库项目为例,与大家分享如何高效打造富有独创性和设计感的字体库。


文章分四部分

前言:本次分享的背景、目的;

基础:了解字体设计的基础知识;

目标:确定设计目的和根源字体;

操作:具体的设计流程和操作落地。


令消费者印象深刻、值得信赖的成功品牌,是由诸多方面构成的。但设计一款符合品牌定位和特质的字体对于品牌形象的传播至关重要,国内的一些成功的大品牌都有自己专属品牌字体,例如京东推出的朗正体、腾讯推出的腾讯字体、阿里巴巴推出的普惠体等等。这些无不说明品牌字体对品牌形象传播的重要性。

另外,随着社会的发展,人们对知识产权、著作权的保护意识也越来越强。使用没有授权的字体时,很容易收到侵权律师函,如:暴雪公司在其网络游戏《魔兽世界》游戏界面中使用了北大方正公司开发的几款字体,2007年暴雪公司被方正起诉字体侵权并索要巨额赔款。

以上两个例子告诉我们,学会字体设计不仅可以挣钱(设计一款独具特色的品牌字体库价格不菲),还可以为公司节省一笔很大的版权费,同时能提高你作品的设计感,且富有独创性。


所以本次以1号会员店品牌字体为例,与大家分享如何高效的设计一款独创性的字体库。


想要设计出好看的字体需要了解一些基础知识,这里分别对中、英文字体基础知识做个简短介绍。


2.1 西文字体基础知识


与汉字的方形造型基础完全不同,西方文字亦有其特有的造型基础和原理。如几根平行线直接的关系组成的造型基线是判断西文字体的重要指标之一,这几根线在设计领域有其专业的名称。


首先是基线(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)。

如中文的“撇、捺、点、横、提、勾”等,西方字体在书写和设计中,各部分也有相对应的术语名称。这些术语多达数十种,但并不一定出现在所有字体上,因此选其中比较常用的几种作简单介绍。

Serif——字母的线脚部分,出现在笔画的起笔与收笔出;Stem——字母的垂直线部分;Bowl——字母中圆弧的部分,似碗而得名;Hairline——极细线,Serif的一种特殊造型;Bar——细的横线;Stroke——斜线部分;Swash——某些字体收笔处衍生出的具有装饰性笔画;Axis——圆形字体的轴线;Counter——表示的并不是具体的字母的部分,而是表示被黑色部分所包含的整个空白空间。它是一个相对抽象的描述,有些类似于汉字造型中“中宫”一词。通过改变Counter大小,能制造放松或是压迫的感觉。


2.2 中文字体基础知识


每个汉字由不同笔划组合而成的,所以了解汉字的字体结构和笔划组合是设计一款优先中文字体必须要掌握的基础知识。作为初学书法结构的标准,永字八法是将“永”分为侧、啄、磔、努、勒、策、掠、趯分别对点、横、竖、钩、提、撇、短撇和捺。

到了现代,永字八法演变成了现代的八个基本笔画(点、横、竖、撇、捺、提、折、钩),原来的短撇被折所取代了。

在汉字的字体设计中,通过对这八个基本的笔划的演变或组合,再加上空间的排布,从而制作出美好的字态。

还有汉字设计中其他基本常识也很重要,在此说几个常见的:字幅框来源于铅字印刷单个字模的外轮廓,而字幅框内的字面框才是汉字设计时的参考大小,当两个字的字幅框紧贴在一起时,字面框之间的距离就是字间距;中宫是源于书法中九宫格中最中间的一格,后演变成字体重心周围的区域,通常把中宫的大小来衡量汉字笔画的疏密和识别程度;骨架是笔画的中心线,人的骨架决定了人的高矮,文字的骨架决定了文字的重心、中宫和高矮胖瘦,而体饰类似外层的肉皮,装饰着文字的外观面貌。



3.1 明确设计目标


日本著名设计师高桥善丸说:“字体设计的目的,是为了让文字高效地发挥信息交流作用,并且能以丰富的表现形式去展示”。在文字设计中创新性和情感属性越强,文字的个性就越强,而功能性越强,文字的可读性就越强。

由于不同的使用场景对字体要求不同,直接影响字体设计最后视觉形态的呈现。所以在设计西文字体前,首先要确定设计目标。


3.2 参考根源字体


选定一种或多种根源字体,我们需要了解它的字形、字宽、字重、字间距、笔划等特征,这些为我们自己设计字体提供一些指导。比如下面这几种经典的西文字体,有的甚至经历了数百年的调整和优化。

比如汉字中的宋体,起源于宋代雕版印刷时通行的并确立于明代的一种美观端庄、便于书刻的印刷字体,也是现代印刷行业应用最为广泛的一种字体。1916年,曾任西泠印社社长的丁辅之、丁三在兄弟模仿宋版书籍统一改型,设计出一套新的字体,他们将这一字体命名为“仿宋体”,又名“聚珍仿宋”。1920年,仿宋体获得政府批文,成为中国第一个获国家认可的字体专利。


几乎与此同时,横平竖直、笔画粗细接近一致、首尾方直无装饰的黑体也出现在印刷物上。据研究,大部分的学者认为:商务印书馆在与日本的交流中,参考了日本哥特体铅字的特点,结合西方无衬线体的样式,自创了早期的黑体字。

从20 世纪20 年代开始,我国大量的美术工作者、文人也师法日本,设计和创造出大量美术字。

上个世纪末电脑设计的兴起,以及方正、汉仪、文鼎等字库的坚持,正因为它们的坚守,越来越多的设计师加入字体设计的行业,通过学习参考这些优秀的字体形态,实际上是让自己站在巨人的肩上继续创作。



4.1 中文字形设计


字形风格设计


字形风格制定是与设计目标、使用场景和品牌特质息息相关的。比如为了提高移动客户端高层级信息的易辩性和可读性,微信钱包、京东金融和哈喽单车都没用系统默认字体;还有全新应用有期,它将中国传统的历法、民俗工艺、哲理名言等内容集结到了这款APP中,为了体现传统文化版的日历形象而特意选用具有古典刻板风格的宋体

1号会员店的字体主要用于移动客户端信息层级较高的界面中,所以对易辩性和识别性的要求也会特别高,所以采用无衬线体作为设计的大方向,再结合品牌和产品的特征,综合考虑探索出具有1号会员的特色的字形风格。


首先观察品牌标识和文字特征发现其有方圆交融、刚柔并济的现代时尚极简风格,我们可以根据这些特征提炼出基础笔画风格,再通过八个基本笔画继续演变和延伸更多的笔画样式。

把确定好的笔画风格样式组合成边旁部首或制成规范,需要贯彻整个字库,保证每个字风格的一致性。

为了进一步体现品牌形象和字体的独特性,提高更好的阅读体验,我们对字面长宽比进行了精心优化和调整。


视觉修改


由于视觉心理会产生部分视觉错觉,为了统一体量和平衡感,有些细节需要进行视觉修正。比如同样粗细的线条,视觉上横线最粗,接着是斜线,然后是竖线,曲线在视觉上是最细的,知道这些我们就要对笔画粗细进行调整。

所以在设计单个字时,一般横线要细,竖线要粗。以“工”字为例,会发现中间的这一条竖线看起来偏细,我们将竖线加粗之后整体粗细就显得更匀称。还有一种情况是主笔要粗,副笔要细,因为主笔相当于建筑的承重柱,是支撑这个文字的骨架。以“木”字为例,当横竖主笔比撇捺副笔略微粗一点后,平衡感就会舒服好多。

字形大小调整,因为汉字的字形众多,有正方形的、有圆形的、还有三角形的等等,为了所有的字体量保持视觉统一性,就需要对不同字形进行大小的调整。例如正方形、圆形的字要往中心缩小点,三角形的字要往上方位移一点,这样放在一起看着就和谐了。


字库整体打磨


把设计好的全部字形放在一起,或者打印出来,精细的检查调整。


4.2 西文字形设计


字形风格设计


西文字体的设计过程也是一样,都要从设计目的、使用环境等因素综合考虑,当然也可在了解西文字体结构基础上,通过自己的手绘草稿快速去探索字形风格,因为手绘草稿比较高效直观的快速记录想法和创意,所以我探索西文字体风格时也采用了手绘的方式。


绘制全部字形


确定好风格后,用 Illustrator 矢量软件绘制出所有的大小写字母、数字以及常用符号。再设置字体的字重,也就是字体的粗细,我当时是以中粗 Medium 为基础字重绘制的全部字形和常用符号,根据使用需要还要再匹配常规 Regular 和粗体 Bold。


视觉修正


与中文字体的视觉修正一样,英文中也有很多地方需要进行细节调整,以保证统一的视觉体量和平衡感,这个阶段需要我们保持足够的细心。


字间距调整


完成所有字形的视觉修正后,接下来最重要的一步就是字间距设置,因为不像中文的方块字是等间距,西文是字母组成的单词,字母的形状不同,间距也是不同的。根据《负空间间距规则》文章可以为我提供参考:负空间为方形的间距设定4个单位、负空间为三角形的间距设定1个单位、负空间为弧形的间距设定为2个单位、负空间为较大的异形设定为-1到3个单位,由于字形的笔画变化(笔画的长短、粗细、大小),需要根据实际情况针对性的调整


4.3 输出字库文件包


前期的字形工作完成后,就需要用字体编码软件输出电脑能识别的字库文件。市面上的字体编码软件也有很多,如 FontLab Studio、FontForge、Glyphs 等。而我之所以用 Glyphs,是因为它能和 AI 矢量软件很好的兼容、更高精度和曲线控制能力、更智能的组件库、便捷的编辑视角等等优点,大大提高了字体的设计效率。

Glyphs 是由来自德国的字体设计师、软件开发工程师 Georg Seifert 研发的一款专业的字体设计软件,近几年慢慢进入了国人的视野。当时看了一些美字社出的基础教程后,很快就能上手制作,现在和大家分享几个主要的界面操作教程。


打开Glyphs这个软件后是不会直接显示界面的,这时你需要点击菜单栏-文件-新建(Command+N),下面的界面就会出现。

添加字形,点击菜单栏-字形-添加字形(Shift+Command+G),然后将你要增加的字形录入弹出的窗口(注意每个字形中间都要用空格隔开,这样Glyphs才能为字形写入正确的编码),点击建立,字形就被添加至文件中了。添加的字形会默认按编码顺序排列。

把之前在AI中设计好的文字图形复制到Glyph对应的字形面板中,调整位置、大小以及需要修正的路径。

调整测试,Glyphs的编辑视图为我们提供了很多测试选项,比如横竖排选项、小字号预览、反白预览等等。

导出字库文件,点击菜单栏-文件-输出(Command+E)即可调出输出窗口,勾选去除重叠笔画、自动添加栅格化提示和导出到指定文件夹位置,即可导出OTF文件,也可以按需要选择其他格式。

以上,就是制作一款字体的基本流程啦,将输出的字库文件装入电脑,就可以在其他软件里使用自己的字体了。



20
Report
|
41
Share
相关推荐
字库设计与运用(三)
Recommanded by editor
文章
字库设计与运用(二)
Recommanded by editor
文章
设计知识
设计知识
设计知识
设计知识
作品收藏夹
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
MOVA 扫地机器人-活水版
Homepage recommendation
相关收藏夹
设计知识
设计知识
设计知识
设计知识
作品收藏夹
UX
UX
UX
UX
作品收藏夹
汉字
汉字
汉字
汉字
作品收藏夹
字体20220516
字体20220516
字体20220516
字体20220516
作品收藏夹
项目总结
项目总结
项目总结
项目总结
作品收藏夹
vi
vi
vi
vi
作品收藏夹
大家都在看
Log in