header_v1.7.40

字体设计之英文篇

144天前发布

原创文章 / 平面 / 教程
桥小树 原创,如需商业用途或转载请与桥小树联系,谢谢配合。

对英文字体的一些粗浅学习整理。

写在前篇:


本文主要是学习笔记(整理篇),非原创,不得不说,英文字体是一个非常大的系统,学习整理起来有些困难,主要是比较难以系统的全面认识和区别字体,毕竟平时很少设计或使用英文,不太熟悉,有很多内容要学习。下面的文章也主要是一些很皮毛很皮毛的东西,在学习的同时,希望大家也要抱有质疑精神,下面说的也不一定对,希望后期再深入学习些,再写些这方面内容。


本文主要有以下几个部分:

英文字体的初步了解

主要字体的具体认识

中西文混排和搭配的主要注意点

最后给动手党一个福利:如何制作一整套原创英文字体。


(由于网上观看的内容太多太杂,这里列出一些比较优质的分享,其他就不一一指出了,在此感谢那些乐于分享的朋友们)

https://www.zhihu.com/question/30771964 这篇文章挺好的,有些故事味。

https://zhuanlan.zhihu.com/p/19569436 

https://www.cnvis.net/new.asp?id=273  

https://www.uisdc.com/english-fonts-practice-guideline  还有这个。

推荐网站:https://www.typeisbeautiful.com/

推荐书籍:《西文字体》《字体故事:西文字体的美丽传奇》(一定要看的)

另外想特别提醒的一点就是新手千万别犯的错误:用中文字体去输入英文。



# 英文字体的初步了解 #



大家都知道,英文有26个字母。但这26个字母的来历,知道的人可能就不多了。

搜索了下,原来英文字母渊源于拉丁字母,拉丁字母又渊源于希腊字母,而希腊字母则是由腓尼基字母演变而来的,也就是英文字母是由鼻祖腓尼基字母演变而来的。


哪鼻祖腓尼基字母又是什么?腓尼基是地中海东岸的文明古国,大约公元前13世纪,腓尼基人创造了人类历史上第一批字母文字,共22个字母(无元音)。腓尼基字母是世界字母文字的开端。在西方,它派生出古希腊字母,后者又发展为拉丁字母和斯拉夫字母(又称西里尔字母)。而希腊字母和拉丁字母是所有西方国家字母的基础。在东方,它派生出阿拉美亚字母,由此又演化出印度、阿拉伯、希伯莱、波斯等民族字母。中国的维吾尔、蒙古、满文字母也是由此演化而来。

腓尼基的演变


以上是一些小历史片段。如今英文字体可以说是多种多样,就像种类繁多的中文字体一样,每一段字体历史中有着其独特的发展历程,且随着历史发展、社会文化科技进步的需求,也出现了各种应用于不同功能的字体,如何认识了解这些字体,觉得可以先从一个简单的分类开始:


衬线体、无衬线体和其他字体


英文字体可以简单的大致划分为衬线体、无衬线体和其他字体等。衬线体、无衬线体二者区别在于衬线体有爪形的衬线并且笔划粗细有变化。其他字体则包括哥特体,手写体和装饰体等,这些字体在我们工作中使用相对较少,所以在这里主要介绍衬线体和无衬线体两大类。


一.衬线体


按照历史发展顺序,衬线体可分类为:

古罗马体(Old roman)

旧风格字体(Old style)

过渡字体(Transitional)

现代字体(Modern)


四种字体的细节差别


衬线体的历史比较悠久,但从其历史演变,可以看出笔划对比变得越来越强烈,衬线越来越尖锐纤细,过渡字体的笔划粗细和衬线弧度恰好介于Old style和Modern之间。其一大原因是刻字师傅的技术越来越进步,刻工也变得细腻,使得精确的线条、更精细的粗细对比成为可能。而强调线的倾斜角度也逐渐被「扳直」,这是手工书写向现代排印转变的一个表现。


衬线体还可以划分为:支架型衬线体、发丝型衬线体、板状衬线体;支架型衬线体常见于一些优雅复古的海报或书籍等,发丝型衬线体则现在会在一些时尚杂志看到,板状衬线体则相对有些中性,在很多场合都比较常见。



二.无衬线体  


无衬线体相对衬线体更加亲和,现代。从类别上大致可以分成四类:

Grotesque(怪诞体)、Neo-grotesque (新怪诞体)、Geometric (几何体)、Humanist(人文主义无衬线体)。


Grotesque(怪诞体)是最早出现的无衬线体,所以保留了一些衬线体的特征,比如小写字母g的写法不一样,数字1下方有粗衬线,如Grotesque或 Royal Gothic体。 Grotesque也会被直接称为歌德体或者音译为格洛特斯克体。它没有衬线并且笔画极粗还有明显的笔画粗细对比,通常只会用在标题或者大尺寸场合。


Neo-grotesque (新怪诞体)新怪诞体是最常见的无衬线字体了,其笔画粗细变化小、开口处紧凑、X 字高较大、曲线柔和很适合最为正文字体,有名的 Helvetica就是新怪诞体的代表,不带情绪,冷静简洁。



Geometric 几何体,如其名是遵循几何形式来制作的字体,极具现代感,不适合作为正文字体,著名的 Futura就是几何字体。Geometric字体趋近几何形状,透过鲜明的直线和圆弧的对比来表达几何图形美感的一种无衬线字体。例如字母O非常像正圆,字母a是半圆加一个尾巴,易读性不好所以不适合用在正文,但是这类字体有非常强的设计感。在某些需要突出设计感的场合用磅值大的字体效果很好。(其他这类字体:Avant Garde、Century Gothic、Futura、Gotham)



Humanist(古典体或称为人文主义体)有一点书法感,给人温暖的典雅气氛,有一点女性气质,识别度非常好,(Johnston、Frutiger、Gill Sans、Lucida、Myriad、Optima、Segoe UI、Tahoma、Trebuchet MS、Verdana)。这些字体是无衬线字体中最具书法特色的,有更强烈的笔画粗细变化和可读性。



介绍先到这里,看一些经典字体的介绍和应用,或许更能熟悉些。


PS: 大家都知道,无衬线字体适合作为标题,衬线字体则适合正文,但是在显示器上,就不一定了。印刷业为了节约成本,因此会尽可能的在保证可读的情况下,把文字印小。显示器不存在这样的成本,因此可以显示比较大的文字。在文字足够大的情况下,无衬线字体也是同样可读的,但是必须保证以下原则:凡是使用无衬线字体的,必须保证其在正文内容中的可读性,换而言之,如果你要使用无衬线字体显示网页的正文内容,那么,你必须把它的font-size设的足够大,以保证用户能轻易阅读。至于具体将font-size 设多大,是因字体而异的。对于11px以下的英文字体,推荐使用衬线字体。


适合长文阅读的文字:无衬线体中适合长文阅读的文字一般是Humanist,衬线体中适合长文阅读的文字一般是支架衬线体。下面列几个个人觉得比较适合排长文的无衬线体:Lucida Grande、Roboto、Open Sans。




# 主要字体的具体认识与赏析 #

有以下一些:

Helvetica、Futura、Gill Sans、Optima 、Garamond 、Caslon、Myriad、DIN

Frutiger、、Verdana、Bodoni


其实还有很多其他的优秀的字体,说不完,也仁者见仁,平时大家可以留意些国外LOGO或一些有英文应用的海报,看自己是不是能认出来是什么字体。




Helvetica


Helvetica 是一种被广泛使用的的西文字体,于1957年由瑞士字体设计师爱德华德·霍夫曼(Eduard Hoffmann)和马克斯·米耶丁格(Max Miedinger)设计。Helvetica体现了瑞士设计的理性主义精神,同时被认为是现代主义设计理念的典范。2007年,为了纪念Helvetica字体诞生五十周年,导演(Gary Hustwit)加利·哈特斯维特拍摄了一部80分钟长的纪录片,就叫《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)中性也是一把双刃剑。冷静,客观的同时,也抹杀情感,忽略了形式可能为用户带来的愉悦。


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




Futura 


Futura :极简风格的德国字体,拉丁语是未来的意思,现代且具有几何特征,感觉是现在的主流大热字体,尤其是要突出时尚,设计感的时候可以使用。制作过程中受到包豪斯运动的影响,造型有设计感。Futura 的几何构造、没有人文轴心的特色强烈,可以说是理性逻辑与感性风格兼备,是许多设计师的入门款。参考Futura 的几何造型而衍生的设计也不少,许多国际知名的品牌识别就是以Futura为基础发展字体,像是Chanel、LouisVuitton、Nike、Adidas 都是Futura 爱用者,所以当然曝光度与辨识度也非常高。


Futura细节:

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

(2)字母正圆处理

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



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






Gill Sans


Gill Sans:Gill Sans字体是英国的Helvetica,清晰易读,颇为实用,既适合用于正文也适合用于标题,并且能够有效暗示时间和环境。Gill sans 是人文主义无衬线字体的代表,体现了基于传统的现代主义的最佳状态。是由英国字体设计师,艺术家埃里克 · 吉尔设计,1927到1930年间发布。Gill Sans相对futura会柔和一些。






Optima  



Optima   比较接近衬线字体感觉的无衬线,笔画的粗细变化比较有趣,是两段比较粗中间比较细。在大字号作为标题的时候,其笔画末端的拱形设计显得十分华丽与人性化。用在小字号的时候会给人一种亲近和华丽的感觉,可读性也不错。Optima字体严格遵循了黄金分割原则,所以有着优美的比例,十分受大众喜爱的字体。比如这个《时代周刊》的经典封面,他们在1968年制作的封面,强有力的封面作品由艺术家Roy Lichtenstein绘画,旁边的“The Gun in American”字体是Optima。有意思的是,在1998年,禁枪与否的话题又兴起的时候,《时代周刊》又重新复刻了这个封面,依然是Roy Lichtenstein绘,唯有字体变了,变成了1990年代的感觉。




——

Garamond


Garamond :典型的古典的威尼斯风格字体,属于最古老的的罗马字体风格,其特点在于j的尾部较小的弧度,比较高的上部,比较小的字怀和字碗。传达的感觉很像文艺复兴时期的书籍,或者17-18世纪的公文的风格。Garamond 是旧衬线体的代表字体。这个名字源于法国的一位铅字铸造师 Claude Garamond 1480-1561)。后来大部分被命名为Garamond的字体都是出自于另一位铅字铸造师Jean Jannon之手。


Garamond是公认的拥有最好可辨识性(legibility)与可读性(readability)的字体之一。



Caslon 


Caslon :1716年英国威廉卡斯隆以荷兰巴洛克字样为原型,加入文艺复兴时期的威尼斯味道。英国历史上第一款原创设计字体,被称为“老古董”是过渡字体和现代字体的鼻祖。同时也是作家萧伯纳最喜爱的字体,曾经说过自己要誓死拥护Caslon。其偏短的上下部、相等的饰线,笔画粗细对比明显,笔触变化柔和,有着书法般的笔画节奏。



——

Myriad 


Myriad :1990年罗伯特·斯林巴赫和卡罗·图温布利以Frutiger字体为蓝本为Adobe公司设计的。可以说是数码字体先驱,温和的人文主义的无衬线体。这么说的原因是因为他吸收了旧式的衬线字体的元素。和罗曼时代文书一样,大写字母有一个水平轴线,而小写字母基于格里高利文书的模型制作,通过不同的字母宽度调解平衡,给人温暖友好的感觉。可读性和友好的界面使得Myriad在印刷和显示两方面都表现出良好的适应性。


苹果网站上的字体:Myriad(大标题)+Helvetica(正文)                                           


——

DIN


DIN’被德国人视为“国民字体”,因为‘DIN’在德国有着悠久的历史。1994年德国埃里克·施比克曼正式推出。DIN早在1905年时已经出现在德国普鲁士铁路局的所有车辆上,但当时没有命名。1936年,该套字体再度改版,并被命名为‘DIN 1451’(DIN = Deutsches Institut für Normung的缩写)。不久后,‘DIN 1451’在德国被广泛使用,成为了交通标志、 路牌、 门牌和车牌的标准字体。和你想的一样,所有形容德国的词汇像工业化、标准化、机械化这些都可以形容他。纯粹的几何构成方式没有任何多余的装饰,水平笔画更线、曲线更加流畅,字间距的拉大也让单个字母周围获得了更多的空间。提高了可读性也简单实用、严肃有力。由荷兰设计师Albert-Jan Pool所重新设计的FF DIN,这个标准的独裁风格的字体已经重新获得新生了,在全世界被广泛使用。(PS:很喜欢这款字体啊)



——

Frutiger


 Frutiger的诞生背后有一个有趣的故事,1968年,设计师 Adrian Freudiger 被聘请去为巴黎戴高乐机场设计标识。尽管 Adrian 已经设计出一套成功的字体族 Univers,但是他依然决定为此专门设计一套全新的非衬线体字体,满足机场的需求,这套字体就是现在的Frutiger。


Frutiger字体家族在1997年更新,新版本称为Frutiger Next,改变了一些数字字符的细节,并加入真正的手写体风格斜体,而不是像老版本一样沿用Oblique Roman的斜体。Frutiger Arabic是Frutiger家族中的阿拉伯字体,由黎巴嫩女设计师内丁·夏因于2007年设计。


由于其成功的设计,Frutiger也成为众多模仿的对象。Adobe公司的Myriad,还有微软公司的Segoe UI是最著名的两款模仿字体。而香港九广铁路公司亦自行研发了Casey,用于其铁路系统上。


https://www.zcool.com.cn/article/ZMTc2Njg0.html 这里有更详细的介绍。

https://www.zhihu.com/question/21990464/answer/58762617(如何评价 Frutiger 和类 Frutiger 字体 Myriad、Segoe?)



——

Verdana


Verdana:微软的另一款经典字体,有一些借鉴几何无衬线,但是可读性相当好,也是第一批web-safe字体,应用非常广泛。Verdana是以Frutiger字体为蓝本设计的,目的是将其改造成适合屏幕的字体,很多网页和UI设经常用到这个字体。宜家从2010 年起抛弃了使用多年的 Futura, 转而投向了 Verdana 的怀抱。据宜家的解释,这种转变的原因是为了保证字体能适应各种国家的文字(之前的宜家字体不能兼容亚洲文字),从而保证宜家设计风格的一致性。可见 Verdana 在国际化适应范围上是比较广的。


跟人性的字体 Frutiger 一样, Verdana 设计理念是适应那时低分辨率的电脑屏幕。其风格特征是高 X基准,字母间宽松的间距,以及很宽的字母空心(比如 a 和 p 闭合部分的距离),以便在小字号上也能易于辨认。



 ——

Bodoni


Bodoni 是一套源自19世纪的经典字体,这套字体最终被Morris Fuller Benton 重新设计翻新成了现在的样子。这套字体拥有机械的质感,并且现在已经得到了广泛的应用。Bodoni字体被誉为“现代主义风格最完美的体现”。字体粗细对比强烈,给人优雅浪漫的感觉。常用于时尚杂志或书籍设计中,类似的还有Didot字体。




英文就是Bodoni 



西文混排和搭配的主要注意点

1.空格


由于英文是有字母组成单字、单字组成句子,所以一个句子里面的每个单字之间有「空格」的存在,但中文撰写时并没有这个习惯(中文的空格只会出现在段落首的缩排以及尊称前的空格),于是在中英文混排的时候,如何安排适当的空格让阅读时更为轻松舒适呢?


以这个句子为例:


● 中英文间不使用空格,英文也不使用空格:

「今天早上Mike推荐了我看DesiringClick上面一篇关于ColorSpace的文章。」

强迫取消英文的空格当然会造成一些识别上的问题,而实际上整体的阅读性也不好。

● 中英文间不使用空格,英文使用空格:

「今天早上Mike推荐了我看Desiring Click上面一篇关于Color Space的文章。」

英文单词之间加入了空格作为区别,阅读时略嫌拥挤,不是非常顺畅

● 中英文间使用空格,英文使用空格:

「今天早上 Mike 推荐了我看 Desiring Click 上面一篇关于 Color Space 的文章。」


在中英文之间也加入了空格,可以感受到整体阅读起来更舒适,且也让英文得到比较舒适的展示。让整篇文字的中英文之间得到顺畅的过度,并不会过度拥挤影响视觉。值得注意的一点是,当中文文章中出现英文单词时,大多数是姓名、专业术语以及专有名词或数字、西文字符时等,适当的空格可以让英文与中文有适合的分界,当使用者快速浏览文章时、更能方便抓到这些关键字。


2.标点相关

序号后侧的标点是序号的一部分,应当跟随序号的属性。

因此,西文序号用西文标点,中文序号用中文标点。

甲、文本…… / A. 文本……

贰、文本…… / II. 文本……

三、文本…… / 3. 文本……

A. Text…

II. Text…

3. Text…


这里有更多关于空格,标点的规范内容:

https://github.com.zcool.cn/sparanoid/chinese-copywriting-guidelines#%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A8%E4%B8%8D%E5%9C%B0%E9%81%93%E7%9A%84%E7%B8%AE%E5%AF%AB




3.搭配相关

英文字体之间:字体搭配总体的原则是一致性加对比性。一致性指的是选择调性和情绪一致的字体。比如现代罗马体搭配几何无衬线体,古典罗马体搭配年代比较久远的无衬线体。字体的情绪表达需要统一,严肃的字体并不适合搭配随意的字体。

  对比性是指字体之间要有较明显的差异,不能感觉很像,分不开差异。


对比性也可以用很多种方式达成,上面列出的不同字体搭配是一种,不同的字重和不同样式都可以,用字重来强调对比的话最好不要选择相邻等级,用隔一个等级的字款搭配。


中英文之间:这一块并没有看到比较合适的分享,有位知乎大神说,这一块其实比较自由,且网上没看到这方面的优质分析,等以后深入了解后再说说吧。




福利时刻:https://www.douban.com/note/145325493/(如何制作ttf字体文件的教程)


2
    Hello PM 意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功