分享|如何让你做的字体看起来更和谐

来源:中国设计在线    时间:2020-09-15    站内收藏


不知道大家有没有遇到过这样一种情况,我们在做字的时候,发现做好的两个字死活搭不到一块,明明字分开看都没有问题,可是放在一起就感觉不太对。如果我们做的字出现了这种不搭的情况,肯定是因为字与字之间存在着不同。今天的这节课,我们给大家讲解一下,如何让你做的字体看起来更和谐。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

想要解决这种不搭的问题,我们可以从两方面下手。第一个就是减少字与字之间的不同之处,第二个则是增加文字之间的相同之处,去掩盖字的不同。我们先从治标又治本的减少不同开始讲。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

我们先来看下这四个字,可能乍一看会觉得没啥问题,可是我们仔细盯着会发现其实这四个字根本不搭。欢字比乐字大了许多,今字的重心又要比宵字低许多。为什么会出现这种情况呢?我们把这四个字分开看,他们也并没有什么太大的问题。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

其实这四个字是我分别用了四个字库字体修改的,刨除了他们的体饰之后,我们会发现他们的骨骼区别是很大的,也正是因为他们骨骼上的不同,导致了这四个字看起来不搭。所以我们要减少不同,首先就从骨骼开始讲。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

其实这方面的知识我在「字体设计第一课」的那节课已经讲过一部分了,如果没看过那节课的同学建议你先停下来,去补一补那节课的知识哦。

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

Hello,大家好,我们在做设计的时候总离不开字体,可是多如牛毛的字库字体里,免费的只有那么几个,难以满足我们的工作需求。

阅读文章 >>



而看过的同学就跟着我一起往下听。我们依旧分别从中宫、重心、字面和灰度四方面来讲解,先来看看中宫。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

从视觉上来说,中宫大的字会更多的占据字面框,看上去也会显得比较大一些,而中宫小的则显小,这也是为什么中宫不同的字放在一起会显得不搭。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

来看个实际的例子,现在画面中重塑的这两个字是不是感觉不太搭?这里我们可以通过字面框内字体外侧的负空间去判断中宫的大小,我们在底下叠一个字面框,就可以发现重字的四周还是有一些负空间,而塑字则几乎占满了字面框,所以他们的中宫的差距是比较大的,导致了视觉上的大小不一致。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

我们分别调整一下这两个字,调整中宫之后的他们就舒适多了。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

接着来讲一下重心,重心不一致除了会让文字看起来不搭之外,重心的频繁上下跳动也会让阅读更加的疲劳。屏幕上马赛克这三个字重心就非常的不一致,马字重心在中间,赛字重心偏低,而克字偏高。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

经过调整之后,这三个字也就更和谐了。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

然后是字面,我们在字体设计第一课中用过这四种图形去类比成四种外轮廓不一致的文字。如果将他们上下端物理对齐的话,他们在视觉上其实是不平衡的。所以得对他们进行一些视觉上的修正,适当地调节他们的字面。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

除此之外,这里再补充一个新的知识点,就是笔画多的字需要放大一些,笔画少的字需要缩小一些。例如画面中椅子这两个字,子字看着要比椅字大了许多,可是他们的字面大小是完全相同的。将子字缩小一些之后才显得大小比较一致。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

举一个更加直观的例子,画面中繁体字的国字看上去要比囚字小一些,可是其实这两个字的外轮廓无论是大小还是形状都是完全一致的。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

最后回顾一下灰度,灰度主要指的是对于笔画少的字,笔画应该相对应的粗一点,笔画多的字,笔画则应该细一些。现在画面中的士字就是与另外两个字差不多粗细的,可是在视觉上士字明显是要偏细的,看上去显得特别弱。所以要将士字加粗一些,让字体之间的灰度差距别太大。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

除此之外,日本字体设计师成泽正信提出过一个理论,他说对于首尾两字都是笔画特别少的词组,那么首尾的这两个字需要在已经视觉加粗过后的基础上,再加粗一些,不然词组会显得有些无力。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

关于骨骼的内容我们就讲到这里,也许你们会觉得这么多需要微调的地方很难记。那么这里我再给大家介绍一条总结前面内容的定律。古希腊的智者普罗泰戈拉说过一句话叫「人是万物的尺度。」这句话或许是错误的哲学观点,可是在设计中却是一句真理。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

用通俗点的话就是眼睛才是最准确的衡量标准。因为我们很难总结出笔画少的字要比笔画多的字小多少,笔画得粗多少。视觉上的调整是难以量化的。所以最简单的方式就是用眼睛去判断,看着细了就加粗,看着小了就放大。

不过我们也需要尊重每一个汉字的不同,没有必要把不同的文字强行调成一模一样,所有字都一模一样,那么字也就不再是字了。汉字不同于西文,可以均匀地分布。汉字天生就是有笔画多少的区分,有重心的高低,有外轮廓的不同,所以汉字在阅读的时候也能产生西文不具备的节奏感,这或许也是汉字的魅力所在。所以我们在做字的时候,追求的是文字之间的和谐,而非绝对一致。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

前面我们讲的主要是骨骼上视觉的不搭,接下来我们来分析一下骨骼上气质的不搭。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

文字的气质最常见的是传统气质和现代气质。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

对于传统和现代这两种气质来讲,影响最大的是中宫。刚刚我们展示的这两个東字除了视觉上大小不一之外,他们气质也是相悖的。可是为什么中宫大的会具有现代感,而中宫小的会具有传统感呢?

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

那是因为在西文的字体设计中,他们更注重文字内部的负空间均匀分布,外部的负空间则可以通过字间距进行调节。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

而中文中由于有字面框的存在,在设计字体时需要考虑内白和外白的均衡。所以受到西方设计影响的现代型汉字也会更注重内白的分布,而忽略外白,从而导致了中宫偏大。传统型的字体关注了文字的外白,所以中宫就会偏小一些了。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

另一方面,由于最初的印刷技术和电子显示技术不佳,而中宫比较大的字体具有更良好的识别度,所以电脑、书籍、报刊等普遍用的都是中宫比较大的字体。而电脑、书报等正是当时具备现代感的代表物品,所以中宫大的字体也获得了现代感的这种印象。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

除了中宫之外,还有笔画的分布。传统型字体保留书法中的左收右放、上紧下松的特点,而现代字体则讲究的是视觉上的均衡分布。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

来看看这两个林字,左边的是传统的,我们可以很明显地看到左边的木字要小于右边的。而右边现代一些的林字,为了让视觉上比较平衡,左边的木字微微地比右边的小一点点;另外右边的林字重心是在视觉中心上的,而左边的则要更偏上一些。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

骨骼分析完了,接下来我们来分析一下笔画。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

首先要统一好笔画的线条,我们来看这两个撇笔画,他们的曲线就是两种不同的风格。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

来看左边的这个,这个笔画其实是我从颜真卿写的木字中提取出来的,所以他的线条是具备有手写感的。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

然后要注意笔画的起笔收笔是否统一,例如画面中的这三个字,分别是圆头的、平头的,以及对笔画末端进行切笔的。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

笔画的体饰相信大家都知道需要统一,体饰不同的文字看上去就完全是两个字体了。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

然后是笔画的粗细比例。例如画面中的这两个字虽然中宫、重心、字面和灰度都是一样的,可是横竖笔画的粗细比例不同,所以他们也明显搭不到一块去。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

最后是笔画转折处需要统一,拐角处是用尖角还是圆角,又或者是规定某一个方向的拐角做特殊处理。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

笔画上的细节可远不止我提出来的这五点,比如还有装饰角出现的位置、拐角的大小、曲线等等。虽然这些都是非常非常小的细节,可是小细节累积起来就成了大问题了,只有将这些隐藏在笔画里的小细节都统一了,我们做的字看起来才能够比较和谐美观。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

当我们尽可能地将文字中的不同之处消灭之后,那么我们就可以进入下一步,增加文字之间的共性了。那么增加共性到底是个怎么样的东西呢?

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

日本著名字体设计师高桥善丸总结过一个理论——做字之前需要找到文字之间的视觉关联性,然后强调其中的特征。这里说的视觉关联性也就是我们所说的共性,强调共性不但可以让文字之间看起来更和谐,同时也能让字体产生表现力。接着来看一下我们可以从哪些方面去寻找共性。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

这里我总结了寻找共性的三个方面,分别是笔画、偏旁或结构和骨骼。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

先来看看笔画,笔画里我又细分出了四个点。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

首先是统一笔画的弯曲程度,一般最常见的是将曲线笔画改成直线笔画。因为在中文中存在着横、竖等直线笔画和撇、捺等曲线笔画,而不同字的直线笔画和曲线笔画的数量不同,如果我们将所有的笔画都转变为直线的话,那么文字的共性也能得到增加。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

来看一些实际的例子,崩坏这两个字,崩字的曲线笔画是比较少的,而坏的繁体字则存在着比较多的曲线。而这位作者将笔画尽可能直线化之后,这两个字也产生了强烈的共性。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

这个是高桥善丸的字体作品,野放途这三个字也是全部用直线构成的,所以他们看起来是非常和谐的,另外高桥善丸为了体现野放途的那种自由奔放的感觉,还随意地将部分笔画进行了延长。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

当然我们也可以将笔画尽量的曲线化,但是这样的难度是要比直线化大许多。这依然是高桥善丸的作品,水都这两个字都尽量地曲线化去展现水的特质,高桥善丸还将这两个字处理成圆形去增加他们之间的共性。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

这个字体作品就曲线化的更彻底了,包含横、竖在内的所有的笔画都是由曲线构成的。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

刚刚讲到将曲线变为直线,其实我们还可以进一步将笔画的倾斜角度给统一了,这样文字的统一程度就更高了。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

来看看这个字体作品。这四个字的笔画只用了四个倾斜角度。分别是垂直的竖画、倾斜14°的横画、倾斜63°和-63°的撇、捺、点等倾斜笔画。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

第三点是设计特征笔画,也就是我们可以选择词组中大多数字都共同拥有的笔画,然后对他进行比较有个性的设计。最常见的就是将点笔画设计成圆。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

河童这两个字就是将笔画中的点都处理成了小圆圈。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

有时候我们也能根据词义将小圆圈变成别的点形状,例如井上悠的这个作品,为了突出雨的概念,将笔画点都替换成了蓝色的小水滴。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

除了点之外,别的笔画也可以用这样的手法。例如这组字,撇和捺笔画的设计都是比较醒目和夸张的。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

最后一点是在字体中加入书写笔画,这个手法适用范围是比较广的。例如画面中这个a piece of 工作室的作品,他在书法的宋体字中加入了日文的平假名,而日文的平假名来源于草书,我们也可以看做是加入书法笔画。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

说了这么多,是时候来个案例的演示了。我们来做离骚这两个字。因为离骚是历史上的文学著作,具有强烈的文化属性,所以希望把他做成宋体字。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

宋体字应该从横画开始做起,这个便是设计好的横画,从他体饰的曲线可以看出来,这是一款传统型的宋体字。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

接着我们可以从横画推导出其他的笔画,具体怎么推导我们在《设计宋体字很难,这次我来教会你》的那节课中有详细的讲解,不懂的同学可以去翻看一下。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

接着我们来选择一个参考字形,因为我们的定位是传统型的宋体,中宫必须也得相应小一些,所以我选择了筑紫明朝的老字形。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

我们在参考字体的骨骼上把设计好的笔画填上去,由于筑紫A老明朝是偏手写风格的宋体,所以不同字的字面并不一定完全一致,离骚这两个字就明显的大小不同,而我们这节课追求的是文字之间的和谐,所以我们还是尽可能地让这两个字差不多大小。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

所以我们将离字给改大一些。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

然后我们就要在这个字里寻找替代成书法笔画的地方。我们替换书法笔画可不是随便找一个笔画就替换的,一方面,他必须要在字里占据比较明显的位置,如果在边边角角不显眼的位置进行替换的话,那几乎就等于没有替换;另一方面是这个笔画要符合书写的走势,要能够展示书写笔画的美感。所以我们这里选择了将这两处替换成书法笔画。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

我们将设计好的书写笔画替换上去,那么这个字就做好啦。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

接着是偏旁或者结构的部分,这个部分我分成了笔画、偏旁和结构。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

也许你们会觉得奇怪,为什么刚刚有专门讲笔画的部分,而在偏旁结构这个部分也有笔画呢?我们用反叛这两个字来做例子解释一下。这两个字一共有五个撇笔画。而在字的最左端各有一个撇笔画,我们可以针对这两撇做特殊处理。所以我们这里强调的笔画是有位置上的关系的,而不是指相同的笔画。我们开始处理这两个字。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

同样选择一个参考字形,刚刚我们做的是具有传统气质的宋体,那么我们这个字就做具有现代感的大中宫字体,所以我选择了用中宫比较大的微软雅黑作为参考。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

因为反叛这个词带有不走寻常路的意味,而一般的字体设计都是横细竖粗的,所以我们对反叛这个词设置成横粗竖细,具体粗细比例暂定为1:2.5。然后将文字搭建起来。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

由于两个字的笔画数量不同,使用一样的粗细比例的话会导致灰度上的不均匀。所以这里我们可以适当地调整一下笔画的粗细,让两个字的灰度别相差太远。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

接着我们要强调一下这两个笔画。我们可以将他们加粗,并且往外延伸一些。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

可是往外延伸之后,这个反字会显得有些不稳,感觉左下角重了。为了让反字平衡一些,所以我们可以将上面的一横往外伸出一些。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

现在的这两个字显得有一些些瘦高,气质有点不太对,所以我们可以稍微往下压一些。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

最后调整一些细节,我们这个字就做好了。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

我们再来看一个例子,破坏这两个字最明显的笔画分别是撇和捺,他们在这两个字中是属于对称的位置关系,所以我们选择强调的笔画并不一定是要在相同的位置,也可以是对称的位置。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

接着是强调偏旁。强调偏旁很好理解,就是如果我们设计的字里有相同的偏旁的话,那么我们就可以将设计的重心放在偏旁上,这样可以保证词组之间的相似性。这里我们用海浪这次词作为例子,参考字形用的是opposans的常规字重。然后在参考骨骼的基础上把笔画搭建好。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

首先看海字的这个地方,笔画分布得不够均匀,显得结构有些不稳,所以我们要把海字的笔画调整一下。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

接着来看浪字,浪字头上的这个点非常奇怪,像独角兽的角似的。我们将点与底下的笔画分开会显得比较舒服一些。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

然后我们就要思考一下三点水应该怎么设计。在找三点水的经典碑帖时,我看到了柳公权对三点水是这么处理的,我觉得可以借鉴到我的这个字中。

那么我就可以将下方的点拉长,做一个转折的处理,这样三点水就成了这两个字里比较突出的设计了。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

接着我们可以将这里进行出头处理。让这两个字多一些细节。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

最后调整一些细节,那么这两个字就做好了。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

同样再来看个例子,柠檬这两个字都是木字旁的,所以作者便对这个木字旁做了往外延长的处理,另外值得注意的是,由于他做的木字旁比较夸张,所以对文字右边的部分也进行了相应的处理,不然左右两边就会被割裂开了。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

最后是结构,结构指的是强化文字中具有相同结构的部分。例如味道这两字,他们都有口字的结构,所以我们可以尝试在这上面下些功夫。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

味道这两个字我第一反应是联想到热腾腾的美食,是温暖有温度的,所以我在笔画的设计上模仿了宋体横画的体饰,让这个字体有一些人文的感觉。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

参考字形选择了中宫偏小的筑紫明朝,筑紫明朝相比我们前面用的筑紫A老明朝气质上会稍微没那么传统。根据筑紫明朝的骨骼将笔画放上去。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

这时候会发现这一块的负空间有一点大,而我们希望这个字笔画的分布能够更匀称一些。所以将这一点往下挪一些。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

然后这个位置笔画似连非连是字体设计中不应该出现的,将这一点往上收一收。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

味字的这一笔也可以往上提一些,让他更符合这一撇的走势。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

最后调整一些细节。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

然后我们要开始想办法修饰一下这个口字结构,我们在书写的时候经常会有这样的连笔,例如这是王羲之写的口字。所以我们也可以将这个书写结构用在我们的字里,让我们这个字有些书写味道。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

我们的这两个字就做好了。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

睡眠欲的这三个字同样是对口字结构做了特殊设计,所有的口字结构都处理成开口或者是封闭的圆形。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

而今生的这两个字所选取的部分就更加刁钻了,我们可以看到这两个字的上方都有一条绕了一个小圈的曲线。而今生原本的写法并不会产生这样的曲线,所以这位设计师的处理手法也是颇为巧妙。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

不过在我们做字功底还不够深厚的时候,最好不要将一些不一样的笔画结构强行处理成一样,这样很可能会破坏掉原本的骨骼,损失了汉字原本的美感不说,还很可能让文字丢失了识别性,那样的字体设计可就得不偿失了。毕竟我们要寻找的是文字之间的共性,而不是将文字的不同强行扭转成共性。那么我们接着来往下看。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

最后一个方面就是骨骼的共性了,骨骼我细分成了四点——横画对齐、中宫、重心、字面。其中,除了横画对齐之外,中宫、重心、字面这三个处理方法几乎可以应用于所有的汉字中。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

我们先来看看横画对齐。我们在看日本的字体设计时,经常能看到東京这两个字被做成这样的处理。因为東京两个字在结构上是有高度的相似性,所以可以将文字的横画对齐,这样文字就能有比较高的统一性了。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

千差万别这几个字虽然被设计得十分的夸张,但是通过将所有的横画进行对齐,让字与字之间产生了共性,所以这样一组个性强烈的字放在一起却不会违和。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

再来看看住宅作家这四个字,通过画横线我们可以看到,大多数的横线都对齐了,可是住字中间的一条横线却没有对齐。所以其实我们在用这种手法的时候,也不是一定要所有的横画都对齐才行,只要尽可能将能对齐的都对齐,那也能够产生共性。如果强行对齐会破坏文字的美感或者识别度,那我们就放弃那个难以对齐的横画就好了。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

第二点中宫,就是我们可以给需要设计的字体设置一个比较夸张的中宫,让读者一看就被夸张的中宫所吸引。我们用一直往南做个小示范。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

我们将一直往南这四个字的中宫尽量地撑大,他们之间就能产生共性,如果我们在底下垫个字面框的话,就可以发现除了一之外的三个字都几乎将字面框占满了。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

这个是高桥善丸挺著名的一个作品, 他就将白南风和青雨这五个字的中宫扩得非常大,而中间的笔画都缩得很小,从而形成了图形感。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

重心与中宫相同,就是给文字设置一个比较夸张的重心。这组字就是将重心都提得非常的高,让文字在体现张力的同时,又能保持和谐统一。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

最后就是设置字面,也就是我们常见的宽体、窄体等。我们用验伤这两个字来示范一下,由于验伤是一首抒情歌曲,具有一定的文艺属性,比较适合秀丽一些的气质,笔画也应该比较细一些,所以这里选用opposans Light字重作为参考字形。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

另外窄体相比宽体更具有秀丽、文艺的气质,所以这里我直接将字体压扁作为参考。然后将笔画填上参考字形中。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

这时候我们可以发现这两个字视觉上的大小不一致,底部与顶部并不对齐,需要进行一定的视觉修正。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

还有验字比伤字看着要宽一些。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

将验字缩窄了一些,这样这两个字在视觉上就是平衡的了。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

我们在之前的课程里介绍过,重心偏高的字体会更秀丽一些,所以我们也可以尝试将重心往上提一提。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

可是重心提高之后,这里的点笔画显得有些太长了,不太美观。所以我们可以将点上下交错着排列,这样可以让点稍微短一些。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

接着来处理这个地方,这里负空间大了一些。我们可以将提笔画倾斜一些,多占据一些负空间。

字体<a href=http://www.ccdol.com/ target=_blank class=infotextkey>设计</a>在变化之前,你得先做这一步

最后调整一些笔画细节,我们这组字就做好了。

总结

这节课的内容到这里就讲完了,我们来回顾一下今天的内容。这节课我们讲的是如何设计出和谐统一的文字,为此我们将这节课分成了两部分,一部分是减少文字之间的不同,另一部分是增加文字之间的共性。减少不同部分。我们可以从骨骼、气质和笔画风格三个方面去寻找文字之间不和谐的地方,并把他们修正。而增加文字共性则可以从笔画、偏旁部首或者骨骼三个方面去强调他们的视觉关联性,从而使文字在和谐统一的基础上产生视觉张力。希望这节课的内容能对你们有所帮助,我是千树,我们下期再见。

参考资料:

《字誌 01》、《字誌 02》、《字体设计 100+1》 靳埭强 著、《感觉舒服的文字》 高桥善丸 著

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



本文来源:中国设计在线

上一篇:返回列表
关键词: 字体 字体设计 
编辑:cdo
相关阅读
    正在加载...