UI设计教程分享:让你彻底读懂字体Leo雷

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

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

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

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

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

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

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

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

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

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

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

西方文字的结构:基线

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

“X”高:

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

字腔

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

衬线体

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

衬线体又分为类似手写的旧体(oldstyle)传统而有底蕴,和比例工整的现代体(modernstyle)现代和时尚感强一些。

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

无衬线体

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

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

其他字体

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

手写体“script”,优雅、温暖、亲切感。

汉字的结构:字面

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

文字的骨架:

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

胸线(也称作字怀):

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

宋体

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

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

黑体

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

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

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

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

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

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

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

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

字族

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

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

不同字体的性格

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

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

格调感

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

亲和力

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

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

未来感

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

复古感

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

华丽感

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

文化底蕴

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

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

权威性

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

自然感

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

精致感

力量感

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

女性化

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

说了这么多,字体设计本质是在设计什么?

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

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

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

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

THE END
1.字体设计教程字体设计教程视频字体设计教程视频大全播视网编辑为您整理收集字体设计教程视频大全在线观看,如果您关于字体设计教程视频,最新字体设计教程视频,请关注播视网,我们会第一时间为您整理更新字体设计教程视频。https://www.boosj.com/tag_3574815.html
2.字体设计字体设计视频教程巧匠课堂巧匠课堂字体设计频道为您提供专业的字体设计培训视频教程,包含PS字体设计,AI字体设计,C4D字体设计,DW字体设计,AE字体设计,AU字体设计,PR字体设计等字体设计学习课程.https://www.2qj.com/video/0ziti/
3.字体设计教短视频制作教程视频大全虎课网为您精选3门字体设计教短视频制作视频教程免费学习,更有字体设计教短视频制作图文教程、课后练习及作品评改。上虎课网学字体设计教短视频制作,每天进步一点点!https://m.huke88.com/jiaocheng/zitishejijiao-27-1/
4.创意ps字体设计教程文字字体设计ps小思路创意ps字体设计教程_文字字体设计ps小思路 字体设计 当我们我在进行创意字体设计的时候,都会使用到PS技术,而PS技术离不开Photoshop软件,Photoshop软件是目前非常常见的图片处理软件,常用在图片设计的设计创作。也常常用于网站创作的呈现面对业余制图爱好者,也可以把普通图片扫描到计算机里面处理出非常完美的效果。总之,https://gonglue.epwk.com/33231.html
5.字体设计教程分享教程分享频道提供ai教程、ui教程、ps教程、绘画教程等设计教程,免费在线阅读。https://www.sucaijishi.com/%D7%D6%CC%E5%C9%E8%BC%C6_52_1.html
6.设计思路教程!这14个常见字体海报设计技巧一定要收藏今天给大家分享满满中国味的设计风格。 怎么设计中国风的设计作品? 阅读文章>> 字体设计教程!电商标题字体设计攻略(国潮篇) 关于教程 近年来,国潮这个词,可以说是越来越火,热度不减。很多的品牌和产品,都在想尽办法玩转国潮风。而字体标题,在国潮类的设计作品里,当然也有很重要的戏份。 阅读文章https://uiiiuiii.com/other/1212396998.html
7.送给你150000种字体设计方法来源:字体帮(ID:zitibang) 写在前面的话 你没数错,是150000,后面有四个零 等你看完这篇字体设计教程之后 我相信你也会确认 是的,我真的没有吹牛X 之所以写下这篇教程 是因为很多朋友曾问过我这个问题 面对一个字体,经常没思路 不知道从哪里开始设计,从哪里做创意 https://www.163.com/dy/article/DTPS03U10518EFPC.html
8.《以字之名字体设计实例教程》(秋刀鱼)简介书评当当网图书频道在线销售正版《以字之名 字体设计实例教程》,作者:秋刀鱼,出版社:电子工业出版社。最新《以字之名 字体设计实例教程》简介、书评、试读、价格、图片等相关信息,尽在DangDang.com,网购《以字之名 字体设计实例教程》,就上当当网。http://product.dangdang.com/29249401.html
9.ps教程:毛笔字的制作教程字体设计教程平面设计教程PS教程:帅气尔康哥哥P成彩铅风感觉,没想到还被网友恶搞! 7931 PS教程:2021加油!2021你好! 2264 ps教程:魔术橡皮擦抠图 淘宝美工教程 平面设计教程 8376 PS教程:点线面设计原理 淘宝美工教程 平面设计教程 6254 PS教程:长城融入人物背景 3214 ps教程:毛笔字的制作教程 字体设计教程 平面设计教程 https://v.pptv.com/show/6LgvngZs3Bp9ib2M.html
10.字体设计教程designwithfontforgezhCN.pdf中文版【字体设计教程】\n\n本教程专注于字体设计,特别是使用FontForge软件进行自定义字体创作。FontForge是一款免费的开源工具,适用于字体设计新手和经验丰富的设计师。它提供了丰富的高级功能,随着软件的不断更新,字体设计变得更加易行。\n\n**1. 引言**\n\n字体设计看似复杂,但现代工具如FontForge降低了进入门槛。本书https://download.csdn.net/download/github_38885296/38168457
11.字体书法设计教程书法字体分类发现字体2024-12-08 共 9个字体 简介: 字体书法设计教程 Himdath-Regular语言:英文 Freenightswashes-Bold语言:英文 Aristotelica Text Trial Regular语言:英文 DIN Pro Cond Extlight Italic语言:英文 DIN Pro Cond Black语言:英文 DIN Pro Black语言:英文 DIN Pro Cond Medium语言:英文 http://www.qiuziti.com/fontlist2?id=56771
12.做字库超简单!字体设计神器Glyphs系列教程(下)优设网字体设计神器Glyphs系列教程(上) 如果你想做出属于自己的字库? 阅读文章> 前言:上篇文章把Glyphs的软件特性、界面框架、以及部分常用功能总结完啦!那么,这次就把剩下的内容,一次性全部总结完。内容会涉及到一些超好用的辅助功能、绘制字符的流程和相关技巧,还有字距设定的相关方法、以及字体封装出库的一些设置。https://www.uisdc.com/glyphs-2
13.Illustrator+FontLab进行字体设计教程Illustrator教程平面设计所以,哪怕你字母设计得再好看,如果组成的单词不行,也是白搭。对中文而言,西文字库的字符Glyph设计,与其说叫做“字体设计”,不如说叫做“部件设计”更合适。他们设计好26个字母,只等于完成了工作的一半,更重要的是用字符间距来控制形成单词的造形。这几乎等于中文字体设计当中的由部件组成整字。https://www.jb51.net/Illustrator/24482.html
14.CDR平面设计教程字体设计版式技巧解密CDR平面设计 专注于视觉传达设计,请多多关注! 来自湖南省 CDR平面设计教程 字体设计版式技巧解密 专注与平面设计教学,每日更新设计资料,详情请关注本凤凰号! 推荐视频 01:39 打开APP阅读 美国感恩节预计8000万人出游 创新高07:26 打开APP阅读 10年车龄高尔夫,一招“回春”https://v.ifeng.com/c/f024f09d-f2e0-42f8-8e13-c86acddef7c4