界面设计必备:全方位掌握英文字体基础

  发布时间:2015-07-21 14:37:18   作者: Pearl(腾讯CDC设计师)   我要评论
这篇教程是向脚本之家的设计朋友介绍全方位掌握英文字体基础,是界面设计师必备的,也是非常实用的一篇教程,好了,感兴趣的朋友快快来看看吧

2. 几何无衬线体(Geometric):

代表字体是的Futura。所谓"几何"就是将字母归纳为圆、方、三角等几何形状的字体。

Futura受到包豪斯的影响,造型有设计感。笔划以垂直、水平的硬朗笔划为主。细节:

(1)顶角和底角非常锐利

(2)字母正圆处理

(3)升部降部偏长,优雅

iPhone的报刊杂志icon,「ART」三个字母使用的就是Futura。

Futura在德语中是「未来」的意思,因此它除了常见于有设计感的产品,如LV、Omega,也常用于「未来」题材。

在前面的图中可以看到Futura为了保持设计感,j、t省略了尾部,a、g使用单层结构,因此在可读性上有些问题,并不适于内文排版。并且它个性鲜明,有点"抢眼"。如果你喜欢几何无衬线的造型,但又想选择更温和、可读性强的字体,可以尝试Avenir。Avenir虽然同属几何无衬线体,但它在被设计时并不拘泥于几何形式,而是以视觉为准,显得人文、柔和,如a的尾部增加了一点点外翘的小细节。

3. 人文无衬线体(Humanist):

代表字体是Myriad。人文无衬线体具有更好的韵律感,气质开放、亲和,不呆板、不冰冷。下图通过与Helvetica的对比,可以直观感受到什么是「人文」特征。

(1) 人文无衬线体的x-height相对较小,使得字母之间的竖向变化更加清晰,整体更有韵律。

(2) 人文无衬线体的e、s等字母收尾采用半包围结构,更开放,不如Helvetica全包围的那么拘谨,显得亲和随意。

(3) 人文无衬线体线条柔美,不是Helvetica的工程感,更流线型,具有一定的手写味

案例:苹果的VI字体,用于宣传:广告、网站、产品铭文等。港铁地图的部分字体。

同属于人文无衬线体的字体还有:Frutiger、Segeo




通常会认为,衬线体代表古典正式,无衬线体代表现代亲和。那么无衬线体就不能表现优雅和古典吗?

答案是否定的。无衬线字体Optima融入了衬线基因,虽然没有衬线,但粗细变化相对明显,比划末端加粗,显得非常优雅有韵味。(在处理logo时如想要既优雅古典,又不显得老陈迂腐,可参考这种思路。)

无衬线字体的情绪轴。

1. 视觉平衡

(1)同样粗细的线条,由于视觉误差,水平的看起来要比垂直的更粗。因此在设计英文字母时,就应当充分考虑到视差。

(2)Futura是几何无衬线体,它的O看起来像是正圆,当我们和真正的正圆对比时,就会发现Futura的几何形状也是经过优化的,水平方向笔划微调修细。三个「圆」相比,Avenir虽然最不似正圆,但作为字母O却是看起来空间最舒服、最稳定的。

(3)这是是用圆弧和直线拼接起来的O,然而由于视差,却看起来有两侧内陷的错觉。因此在处理时,会讲两侧稍微向外隆起一点点,并微调水平方向的线条,就能把生硬不圆润的圆形变为视觉柔和的O字母了。

(4)X的造型原来不是斜线直接相交的结果,而是把斜线稍微错开,才能看起来像是相连的状态。并且为了避免四条斜线相交造成中间黑色部分太密集,中心位置的笔划略调细了一些。

(5)虽然无衬线体的比划粗细基本一致,但实际还是有着细微的差距。从正面看到的A(左侧图)非常正常,然而当A被水平翻转后(右侧图),立刻就有了略怪异和不稳的感受。A的右侧比左侧笔划粗,是受到历史上平笔书写以及衬线体延续下来的习惯的影响。翻墙看视频《罗马体大写字母使怎么形成的?》

(6)绘制图标时我们都有经验,由于图标外形轮廓和内部复杂程度的不同,视觉体量感是不同的,不能完全依照尺寸大小而要根据视觉感受来判断。字体设计有共通之处。同样字号的文字,圆形O和三角形的A要高于参考线。在做LOGO时可以留心这点,参考案例NIVEA。




相关文章

最新评论