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

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

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

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

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

在最近两年里，字体慢慢又被大家重视起来，因为在 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