收藏起来!一篇绝对能改变你对字体认知的干货(附实战案例)

2017/05/15 17549

今天这篇文章对一部分人来说可能比较基础,介绍的内容也非常多,篇幅也非常长。因为我怕大家对字体不是很感兴趣,所以我就把各种知识点做了整理,然后以这样的方式来输出,好让大家先对字体有个简单的了解。

这绝对是改变你对字体认知的一篇文章,所以收藏绝对没坏处。如果,你看完这篇文章突然就对字体感兴趣了,请你也告诉我,我知道之后会对字体的某个知识点做深入解析,带大家更好的学习字体。

没看这篇文章之前,也许你觉得自己对字体已经很了解了,但是请相信我,这仅仅是你以为的而已。(为什么我读这句话的时候,感觉自己很牛逼,啥都懂似的…)

在平面设计中,字体的重要性毋庸置疑了,从海报到杂志,基本都要以字体做根基。然而,真正懂字体的人其实不多。

在最近两年里,字体慢慢又被大家重视起来,因为在 UI 设计中,字体的运用也慢慢多了起来,虽然大家看到的 App 更多的是系统自带的字体,但是『为什么iOS 会更换新字体』、『这类产品为什么要这样对字体进行排版』等等都是 UI 设计师应该需要懂的。

那么这期我们就先从以下五个方面来讲讲字体:

  1. 怎么开始入门字体
  2. 文字的构成
  3. 你所理解的字体分类也许是错的
  4. 中英文字间距的讲究
  5. 案例展示

怎么开始入门字体

看过我文章的人都知道,我是上个月开始学习文字(字体设计),我大概买了 14 本书(本来是 12 ,后面又买了 2 本关于文字进化史的书籍)进行阅读及学习。

我比较喜欢以「块状时间」学习知识,然后建立自己的知识体系,再从理论到实践(理论是阅读书籍,实践是字体设计练习)。不过我为了写这篇文章,也看了目前市面上已有的一些字体相关文章,而且被各平台转发,且阅读量很高,但其实很多知识点在认知上是有错误的,也许已经误导了不少人。所以我一直推荐通过书籍来学习知识,文章只是了解概况,是别人总结的结果,所有学习动作都要带有质疑的心态进行判断。(废话有点多了)

首先,你要简单了解字体的历史,从「哥特体」到「黑体」,最早的「罗马体」到「宋体」,以及日文的「明朝体」。了解它们之间的关系,好比对待朋友一样。

对理论知识有了一定了解之后,你就会知道:「宋体」是入门字体设计首要掌握的,你需要了解它的结构、体饰,然后去 AI 里进行临摹,把字当成一张图来对待。

这样进行大概一周时间(我是一周,每天临摹 5 个宋体字,要非常仔细),开始继续去理解字体的其他知识(在这期间,临摹字体是不能中断的)。如字体排版、字重、字间距和行间距等等,然后再继续练习,理论结合实践,进步就会非常快。

文字的构成

学习文字的相关知识,必须先从文字的构成开始。构成文字的元素会因为文字的起源不同而相差很大,这里尤其要把中文和英文拆开来说,因为本身它们就是不同的体系,只是现在很多并不专业的人,把它们混为一谈了。

英文的字体结构是由四条平行线组成。这四条(其实是五条,但是大写字母线这里要忽略)平行线中,由下往上数的第二条是用来当做标准的『基线』,西文中,单个字母的所有立脚点都是在这条线上(除了 g、j、p、y)。而根据不同的字体,平行线的位置也会发生改变,这也是为什么文字结构会多种多样的原因。

这里就要说到大家经常听到但是并不非常理解的一句话了:小写字母的高度要以 「x 高」为重要标准。(给你们重点说说)

因为平行线是可以根据你想要设计的字体结构做出改变的,所以 「x 高」就代表了中间两根线的位置。当「x 高」大的时候,就会感觉小写字母比较大,因为「x 高」决定了几乎所有小写字母的高度(除了 b、h、y 等有头有脚的字母)。所以在设计英文字体时,要非常注意每个小写字母的高度,这也是为什么大部分优秀的字体设计师,设计其他作品时,会更注重细节的原因,因为他们设计字体就纯讲究细节。(不是说其他设计职业不注重细节,只是没字体这么讲究)

举个例子:字母 「C」和「O」

C 和 O 这种字母中间的空间被称为「字腔」,「字腔」较宽就会给人轻松、自由的感觉;「字腔」窄,就会显得很密集、具有力量的感觉。

之前看到有人说英文字母,放的越大,间距就必须越小,否则识别性就很低,这绝对是错误的观点。

下面再看中文字体的套路。

做 UI 的都设计过 Icon 吧?设计中文字体就跟设计 Icon 是一个道理。同样有一个虚拟框,在框里的字体大小,被称为「字面尺寸」,它也是根据不同的字体结构而改变的。

中文的字体结构被称之为「骨架」,它决定了这个字体的整体形象。图片中标明的一处被称之为「胸线」的位置,它也很重要,「胸线」小的字体更具复古风,更能表达传统的韵味;相反,「胸线」大的字体会更具现代感。这也是为什么有些中国风的作品中,字体看起来会特别不一样的原因,我们会选择字体「胸线」小的文字,去表达传统风。

你所理解的字体分类也许是错的

我们经常会听到别人说:衬线体、无衬线体。没错,英文字体确实有分衬线体(如 Atheias)和无衬线体(如 Helvetica),以及其他字体(如 哥特体)。

有人问:宋体和黑体呢?

前几天我还正好在一个群里看到有人给另一个人解答什么是衬线体,什么是无衬线体,他说:像宋体,勾勒明显的就是衬线体;黑体,笔画比较平的就是无衬线体。这是一个认知上的错误。

中西方的字体是不能一概而论的,宋体跟衬线体相似,不代表宋体等于衬线体,这个认知要纠正一下。(看完这段是不是要爆炸?原来一直都理解错了?)

先说英文:历史上最早的衬线体叫「罗马体」,在纸质印刷中,衬线体经常被使用在正文以及标题,它被分为两类:旧体、现代体。

旧体的特点是类似手写体,比较没有规则,给人传统的感觉;现代体比例较工整。衬线现代体适用于标题,衬线旧体适用于文章内容。

如果要继续细分,衬线体还可以被分为三种类型:支架型衬线体、发丝型衬线体、板状衬线体;而我们今天看到的大部分衬线体都是板状衬线体,同时也是旧体的一种。

无衬线体稍简单一点,主要分为:古典体、现代体、温暖体(这个温暖体我一直没找到合适的字眼来表示)。与衬线体不同的是,我们现在看到更多的是现代无衬线体。

具体怎么分类我就不展开说了,展开说的话篇幅会更长,没兴趣的人可能就不往下看了,有兴趣的人自己自然会去查资料。

再说中文:中文主要也分三类:宋体、黑体、其他(包括楷书、行书)。

其实上面有一段我说中文字体的时候已经说了很多了,所以这里就不展开继续了,只说两个点:印刷方面我们更多的会用到宋体做正文内容的字体,而 UI 设计中,黑体或无衬线体会更让眼睛舒适(这是最近翻阅国外文章时看到的最新研究)。

中英文字间距的简单说明

举个例子:「我在马路边,捡到 one 块钱」;「我在马路边,捡到one块钱」

这句话大家应该注意到,第一句,我把「到」和「块」中间的「one」做了个空格处理。所以看起来会更舒服,相比于第二句,显得更轻松,自由的感觉。这也是为什么我写文一直以来都做这样处理的原因。

我觉得很多人写文章或文档,都没做到这点,只能说做事情不是很仔细,没有认真考量这些细节,同时也说明做事情的态度…(好了,我就不装*了)

比如我公众号的文章,我会在两边留一个间距,让读者更好的集中视觉焦点,不会逃离手机屏幕的边缘。我大概去年中旬开始这样做之后就一直被模仿,也正说明了它确实是有效果的。

希望大家平时做排版的时候,一定要注意中英文字间距的问题,以及段落边缘的处理。这些细节,能让你的作品看起来更加精致。

案例分析

学习字体设计大概三周时间,我有幸接到一个小项目:给一家日式料理店设计一个字体 Logo。

一刀日式料理,杭州一家刚开的日式料理店,店铺风格走得是新日式风,带一些传统元素。在与委托人聊完后,得到几个关键词:日式、素雅、简约。 以此设计店铺字体 Logo:一刀。

一开始毫无头绪,于是找了日式料理的历史翻阅了下,发现有很多人对日式料理的店铺字体 Logo 有一个错误的了解,即:用「勘亭流」做基础来设计。而这类字体大部分是用在日本相扑与歌舞伎町专门的宣传上的。

在了解了一个大概情况后,我有了一点点的思路。就先动手找了找感觉,可惜并没找到新的形式。

但是让我想到了字体组合的形式,之后就在思考两个字的组合是否可以有比较简单的方式,且能够清晰明了的看出品牌名称。于是找了古文的宋刻本找案例,看看古文体是否有值得借鉴的。

在翻阅资料的过程中,看到一本小塚明朝的字体,于是以它与古文体的「宋 · 米芾 · 离骚经」做了一个简单结合,画出了下面这个「刀」。

开始看着这个刀字,觉得风格太过老式,不符合新日式的调子,所以还是想做一个更改。

在做了多次更改之后,还是觉得差点感觉,正好翻看到左佐设计的“百年映像”,觉得这个横笔的细体可以沿用,所以也试了一下。这里的「刀」字都是初设,细节都没有调整。

其实到这里,对这块还不是很满意,左边的刀有雅,但是不够素。而右边的刀太韧,从食品角度而言少了些许引诱性。

根据得到的这两个字,再次上手稿去找感觉,无意中画出一稿接近我理想中的样子。正好我将刀的横笔做了个简化,利用格式塔原理让观者产生共鸣。也正好结合了「一」和「刀」这两个字。最后加上委托人给我的印花,搭配字体。

然后我结合了日本料理的店铺招牌设计,找了一张这种花式肌理的图片作为背景,完成了这次委托任务。

下面是定稿图。

总结

我从理论出发,再到实战,一共花了三周时间(目前还在每天学习,暂定三个月)。

说实话,虽然我目前的作品跟那些字体大师没法比,但也算是我入门了字体这一块,我学这些不是说我要做一个纯字体设计师,而是理解更多关于字体的知识,运用到 UI 工作中,因为我知道:设计是相通的。

当你处于某个瓶颈期时,可以试图踏足其他领域去提高各个方面的能力,也许你突然就通了。

好比我在学习字体的过程中,了解到很多字体设计的流程,发现它跟交互设计工作有很多的相似点。所以每当我听到别人说看书都是虚的、没实质性的用处的时候,表面上我不做什么评价,但其实我心里极其排斥这种人。

Anyway,好的知识都在书里,学不学就看你自己了。

欢迎关注作者的微信公众号:「呆呆U理」

「如何更懂字体」

  1. 推荐:17种设计字体的创意方法
  2. 经验分享:超详细的字体设计方法+案例分析
  3. 字体设计:达人入门篇



【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量200万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/renew-your-font-perception

素材 界面设计 好文 交互设计师 UI 转场动效 设计流程 用户体验设计 设计师专访 设计师 排版布局 扁平化设计 素材下载 视觉设计 职场 设计规范 产品设计 配色 web前端开发 设计趋势 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里