第19期【你怎么看】我们请到了腾讯桌面安全设计中心 设计师 Teven跟大家分享

>>点此回顾本期话题

 

 

大家好,很荣幸能在这里分享一些Teven对字体的浅见。在互联网产品设计中,字体的设计其实也非常有讲究,字体的好坏,直接影响到用户的视觉感受,而视觉感受又是腾讯用户体验体系中重要的一环。一套字体的舒服与否会有很多因素的影响,其中结构的合理性是主要原因。

 

第一中心线

 

我们在进行字体设计时通常是在25x25的方格内进行设计,把竖线称作经线,把横线称作纬线,在经线13和纬线13上的两根粗黑线,称为第一中心线。红色的点就是重心点(见图1)。

 

(图1

 

在这里有两个重要的结论需要记住的是首先第一中心线和重心点的位置是永恒不变的,其次,每一个字都是受第一中心线所控制的(图2)

 

(图2

 

其实,每个字不光受到第一中心线所控制,每一个合体字的形声部分也都会受到各自的中心线所控制(见图3

 

第二中心线的相关理论

 

1.第二中心线之间的距离不变

(图3)

 

3 腾字的行旁“月”被 1的中心经线所划分,右边声旁被2的中心线经所划分,12产生了第二中心经线,同理34产生了 第二中心纬线。

 

2.第二中心线在视觉上是杠杆原理

 

下面举个例子来说明为什么第二中心线在视觉上是杠杆原理

例一:用第二中心线分析字体结构

(图4)

 

例一:假设在视觉上第一中心线作为支点(黑色的粗线),第二中心线作为第一中心线左右的二个力点, 右边的力点用横线表示,左边的力点用竖线表示。右边的第二中心线要靠近第一中心线,相反左边的第二中心线远离第一中心线。于是他们在视觉上就达到了一种平衡(见图4

 

3.第二中心线移动的情况

 

          

                                                     (图5   

 

5放上同一套字体“游”“戏”,可以发现行旁所占的视觉重量明显变大了,而此时第二中心线也明显的向右移动了,但是他们在视觉上依旧是平衡的。

此时我们可以得出关于第二中心线的第三个结论:第二中心线是一个游移的中心。

 

第二中心线的杠杆原理公式

 

事实上,关于第二中心线的理论,我们可以直接明了的用一个杠杆原理的公式来总结。

黑色的粗线是第一中心经线也是杠杆原理的支点,因为第一中心线的位置是永恒不变的。

 

                                                   (图6

 

6 F1负担了“戏”的声旁 “戈”的视觉重量;F2负担了“戏”的形旁 “又”的视觉重量。F1>F2D线是表明第二中心线“距离不变”的结论的杠杆。我们可以发现负担重量大的会靠近支点,负担重量小的会远离支点,这样在视觉上也就达到了重量平衡,也就符合我们熟悉的杠杆原理。那我们就可以用一个公式来说明这个问题即:F1D1=F2D2

说了这么多理论,我们回过头来看看昨天的3个字体存在什么问题

 

字体3

 

 

这套字体虽然在笔画上和官方字体的很像,但是并有官方字体看的那么舒服,是因为它在结构上是存在很多问题的。

1.字体的大小平衡并没有把握好,首先,每一个字体并没有去规范好它们的大小,尤其是“戏”字,在如此小的字体上宽度就比其它字多了20个像素。

2.第二中线距离没有统一,“游”“戏”两字的第二中心线距离和腾讯两字的第二中线距离没有统一“戏”的第二中心线距离宽了10个像素。所以后面两字看来就会肥一点。那整套字体看起来就会不平衡。

 

我们再来看看字体2

 

 

这一套字体虽然没有官方华丽的连笔但它看起来的问题会相对少些。因为他们整体的大小和第二中心线的距离差距没有那么大只是在1-2个像素之间。所以后期再进行笔画的变化就会好看很多了。

 

最后看看字体1

 

这是一套官方出品的字体,也是看起来最合理舒服的字。因为它既遵循了第一中线视觉平衡的原理同时也遵循了第二中心线距离相等的原理

 

第二中心线是针对汉字结构共性方面提出来的,至于表达汉字的个性问题,还会涉及到黑白反光,线条分割等理论。但是我相信只要利用好这个理论对我们日常的字体设计一定能够起到帮助作用。