27

学习字体设计前,先补上这份超全面的字体基础知识

 3 years ago
source link: https://www.uisdc.com/font-design-basics
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Hello,大家好,我们在做设计的时候总离不开字体,可是多如牛毛的字库字体里,免费的只有那么几个,难以满足我们的工作需求。铤而走险的话又会容易招到律师函警告,那么怎么办呢?最直接粗暴的方式就是学会字体设计,需要用什么字体就做什么字体,自己动手,丰衣足食。那么学习字体设计应该从哪里开始学呢?今天的这节课,我们就为你开启字体设计的新大门,给你们介绍一些最基础最基础的字体设计知识。

Rnq263u.jpg!web

首先,我们来了解一下字体设计的三个原则,第一个是易辨性,易辨性指的是我们设计的文字要易于识别。

Evy2Mva.jpg!web

可读性是指当我们设计了一套的字体,我们将他们放在一起之后,是否能够让人流畅、舒适的阅读。

iIr6b26.jpg!web

艺术性是指字体的表现力与美观程度,作为字体设计师,好看的字体肯定是我们所追求的。

eA7JziJ.jpg!web

当然,不同情境下的字体对这三个原则的要求都是不同的。例如高速公路上的指示路牌,需要将易辨性做到极致。

bMfENn7.jpg!web

日本就为了高速路的路牌专门设计了一款字体。

YBRFBry.gif

我们来看看这一套字体,他的中宫非常的大,并且省略掉了非常多不影响识别度的细节。为的就是让这款字体在极短的时间内就可以被识别。

ZfaAvaV.jpg!web

而对于书籍里的大段文字,最主要追求的则是可读性,降低人在大量阅读时产生的疲惫感。

aIf2mmq.jpg!web

对于海报上的标题字来说,艺术性则是相对最重要的,因为海报标题需要足够的有张力和美观才能够吸引受众的注意。但是海报也得保证一定的易辨性,完全丢失易辨性的海报就失去了他原本传达的作用。

mm2IJbR.jpg!web

不过对于一些玄之又玄的艺术作品来说,易辨性和可读性就不是那么重要了。但是设计师毕竟不是纯粹的艺术家,我们面对的受众是普罗大众,我们做字体设计的时候还是需要尽可能的保证易辨性和可读性。

对于字体设计来说,易辨性、可读性和艺术性这三个原则是非常重要的,有许多初学字体设计的设计师总会忽略掉这三个原则,为了追求视觉上的效果,对文字的结构、笔画进行大幅度的变动,导致文字的识别性大大降低,而且最后做出来的效果也并不美观。那么初学字体设计的我们应该怎么避免这种情况呢?很简单,我们要先把字体的基础打扎实,先不要追求变化。接下来我们就给大家讲解一些汉字的笔画结构以及其他基础知识。

7b6RNbN.jpg!web

大家还记得我们小学第一节语文课学的是什么吗?没错,学的就是笔画和字体结构。接下来我就带着大家一起来回顾一下这些已经被我们遗忘了的小学知识。

Ij6ZvmE.jpg!web

讲汉字笔画的话我们不得不提到相传王羲之所创造的永字八法。

YVVrQjJ.jpg!web

永字八法将永字拆分为了八个笔画,分别为,侧、勒、弩、趯、策、掠、啄、磔。

eAjeQjj.jpg!web

他们分别对应点、横、竖、钩、提、撇、短撇和捺。

fyMrmeZ.jpg!web

到了现代,永字八法演变成了现代的八个基本笔画(点、横、竖、撇、捺、提、折、钩),原来的短撇被折所取代了。

RbQnAfr.jpg!web

通过这八个基本的笔画,我们可以组合出更多复杂的笔画。

qyA7nae.jpg!web

接着我们来回顾一下字体的结构,我们可以将字体按照结构分为单体字、上下结构、上中下结构、左右结构、左中右结构、半包围结构、全包围结构和镶嵌结构。

UjUZvqB.jpg!web

上面我们讲的都是小学课本里学过的字体知识,接下来我们就给大家传授一些新的知识。字身框是字体外侧的一个假想框,他代表了我们在电脑里打出一个文字所占的大小。

eIjMbyA.gif

他的概念来源于铅字印刷,指的是刻着文字的模型的外轮廓。

uaERVnF.jpg!web

在字身框的内部还会有一个字面框,字面框才是代表文字字形的实际大小,我们一般在做字之前都会先设定一个字面框作为设计的参考。

a6ZVfyQ.jpg!web

如果我们将两个字的字身框紧贴在一起,这两个字的字面框之间的距离就是字间距。

Qn6Nbea.jpg!web

接着我们来讲解重心,重心指的是字的视觉平衡点,在字体设计中,重心是非常重要的一个概念。那么我们应该怎么判断一个字的重心在哪里呢?

f6N7Vja.gif

按照物理学里的方法,我们将字找两个不同的点悬挂起来,沿着悬挂的绳子画直线。那么这两条直线的交叉点就是这个字的重心。但是我们做字体设计的时候不可能按照这样的方式去测量字体的重心,我们只要大致的目测一下,重心的位置是靠上还是靠下就可以了。

3qMfmuM.jpg!web

中宫是字体设计中另外一个很重要的概念。它来源于书法中的九宫格,是九宫格最中间的一格。

fEjU3yV.jpg!web

后来演变成了字体重心周围的一片区域,我们通常用中宫的大小来衡量汉字笔画的疏密程度。

Are6Nfm.jpg!web

对于像繁体「東」字这样中间有一个封闭空间的汉字,我们就可以通过这个空间的大小来判断汉字的中宫大小。

bqq22mj.jpg!web

那么如果是像「南」字这种没有封闭空间的字体来说,我们应该怎么样判断中宫的大小呢?这里我们介绍一个新的概念,叫做字白。字白指的是笔画之间和外围的白空间,也就是字身框内除去文字的部分。

3eqQZ3V.jpg!web

字白中,笔画之间形成的包围或者半包围的白空间,我们称之为字腔。

q6J77zN.jpg!web

而笔画之间其他的未封闭的空间就叫做字谷,通过字腔和字谷的大小,就可以判断出中宫的大小了。

YrAZRnN.jpg!web

中心线相信很好理解了,就是字面框垂直和水平方向上,中间的两条线。

yaMFrmv.jpg!web

对于左右结构和上下结构来说,我们还可以画出第二中心线来确定偏旁部首的位置。

nqYrQbB.jpg!web

文字的骨骼指的是字体笔画的中心线,他和人的骨骼类似,人的骨骼决定了人的高矮,而文字的骨骼则决定了文字的重心、中宫和高矮胖瘦等。

z2uUJvn.jpg!web

那么有骨骼肯定就得有皮肉,文字中的皮肉叫做体饰,指的是笔画中的装饰部分,决定了字体的外观。

在字体设计中有一句行话,叫做骨骼大于体饰,什么意思呢?就是一个字的骨骼搭得好,那么他体饰即使没那么好看,这个字看上去也像那么回事。可是如果这个字的骨骼本身就很难看,不稳,那么体饰无论再怎么变,这个字也很难变得好看。前面说到骨骼与文字的字面、中宫和重心有紧密的联系,下面我们就给大家介绍一下,骨骼是怎么样影响文字的气质的。

JzmABri.jpg!web

那我们先来看看字面,我们还是用这个東字来做示范。字面可以分为窄体、宽体和正常体。

EJjyeu7.jpg!web

不知道大家有没有看过指环王,字面宽的字体就像是电影里虽然很矮但是非常强壮的矮人战士,他给人力量感和稳重的印象。

3iERJzV.jpg!web

而字面窄的字体就像是高挑纤瘦的精灵王子,灵动、优雅是他的特征。

Uju6Vbj.jpg!web

接着我们来分析一下重心。这三个東字分别重心偏下,重心在中间和重心偏上。重心的高低可以类比人的腿长,重心越高,腿越长。

NjeQ7ny.jpg!web

所以重心偏高的字体就像是腿超长的超模,给人一种秀丽的印象。

n26Zn2u.jpg!web

而重心低的字体就像是短腿柯基,给人可爱、嬉皮的印象。

2aiQbaR.jpg!web

那么像我们这样普通腿长的人呢?重心靠中间甚至是稍微有一些偏低的字体是能够给人一种成熟稳重的印象。

Vna2UzA.jpg!web

影响骨架的还有中宫的大小。

Rvam6fU.jpg!web

一般我们书写的字中宫都比较小,所以中宫小的字会传达出传统或者文艺的气质,而且会更偏秀气一些。

7vEV3m6.jpg!web

那么中宫大的字是怎么产生的呢?是因为最开始的印刷技术和电子显示技术不够发达,为了让字体在较低的清晰度下也能被识别,所以当时的字体设计师就将字体的中宫设计得稍微大一些,提升字体的易辨性。所以中宫大的字体会给人一种现代感觉。另外中宫大的字体则相对比较大气。

euIR7bb.jpg!web

接着我们就来分析一些作品来验证一下刚刚我们的理论是否成立。化妆惑星的这四个字,字面偏窄,重心中间偏高,中宫偏小,所以这四个字的气质是比较俏丽的,符合资生堂化妆品的特点。

F7J3meA.jpg!web

不动的这两个字,字面很宽,重心很低,那么就有活泼、调皮的气质,而中宫是偏大的,所以整体气质是现代、活泼的。

VJfAVjU.jpg!web

这三个字的字面是宽的、重心中间偏低,传达出稳重的气质,而中宫偏大,所以舟山港的这三个字是既现代又稳重的。

b2EBZ3r.jpg!web

再看看这个logo,这四个字的字面是一个正方形,而重心稍微偏低,所以传达出来的印象也是稳重的,然后搭配上偏小的中宫,让这四个字有一些摄影的文艺属性。

FneI3eU.jpg!web

这个美术馆logo骨骼上的特点是窄字面、大中宫和中间的重心,所以这个美术馆的气质是现代、秀丽的。

6ZnE3yA.jpg!web

我们再来看看这个美术馆,这个logo的字体与上一个logo的字体骨骼上的区别是重心变低了,所以他比上一个logo多了一些活泼的气质。

Q3INJj3.jpg!web

制面所的logo用了宽字面、中间重心的字体,体现了稳重的气质,也可以体现了产品的品质保证,而中宫偏小,则表达了制面的传统手法。

EJr6nmR.jpg!web

这个建筑事务所则用大中宫、中间重心的方式来体现出现代、专业的气质。

ZVfQn2u.jpg!web

不知道大家有没有吃过翠华餐厅?他是一家老字号的港式茶餐厅,所以他用了小的中宫去体现他的老字号,另外窄的字面也让logo显得更秀丽。

uUzyyie.jpg!web

这个logo同样是窄字面、小中宫,但是重心却高了不少,所以这个logo的气质会更偏文艺一些。

当然,我们这些案例分析仅仅是从字体的骨骼上去分析,但是影响字体气质的不只有骨骼,体饰的多少、体饰的线条是几何线条还是手写线条、体饰的尖锐程度等等,都会影响字体的气质,所以我们分析字体的时候应该更加综合的去分析。接下来我们要给大家介绍字体中的视错觉,相信作为设计师的大家对视错觉都不会陌生吧?而字体设计中,视错觉对字体的影响是非常大的,我们一起来看看吧。

bEzYNjR.gif

你们能看出这两个矩形谁粗谁细吗?看着是不是水平的这个矩形更粗一些呢?其实这两个矩形是一模一样的,因为由于视错觉的关系,所以横线看着会比竖线粗一些。

rErqmiY.jpg!web

我们再加入斜线和曲线进行对比,同样粗细的线条,在视觉上,横线最粗,接着是斜线,然后是竖线,曲线在视觉上是最细的。知道了这些视错觉之后,我们就可以来讲解笔画的粗细应该怎么进行视觉调整。

vQRrymR.jpg!web

第一点要注意的是横线要细,竖线要粗。

yeqM7ri.gif

这是三条粗细一样的线条,我们用他来做一个工字,会发现中间的这一条竖线看起来偏细了,所以我们要将他进行加粗处理。

jiu2eaj.jpg!web

竖线加粗之后的工字就显得粗细更匀称了。

iqaaMbQ.jpg!web

第二点要注意的是字体中的主笔画要加粗,副笔画要细一些。

BJvau2Y.jpg!web

例如这个申字,中间的长竖线就是他的主笔画,其他的笔画是副笔画。现在中间的主笔和旁边的笔画是一样粗细的,这样看起来其实也没有什么太大的问题,不过我们尝试加粗一下中间的主笔画看看会有什么区别。

BJvau2Y.jpg!web

主笔画加粗了之后,就能感觉到这个字更稳了,因为主心骨粗了一些。而且也使这个字的内部产生了主次关系,视觉上更突出了。

bm6vYbU.jpg!web

对于笔画少的字来说,主副笔的差别可能不太明显,甚至我们不调节主副笔的粗细也影响不大,可是对于笔画多而且笔画比较粗的字来说,主粗副细这个原则就很重要了,例如这个狮字,现在他的笔画就是全部一样粗细,导致了许多笔画粘在一起了。如果我们将主笔调粗一些,副笔调细一些去避让主笔画,那么这个字看起来就和谐多了。那么问题来了,主笔到底应该是个怎么样的存在呢?

RnU73mf.jpg!web

文字里的主笔就相当于建筑里的承重柱,他支撑着整个文字的骨架,那么我们应该怎么去寻找这些承重柱呢?下面给大家介绍两个比较常见的主笔判断方式。

jEjymyN.jpg!web

一般来说,横画和竖画为主笔,而像点、撇、捺、提等笔画均为副笔。

yyMvEfV.jpg!web

例如木字,他的竖画和横画就是这个字的主笔,起到支撑的作用,而撇和捺则是副笔。

MZjuqqb.jpg!web

另外既然主笔作为承重柱,那么他肯定得有足够的长度去贯穿整个文字,所以笔画长的比较可能是主笔,而笔画短的一般就是副笔了。

IfERv23.jpg!web

例如师字,他存在着很多的竖线,这些竖线里,长的是主笔,而短一些的则是副笔。

当然这两个判断方式不足以判断所有的汉字,所以我们对主笔的判断可以稍微灵活点,具体情况具体分析。另外,当我们做一些变化性比较大的字体的时候,我们尽量将变化放在副笔上,而主笔保持不动。这样可以保证文字的骨骼变化不会太大,导致文字不稳。

6F3AVrF.jpg!web

第三点要注意的是对于全包围或者半包围的文字,应该外围笔画加粗,内部笔画减细。

2UzYFji.gif

例如这个国字,如果我们内部和外部的笔画是一样粗的话,内部会显得比较拥挤。稍微减细一下内部笔画,中间的部分就会通透一些,没那么挤了。

E3mu6rj.jpg!web

第四点是笔画多的字减细,笔画少的加粗。

2yyMvei.gif

我们来看看这四组线条,他们的粗细都是相同的。随着笔画的增多,图形就变得越黑,越挤。我们可以看到第四个图形基本上已经变成一块黑色的色块了。如果我们调整一下这些笔画的粗细,这四个图形在灰度上就会看起来比较均衡。

F7fyIzA.gif

我们用实际的文字做例子。十和鹰这两个字的笔画就相差得十分悬殊,十字只有简单的两笔,而鹰字却有十八笔。如果这两个字用相同粗细的笔画的话,我们可以看到鹰字的笔画都糊在一块了。所以我们需要对十字稍微加粗,鹰字的笔画减细一些。这样虽然两个字的笔画粗细不同,但是他们看起来是比较和谐的,灰度上不会差距过大。

qUVBvyQ.jpg!web

粗细调整的最后一点是笔画交叉的地方减细。

3IneYfy.jpg!web

当两个比较粗的笔画交叉的时候,他们重叠的地方会出现一块比较黑的区域。

VzMjQjn.jpg!web

特别是当这两个笔画相差的角度不大的时候,这块很黑的区域会显得更大,所以我们需要对这个交叉的位置进行稍微的减细,减少这块黑色的面积。

e6BbEjM.jpg!web

例如这个希字。这个希字特别黑的地方有两个,分别是头顶上撇和捺的交接处,还有布字上方横与撇的交接处。

i2yEziE.jpg!web

我们将这两个交接的地方稍微减细一点之后,是不是这个字看起来就舒服多了,显得没有这么憨。

JnquauA.jpg!web

看到这里你们会不会有疑问,交叉的位置我具体应该减细哪个笔画呢?其实减细的地方是由文字中的其他笔画决定。例如希字中的这一撇,为了避让下方的撇,所以我们选择在这个笔画做减细处理。

auqUBvj.jpg!web

下方的这一撇也一样,为了减少这一撇与巾字的重叠面积,所以将这一撇减细。

buiaUbz.jpg!web

除了笔画的粗细需要视觉修正之外,文字的重心也是需要调整的。

AbuUFnV.gif

字身框垂直中线与水平中线的交点是文字的绝对中心,但是人对中心的判断是有视错觉的误差的。人眼看到的视觉中心会比绝对中心高一些,并且稍微偏左一些。

mAbe6rZ.jpg!web

我们还是用这个申字作为例子,现在这个申字的重心就是绝对中心上,可是这么看起来这个申字的重心是有一点偏下的,如果我们是想做一个重心在正中间的字体的话就得将中间这个田字往上和往右移动一点点,现在我们看这个申字的重心就在视觉的中间了。

muayEbn.jpg!web

如果我们设计一系列的多个字体的话,我们需要让这些字体的重心尽量保持一致,现在我们看这一组字重心就是不一致的,看起来就特别的别扭,重心频繁的上下跳动会使得阅读起来非常吃力。

JjQviuF.jpg!web

我们把重心调成大致一致之后,这组字体阅读起来就舒服多了。

yMRJrqB.jpg!web

不过我们需要知道,有些文字的重心是难以调整的,例如笔画粗细均匀的刀和口字的重心总是在中间,而丁字的重心总会靠上。

RjYNzea.jpg!web

又例如上和下这两个字的重心就比较难调成一致,我们也没必要为了强行让两个字重心一致而做太多的变形。

Z3mYN3V.jpg!web

还有字面也是需要进行视错觉修正的。

2iIvaaM.jpg!web

这两个矩形你们看的出来哪个才是真正的正方形吗?是不是觉得左边的有一点点偏窄,而右边是正方形呢?

nQjEvi6.jpg!web

可是实际上左边才是真正的正方形,而右边是一个100:103的长方形。我们的视错觉会让正方形显得有些偏窄,所以当我们想要做一个绝对正方形的文字时,需要将字面稍微拉宽一些。

IzyUZzN.jpg!web

例如这两个国字就是分别用绝对正方形和视觉正方形做出来的。

m26vUnR.gif

除了正方形之外,我们加入一些别的几何图形,试一下在字面框里应该怎么编排这些图形。如果将这些几何图形撑满整个字面框的话。去掉字面框之后我们会发现这些图形的大小相差很多,而且在视觉上,他们上下两侧并不是对齐的。

meAFRff.gif

所以针对不同的几何图形,需要稍微进行一些调整,例如正方形和圆形往中间缩小一些,三角形往上方缩小一些。这样去掉字面框之后,他们看起来就和谐多了。

viamUjz.jpg!web

为什么我们要用这四种几何图形做这样的试验呢?因为这四种几何图形对应着部分汉字的外轮廓,例如田字对应正方形,今字是典型的菱形,卷字是圆形,而上字则可以类比成三角形。

BNvmQ3q.gif

如果我们对这四个汉字不进行视觉上的调整,他们看起来也会显得非常不整齐和不协调。

MJRfQvR.gif

所以我们也应该根据汉字的外形进行字面的调整,让他们在视觉上看起来大小一致,上下方也能够对齐。

关于字体设计的基础知识就讲到这里,我们一起来回顾一下这节课都讲了些什么,首先我们给大家讲解了字体设计的三大原则——易辨性、可读性和艺术性,接着讲了字体设计中的一些基础术语与知识,然后分析了骨骼中的字面、中宫和重心对字体气质的影响,最后解析了字体设计中的视错觉以及视错觉修正。听完这节课下来是不是觉得做一套看起来平平无奇的字库字体,其实也有非常多值得考究的地方,瞬间就觉得其实字库的收费也没有那么过分呢?那么这节课就到这里啦,你们还想听什么关于字体设计的知识,欢迎留言,我是千树,我们下期再见,byebye。

欢迎关注研习设的微信公众号:「Yanxishe2017」

u2EJryb.jpg!web


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK