欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-10-30 20:14:16
这篇教程是向脚本之家的设计朋友介绍全方位掌握英文字体基础,是界面设计师必备的,也是非常实用的一篇教程,好了,感兴趣的朋友快快来看看吧... 15-07-21...

pearl(腾讯cdc设计师):这是一个给自己准备的字体学习课。开始的初衷是想解决工作中一些关于字体的疑问(如排版、logo设计等),同时也想通过回顾设计的基础知识来提升自己。所以给了自己这个课题,作为初学者只接触到一点皮毛,整理分享出来,如有不足之处烦请指正。

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

「字体排印」位于语言、文化、科技、美学的交汇处,是一个内涵与外延非常丰富的大话题,这次分享仅选择一些基础的有用知识。

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

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

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

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

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

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

英文字体最简化的分类:衬线体、无衬线体。二者区别在于衬线体有爪形的衬线并且笔划粗细有变化。

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

 一、衬线体

非常古老,可以追溯到古罗马时期的石柱铭文。它风格古典、正式,具有历史传统和意义。

按照历史发展顺序,衬线体可分类为:古罗马体(old roman),旧风格字体(old style),过渡字体(transional),现代字体(modern)。我们选取其中两个节点——old style和modern字体,通过对比两者特征,就可以理解整个衬线体的发展。

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

旧风格字体(old style):

特征:对角强调线,倾斜、括弧型衬线,较缓和的粗细过渡。

风格:传统,常见于书籍、报章杂志的内文排版。

现代字体(modern):

特征:垂直强调线,水平、极细衬线,强烈的粗细对比。

风格:横平竖直,现代感,高冷。



总结起来,在整个衬线体发展中,笔划对比变得越来越强烈,衬线越来越尖锐纤细,过渡字体的笔划粗细和衬线弧度恰好介于old style和modern之间。其一大原因是刻字师傅的技术越来越进步,刻工也变得细腻,使得精确的线条、更精细的粗细对比成为可能。而强调线的倾斜角度也逐渐被「扳直」,这是手工书写向现代排印转变的一个表现。

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

古罗马(old roman)、旧风格(old style)衬线字体案例:

《kinfolk》是一本推崇慢生活的杂志,常介绍美食、旅行、有格调的家居设计,欣赏微小平淡,返璞归真的美。在此背景下,它的标题使用的是一种古罗马体(old roman):optimus priceps,有一种手工感、古拙的趣味,以及书法的味道。可以注意f衬线左右两边的不对称,以及o笔划的凹凸不平。这种字体风格与kinfolk的定位是相符的。内文使用的有旧风格字体(old style)calson和garamond,相比下我更喜欢下面第三张图内文使用的garamond,搭配大背景图片和居中排版,显得传统、柔软,有一种诗歌般的美。

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

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

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

现代字体(modern)案例:

因为现代字体(modern) 有着锐利的工业感, 同时也保留着传统的衬线元素,显得现代而优雅。所以非常适合时尚工业,vogue、elle等杂志都使用了现代字体。许多奢侈大牌也用现代字体作为logo,强调自己百年的传统工艺和优良设计。如使用 didot的 giorgio armani、burberry,以及使用bodoni的valentino。

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

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

通常会认为,衬线体代表古典正式,无衬线体代表现代亲和。但衬线体真就不能传达出现代和亲民么?

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

答案是否定的。converse所使用的字体rockwell属于板状衬线体(slab serif),如下图所示。它的特点是衬线和字粗细相同,几何与单线设计呈现出现代、年轻的感觉,不似现代体(modern)的精细,适合复古潮牌。

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

所以字体的情绪其实是相对的,仅在衬线体内部,也有不同情绪的区分。

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

 二、无衬线体

无衬线体的特征和风格:

(1)完全抛弃装饰衬线,只剩下主干,造型简明有力,更具现代感

(2)适用于标题、广告,瞬间的识别性高



(3)笔画粗细对比小,视觉上看起来基本一致

(4)x高度较高

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

无衬线体也可以细致的分为四类:早期的无衬线体(grotesk)、新无衬线体(neo-grotesk)、几何无衬线体(geometric)、人文无衬线体(humanist)。下文每类选择了一种代表字体来进行介绍,从新无衬线体(neo-grotesk)开始。

1. 新无衬线体(neo-grotesk):

代表字体是广为人知的helvetica。用helvetica作为logo用字体的品牌数不胜数。该字体诞生五十周年时曾有一部纪录片《helvetica》客观的纪录了它的诞生背景、流行影响、以及各年龄层设计师对它的评价,相信很多设计师已经看过了。

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

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

"设计师的生活是战斗的生活,对抗丑陋的战斗。"——《helvetica》马西莫.维涅里

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

先谈谈helvetica的优点:

(1)中性

现代主义认为,字体本身只是传达信息的媒介,简明的字体可以让信息更快的传达,这比视觉表现、风格更重要。因此helvetica在设计之初遵循这一设计理念,保持中性,正如那个比喻说的"字体应该像一个透明的容器一样"。由于它中性的特征,helvetica既可以被运用到地铁导视系统,给人有一种现代、高效、清晰的感受,也可以被运用到aa这样的时尚品牌。因为中性,就有了更广阔的运用空间和更开放的解读方式。

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

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

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

(2)具有坚实的形式

在这里说「坚实的形式」而没有说「可读性佳」,是因为它的可读性是有挑战的,但helvetica确实在字型设计上经过认真考量。在helvetica之前,廣告、杂志上的字体充斥着浮夸花俏的手写体,helvetica的出现就像一股清流,它去掉了多余设计,关注字体本身的结构,给设计界带来更优质的可选方案。

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

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

整体感受是简洁、清晰,没有手工感,非常冷静的字体。细节:

a. 切口齐平,笔画始终以水平或垂直收尾

b. 顶端平坦

c. 方形点

d. 据说helvetica字母包围的面积和它的笔画所占的面积是一样的

e. a的负空间呈水滴型

(3)与瑞士平面设计紧密相关

helvetica的成功不是它一个字体能够完成的,是跟一系列的新无衬线体(neo-grotesk)的出现,以及与整个瑞士平面设计的融合,风靡全球分不开的。它们共同形成了一整套完整的理念:崇尚绝对的理性、客观、系统化。如我们所熟知的网格系统,就是推崇系统性、数学化的视觉体现。

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

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

瑞士平面设计的典型手法是以纯粹文字编排来做极简的传达。它在1960年后风行世界,是因为表现简洁、直接,并且在操作上容易标准化、系统化。当时的美国企业正在为全球化扩张寻求一种快速传播并且统一识别性的视觉解决方案,瑞士平面设计、helvetica的出现加上各种大师的成功运用,把它们一起推向顶峰。

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

然而helvetica并不是完美的,在这里归纳三个缺点:

(1)缺乏韵律。helvetica的设计理念是一致、去个性,字母的整体造型都偏圆,因此缺乏阅读韵律,并且没有针对小字阅读优化,在优秀字体及细分领域都丰富的今天,helvetica的优势减弱。



(2)中性也是一把双刃剑。冷静,客观的同时,也抹杀情感和活力,忽略了形式可能为读者带来的情感体验。

(3)滥用。可参考今天flat design的泛滥,误用、滥用造成人们的审美疲劳。

关于这个字体的用处,右戳观看:《大开眼界!helvetica字体的15种妙用》

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

如果你喜欢中性感的字体,又想修正helvetica的可读性缺陷,可以尝试univers,比helvetica更加洗练的造型,并且字重齐全。

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

另两款新无衬线体(neo-grotesk),分别是helvetica的前身和号称helvetica killer的字体。

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