腾讯CDC设计师:全方位解析英文字体基础

分类栏目:用户体验 - 视觉设计

24242

发布于 暂无评论

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

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

腾讯CDC设计师:全方位解析英文字体基础 - 33

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

  1. 顶角和底角非常锐利
  2. 字母正圆处理
  3. 升部降部偏长,优雅

腾讯CDC设计师:全方位解析英文字体基础 - 34

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

腾讯CDC设计师:全方位解析英文字体基础 - 35

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

腾讯CDC设计师:全方位解析英文字体基础 - 36

腾讯CDC设计师:全方位解析英文字体基础 - 37

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

腾讯CDC设计师:全方位解析英文字体基础 - 38

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

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

腾讯CDC设计师:全方位解析英文字体基础 - 39

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

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

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

腾讯CDC设计师:全方位解析英文字体基础 - 40

腾讯CDC设计师:全方位解析英文字体基础 - 41

腾讯CDC设计师:全方位解析英文字体基础 - 42

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

腾讯CDC设计师:全方位解析英文字体基础 - 43

腾讯CDC设计师:全方位解析英文字体基础 - 44

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

腾讯CDC设计师:全方位解析英文字体基础 - 45

腾讯CDC设计师:全方位解析英文字体基础 - 46

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

腾讯CDC设计师:全方位解析英文字体基础 - 47

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

腾讯CDC设计师:全方位解析英文字体基础 - 48

无衬线字体的情绪轴。

腾讯CDC设计师:全方位解析英文字体基础 - 49 腾讯CDC设计师:全方位解析英文字体基础 - 50 腾讯CDC设计师:全方位解析英文字体基础 - 51

 1.视觉平衡

腾讯CDC设计师:全方位解析英文字体基础 - 52

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

腾讯CDC设计师:全方位解析英文字体基础 - 53

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

腾讯CDC设计师:全方位解析英文字体基础 - 54

腾讯CDC设计师:全方位解析英文字体基础 - 55

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

腾讯CDC设计师:全方位解析英文字体基础 - 56

腾讯CDC设计师:全方位解析英文字体基础 - 57

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

腾讯CDC设计师:全方位解析英文字体基础 - 58

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

腾讯CDC设计师:全方位解析英文字体基础 - 59

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

 腾讯CDC设计师:全方位解析英文字体基础 - 60

腾讯CDC设计师:全方位解析英文字体基础 - 61

腾讯CDC设计师:全方位解析英文字体基础 - 62

2. 负空间

腾讯CDC设计师:全方位解析英文字体基础 - 63

腾讯CDC设计师:全方位解析英文字体基础 - 64

负空间指的是字母内部的空间,以及字母与字母之间的空间。在字体设计过程中,设计师不仅要设计字母的笔划结构,更重要的要考虑负空间的设计,使之平衡和协调。引用字体大师马西莫的一句话:“我们通常认为,字体排印就是黑色与白色。而排印实际上是白的,而不是黑的。因为字体是由形体之间的空间来定义的。这有点像音乐,音乐不是由音符,而是由音符之间的停顿来定义的”。据说英文字体设计师对负空间关系的斟酌时间可能占整体字体设计内容的1/3左右。

(1)单个字母内部的空间: “B”上下两个内部空间,必须上面小于下面,如果上下相同,那上面的视觉上看起来会更大,字母就会重心不稳。类似的字母还有S。

腾讯CDC设计师:全方位解析英文字体基础 - 65

(2)各字母间的相互平衡:字母之间也要取得负空间视觉上的一致。

腾讯CDC设计师:全方位解析英文字体基础 - 66

(3)字与字之间的间距:调整字母与字母之间的空间,追求视觉上分布匀称,而非数值上的均匀,以达到一种视觉的节奏感和平衡感。比如字体中的I和小写l之间距离应该大些,因为两根竖线之间的空间是最小的; V、Y 和其他的字母相邻时间距应该缩小,因为倾斜笔划所产生的空间比较大。

 腾讯CDC设计师:全方位解析英文字体基础 - 67