UI设计教程分享：让你彻底读懂字体

一份普普通通、规规矩矩的设计

一份让人印象深刻、新颖有趣的设计

差在哪？其实就差在三个字上！

“优秀的设计不是每一个细节都有亮点，而是弱化其他元素，让某一个亮点最大化。”

今天“骉叔的设计心得”就来总结一下关于“字”的心得。

在设计和选择字体前，我们要先想明白文字的功能是什么？

从原始时期的人类在墙壁上画下的那几个抽象的符号，到殷墟发现的甲骨文，再到现在发展到上万个现代文字。有各种各样的文字形式，但其实它们的核心功能都是一致的：

“作为信息的载体，记录和传播信息。”

这是文字最为基础，也是最为重要的功能，脱离了这一点，再花哨的设计也都是徒劳无功。

文字除了传播信息之外，本身的形态也能够表现出强烈的情感与力量。就算你不了解语言的具体意义，也能通过字体图形化的设计，了解到一部分特定的信息。

所以完全相同的文字信息，使用不同的字体，会传递出完全不同的感觉。

骉叔啰嗦这么多，其实就是要你明白字体设计的目的，如果出发点错了，步步皆错。

“做一件事，先搞清楚目的，你才能搞清楚重点；搞清楚重点，你才能学会做事的时候从最重要的地方着手，次要的相对的忽略，从而达到最高的工作效率。”

搞清楚为什么设计字体后，再看东西方文字的构造：

西方文字的结构：基线

西方文字是以水平线为标准进行构造的。从下往上，第二条线是标准的“基线”，几乎所有的西方语系文字都是写在这条“基线”上。

“X”高：

x高就是以x字母为准的高度。不同字体的的x高是不同的，所以基线也就会有变化。通常来说，x高比较大时，基线位置会靠上，小写字母较大，会感觉行间距比较狭窄。x高比较小时，大写与小写字母的差距较大，视觉上行间距也会比较宽松。

字腔

像是C或O这种字母，中间的空白称为“字腔”。字腔较宽的字体给人开放、轻松的感觉。字腔较窄的字体给人密集、力量感。

衬线体

衬线体大家肯定都不陌生，特点是字体两端有衬线来装饰。最早的衬线体是古罗马时期石碑上刻画出来的，别名为“罗马体”的字体。这种字体兼具传统感与易读性，经常用作标题、正文。

衬线体又分为类似手写的旧体（old style）传统而有底蕴，和比例工整的现代体（modern style）现代和时尚感强一些。

根据衬线的不同（两端的装饰）可分为支架衬线体（弧形的衬线，温柔亲切传统）、发丝衬线体（直线构成，平整清晰）、板状衬线体（粗厚的四角状衬线）。

无衬线体

没有衬线的字体，也就是末端没有装饰的字体，称为“无衬线体”。和中文的“黑体”比较类似。

无衬线体的出现，是为了更加吸引注意，在板状衬线体的基础上，演变过来，随后又发展出纤细的无衬线体。无衬线体的“x高”普遍比衬线体更大一些，字腔也比衬线体大。视觉上能够给人力量感、现代感。

其他字体

哥特体“black letter”，是用笔尖扁平的笔书写的。传达出庄严感、高贵感、敬畏感、紧张感。

手写体“s cript”，优雅、温暖、亲切感。

装饰体“display”，用作广告、海报的标题，有强烈的个性。

汉字的结构：字面

汉字是在正方形的格子里设计的，文字所占尺寸称为“字面尺寸”。字号大小相同的字体，会因为字面尺寸的差异而大小不同。所以有时候两种字体搭配在一起，虽然字号设置的一模一样，但观感差别明显是不同的，原因就是这两种字体的“字面尺寸”不同。

文字的骨架：

骨架也就是文字的基本结构和重心分布。文字的骨架如果出问题，比如重心不稳，结构比例上不协调等，字体设计完之后将会变得很奇怪，而且很难修改回来。

胸线（也称作字怀）：

胸线指的是字体内部空白处的宽度，胸线小的字体给人更加传统的感觉。但是在较小字号时，会增加阅读难度，给人感觉窄小萎缩，视觉上会感觉糊在一起一样。胸线大的文字现代感更强，而且较小字号也可以轻松辨识。

宋体

横线细，竖线粗，笔画尾部加上衬线的称为宋体。宋体字是最早的印刷字体，悠久的历史和使用范围给人传统、底蕴、易于阅读的印象。

宋体的衬线带有锐角的（现代型宋体）给人感觉干脆利落而强硬，衬线柔和的（传统型宋体）给人感觉古典亲和。要根据你想要表现的感觉来选择字体，即使同为宋体，其性格也是有些许差异的。

黑体

横线与竖线宽度一致的称为黑体。黑体的出现是当时为了强化标题而发展出的字体，所以黑体的基因中就保留着“强而有力、强调、正式感”的基因。

传统的黑体字，胸线比较小，更加凝聚、内敛，笔画粗细也并非完全一致。现代黑体胸线较大，给人开放感、机械感、冰冷感。

其他字体

隶书起源于战国，给人历史久远、神秘的感觉。

楷书也叫正楷、真书、正书。由隶书逐渐演变而来，更趋简化，横平竖直给人古典的感觉。

行书是在楷书的基础上演变而来，给人更加流畅随意的感觉。

而草书则是在行书上进一步简化，给人洒脱、不拘一格、有气度的感觉。但因其可读性较低，所以不适合做正文。

圆体给人温柔可爱、天真的感觉。

此外还有综艺体、卡通体、雪山体，这些字体都有强烈的个性，适合表现鲜明的意向，但不适合做正文使用。

字族

“腰线”指的是文字的粗细，只改变腰线粗细、字体宽度的系列字体称为字族。标准的粗细为regular，再粗的称为medium，更粗的称为bold。按照宽度可以分为宽型的文字、窄型的文字。窄型的文字也叫窄体字或压缩字，宽型的文字也叫扩张字或宽体字。宽体字更有力量感，压迫感；窄体字更加挺拔、年轻。多用于标题。

同一家族的字体搭配，表现主次的基础上，更能让你的设计效果和谐一致。

不同字体的性格

文字是为了传递信息而创造的，因为有信息需要表达，所以我们才会写下文章和文字。

而字体设计就是在保持传递具体信息的基础上，利用图形和颜色等信息来传达文字所不具备的朦胧的性格。

文字受制于文化、语言的不同，会有各种隔阂。而图形则不需要理解，没有国界、语言、文化这些限制，用更低成本、更加直接的传递情感与信息，成为更加有利的技巧。

格调感

一般来说有装饰的衬线体，比无衬线体更加有格调、更显精致高雅。造成这种认知的原因则是宋体字的历史更加悠久，长时间被人使用。所以本身就具有传统、正统、高格调、底蕴的感觉。

除此之外，有衬线的字体大部分都有一个共同点，就是字体中有曲线，而曲线则能营造优美而华丽的感觉。想呈现出“高级感”，搭配合理的留白，以及文字的明度差别较弱的颜色，则更能强调出高级感与信赖感。

亲和力

尖锐细长的东西会让人感到紧张，例如日常物品刀子、针、尖锐的石头等。圆润的物体则让人安心、感到亲近。

文字也有同样的心理作用，纤细、尖锐的文字，给人危险、难以靠近的印象；圆润柔美的文字给人亲近、柔和、可爱的印象。但过于浑圆的文字会给人孩子气、不稳重的印象。另外，想呈现亲近的印象时，尽量采用色彩亮度差异较小的颜色。

未来感

规则且如图形般的文字，会让人感受到新颖和科技感。文字的构成要素越简单，抽象感越强，就更能呈现出一种未来感。所以，将文字改造的更加简单，呈现“图形化”就能呈现出科技感，或者用直线和圆相互连接来构造文字，搭配无彩色更能体现未来感。

复古感

想要表现出复古的感觉，就要先了解过去时代的风貌，复古就是还原出当时那个时代的风貌。比如要表现出上世纪的感觉，就要先了解当时流行什么样的字体、什么样的展示风格。

华丽感

18世纪后半叶人们开始在海报上，不断增强文字的装饰性，目的是为了吸引目光、拉开与其他商家的差别，并且这种重度装饰的风格沿用到今天还会看到。文字的装饰性越高，华丽感也就越强，但可读性会变弱。所以要用在少数文字上，或者不需要被看懂的文字上。

文化底蕴

要体现传统的文化底蕴，书法字体是最合适的选择，书法分为篆书、隶书、楷书、行书、草书，合成书法五体。

需要注意的是，书法字体的运笔走势和排列方式要一致，一般采用竖排的方式，横排会显得运笔不协调。

权威性

权威性来自于严谨、传统、朴实。所以文字如果要营造出让人信赖的氛围，不适合过分装饰，常规的字体更为适合，比如宋体、黑体这些常见的字体。排版上要宽松、易读、有秩序感，不能杂乱无章，否则传递不出正式、值得信赖的感觉。

自然感

手写的文字，会让人感觉到温度、自然、有生命力。但一般计算机里的手写字体会过于规整，所以要对每个字的大小和角度进行微调，赋予变化，更能凸显自然的感觉，但不能调整不能过大，要控制在肉眼看不出太大变化的程度。

精致感

单纯的文字本身无法带来“精致”的感受。要体现精致感必须有充足的留白，缩小字号、减少颜色的数量。此外，无衬线体比衬线体看起来干净利落，细体比粗体看起来干净利落。适当的添加大小强弱的对比，对于提升画面精致感有不小的帮助，具体方法参考骉叔之前的文章《如何让你的设计脱颖而出》

力量感

直线、粗线条、有棱有角的文字，放大处理，能呈现出强硬、力量感。文字线条越粗，给人越强劲的感觉，粗细一致的无衬线体和黑体更具稳定感。搭配强烈的明暗对比和较小的间距，更能凸显力量感。

女性化

细腻而有生命力的曲线，呈现出纤细和柔韧的美感，而且曲线比直线更柔和、有亲和力。所以，柔和衬线的宋体字比黑体字更适合表现女性化、柔韧感。

说了这么多，字体设计本质是在设计什么？

你心里应该已经有一个大致的方向，简单的总结一下其实就是一句话：

字体设计的本质，是把文字当做图形和图像来设计，更加直观形象的传达具象与抽象的信息。

比如圆润的图形给人亲和力、尖角的图形给人凌厉感；直线给人干净利落的感觉、曲线给人柔美华丽的感觉……

​

关于图形（点线面这些平面设计中的精髓）以及平面构成的形式，骉叔之后会为你单独总结一份设计心得。

编辑：千锋UI设计