精美的字体设计教程 

2015-07-29 20:19 发布

1390 0 0
从最初完全屈服于低像素屏显的点阵字,到沿用印刷时代的字体,再到专门为电脑开发的第一代屏显字体,中文屏显字体也从被动适应走向主动研发。
2015年7月18日下午,在中关村创新工场,UI中国的第三期UTalk访谈,方正字体开发部的副部长仇寅先生,从中文字体设计的科学性、美学性和技术性这三方面切入,为现场的朋友们分享了一堂详尽的屏显字体设计课。从最初完全屈服于低像素屏显的点阵字,到沿用印刷时代的字体,再到专门为电脑开发的第一代屏显字体,中文屏显字体也从被动适应走向主动研发。随着retina屏的迅速普及,如今方正字库已经开发完成了第二代屏显字体。

嘉宾简介:仇寅,方正字库开发部副部长,
“方正悠黑体”、“方正大魏体”原创设计师
2010广州亚运会会徽字体设计者。
曾获中国钢笔书法大赛特等奖。
首届国际硬笔书法大赛一等奖。
“方正奖”中文字体设计大赛一等奖。
出版有《仇寅钢笔字》、《仇寅书外国名诗》、《古帖新临多体钢笔字帖》等字帖多部。

今天很荣幸有机会和大家一起交流一下方正开发第二代屏显字体的体会。
所谓的中文屏显字体,属于阅读用的字体。
字体是种很特殊的产品,它诉诸人们的视觉,通过我们的感觉器官才能完成信息传达的功能。因为要经过人的感觉,所以事情就变得复杂起来了。万千的语义,就要有万千的符号。因为它诉诸视觉,所以天然就拥有了美的、文化的乃至精神的属性。
做字体设计的时候,既要满足其功能属性也要兼顾其美的属性。
3965855b8c4f9798ea.png
从方正字体开发的经验来看,有三个方面的内容可以和大家来交流分享,就是字体设计的科学性、美术性和技术性。
科学的要求属于理性层面;感性层面是关于主观的;技术则是指操作层面,是一些技法和方法。任何一种字体都要通过媒介物才能得以呈现,现在我们大量运用的媒介物是屏幕。如果想要获得良好的阅读舒适度,就要弄清楚字体与屏幕媒介的关系。

5321955b8c505827dd.png
屏幕媒介最大的局限性体现在于显示的精度。
一套中文字库最低的是6763个汉字,这与任何其他西文系统完全不可相提并论。从6000多个字里,我们找一些字例来说明,比如力量的“量”,矗立的“矗”等,这些是很常用的字。
“量”的纵向有17线,“矗”的纵向是24线。在纸面印刷的时候,表现这些众多的横画都不存在问题。但屏幕显示的时候小字号下就会出问题了。
下图是纸面打印、Retina屏幕和电脑液晶屏幕的不同精度,以及对应的不同字号下可以清楚表现的线数对比。
6491655b8c50e29a47.png
在96ppi时,一个像素点的尺寸是0.26毫米,对应的五号字只有13条线,显然是没有办法来完整表现需要17条线的“量”字的。用13条线表现出来的“量”字,实际上已经是一个错别字了。而6号字只有10条线,这样表现的“量”字,更加惨不忍睹。
5565355b8c5170e11b.png
而在326ppi的Retina屏幕上,6号字已经可以体现32线。在这样的屏幕上,汉字的每一条线都可以呈现出来了。
2391955b8c51ec1abc.png
在当前矩阵式像素排列的方式下,水平和垂直的线是显示质量最好的线,而第二良好的线是45度,第三有良好显示的是26.6度线……
2562155b8c5252b0cd.png
所以我们常见的箭头光标,就是把最优质的线都用上了
6670155b8c52a90aad.png
像素的显示方式会影响到我们汉字的表现。
由于历史的原因,在电脑中开始使用的汉字只能是,直接把以前用于印刷的汉字进行数字化加以利用。比如上图显示的字体,就是印刷用的字体经过数字化之后在电脑中的显示效果。那么,基于我们对屏幕显示的认识,经过重新设计的宋体字会有什么样的效果呢?(下图)字与字之间的空隙,汉字排布的均匀性,汉字笔画之间的空隙以及整字的美观都会有比较好的呈现。
3643355b8c534b81a0.png
目前还没有比较理想的适合屏幕显示的宋体字。宋体字作为排版阅读的常用字种,它有着良好的信息传达功能和独特的文化价值。方正目前正在努力研发适合屏幕阅读的宋体字,希望能为人们的屏幕阅读带新感受。

屏幕精度不理想时,只能用点阵字来表现汉字。
为了适应液晶屏方正开发了第一代屏显字体——微软雅黑、兰亭黑。现在Retina技术为字体设计解除了束缚,可以获得较大的表现自由。于是作为第二代屏显字体——方正悠黑开始登场。第一代和第二代针对屏幕精度的进化而采取了不同的字体设计策略。

5083055b8c53cdafcb.png
字体设计中的科学

今天主要从汉字识别的角度来谈字体设计的科学内容。设计屏幕用的正文阅读字体,必须以它的功能属性为旨归。让文字便于识读是解决舒适的关键。
其实汉字的演变也是不断地从难以识读到便于识读的方向前进的。
汉字的历史,从甲骨文到金文,到小篆,到隶书,到楷书。
5216355b8c5475ede8.png
最早之前的字只有线条没有笔画。汉字纯用线条构造的话,识读起来是很困难的。当汉字有了笔画后,每个顿挫的、有各种形态的笔画,表面上看更繁复,但其实它使汉字更便于识读。王羲之在书法史中最重要的作用之一就是让中国的楷书定型了。从文字学意义上的汉字字体的发展已经终结于王羲之的时代。
由线条到笔画的不断演变。
1775055b8c54c6cbeb.png
经过不断的演变和淘汰,历史选择了我们的文字以楷书的形式来展现,而不是篆书,它符合人们的认知的规律。
同样,简化字在屏幕阅读时也是远远优于繁体字的。在屏幕上,我们毕竟需要耗费更大的眼力去分辨繁体字。至于简化字所损失的文化含量,那是另外一件事情。
提高汉字识别性,还有一个重要因素——汉字的结构及其外形。汉字的外形是我们识读汉字重要的依据。即便是英文,同样的内容,大小写不同,识别的难易度也完全不同。
5184355b8c5542ed42.png
而对汉字的外形影响最大的就是中宫。
中宫就是把汉字的方块分成9个格子,中间这个格子叫中宫。笔画向中宫密集的叫中宫收紧。
下图是不同的中宫对汉字识别的影响。
2177055b8c55d3cbdf.png
在做方正悠黑体的时候,所采用的是折中的方案。中宫太紧在屏幕上会造成笔画不必要的粘连。
作为一种体验式的产品,判断一款字体是不是好的、适合屏幕阅读的字体,必须通过我们的体验来检验——唯一的方式就是默诵和对比。
也就是要把一个段落的文字从头到尾默诵过去,看我们是否能够轻松地、顺畅地理解文字的内容,而不仅仅是看它是否排得整齐好看。实践是检验真理的唯一标准!通过默诵和对比的方式,就能判断出哪一种字体更适合我们的阅读。是默诵,而不是把它念出声来。
3950855b8c56899d4f.png 5170155b8c56ec7308.png
字体设计中的美术——写意的追寻

汉字是中华文明的活化石。通过汉字密码的解译,我们会发现很多的知识。中国人是如何认识这个世界、适应这个世界的,如何从野蛮到文明,在汉字中都可以有所发现。
比如我们汉字中有很多“手”的符号。汉字也不是天上掉下来的。
1651055b8c575d144e.png
2890355b8c57b953dd.png
人们的对各种对象的审美情感是相通的,所以有移情作用。单调,圆滑,呆板,肉,软,瘫这样的东西让人起腻,所以我们在做字的时候,应该选择它们 的反面——做得调和一点、生涩一点、有变化一点、骨感一点……。但要把握好这“一点”,而不是过量,掌握一个度很重要。
避免不必要的简单对称,使文字更灵动,亲切,耐看。设计中对称是美,但是在汉字的设计中或许不完全对称反而更好。适合阅读的文字应当表现出一种不温不火、不激不厉,一种非常平和的状态。

9011655b8c583c3924.png
4847655b8c58e495c7.png
字体设计中的技术

汉字横竖笔画占构成的主体,用矩形设计横画和竖画,使版面更纯净。
4663255b8c594a165b.png
去除视觉杂质,凡处在内部或者半内部的“口”型一律不“伸腿”。
53055b8c59a60d6f.png
均匀布白,优化排版后版面的整洁度。
4768355b8c59ff3850.png
当一个字中有较多横划时,多做等距处理,以适应小字号下的像素表现。
4022755b8c5a65fc28.png
字体设计的要素——笔形和结构,其中笔型包括“起、收”和“运、折”;结构包括“中宫”和“体式”。
4566555b8c5adcb5b4.png
“起笔”和“收笔”。
1067955b8c5b3ba7c0.png
“运笔”和“折笔”。
6911455b8c5b974ae6.png
不同的中宫。
860555b8c5bf358de.png
不同的体式。
3107155b8c5c59f3be.png
在汉字设计中还需要把握的要求是“自适应”和“他适应”。
“自适应”的意思是,汉字它本身是一个完整的造型,而且是一个有灵性的造型,应当是自如自洽的。如图所示,字的空白对比、笔形的协调性还有一些问题,做了一定的调整后,每个汉字自身的完善度便得到了改善。
7148755b8c5cb1b708.png
汉字的他适应,指的是一组字中,每个字与另外一个字,都要互相适应。比如“好”“食”“节”这三个字之间,都要相互适应。
8535955b8c5d7009c1.png
小结




B Color Smilies

你可能喜欢

制作彩带logo

LOGO作业本

2020 0 0

402620087 2015-10-20

制作彩虹logo

LOGO作业本

1819 0 1

402620087 2015-10-18

制作雨伞logo

LOGO作业本

1920 0 1

402620087 2015-10-17
联系
我们
快速回复 返回顶部 返回列表