字体科普文!手把手带你认识最基础的字体结构 - 优设网 - UISDC

字体科普文!手把手带你认识最基础的字体结构

2014/12/10 40352评论区

chinese-typeface-infrastructure-1

编者按:想搞定字体设计,了解字体结构是特别基础的一部分,今天腾讯同学从字体的分类、结构特征、设计原理以及常用的设计规律四方面给同学们科普一下这方面的姿势,想入门字体设计的同学,来学习咯。

一、常用分类

字体设计得先了解字体结构和组合形式,就像房屋装修一样,你得先了解房屋结构和框架才好进行拆墙重新装饰设计。所以首先了解2个我们常用的字体分类概念:

衬线字体(宋体):

笔画开始、结束的地方有额外的装饰,而且笔画的粗细有所不同。

衬线体粗细不同(可读性更佳)。大段落文章,增加阅读对字母参照参考。就像大家都穿了(衬)衣服和不同装饰物一样好识别,装饰性强、有对比参照性。

图片1.png

非衬线字体(黑体):

没有额外的装饰,而且笔画的粗细差不多。

简洁、时尚、轻松休闲、干净。笔画对比较弱,不及衬线字体。

图片2.png

这2种字体概念联想起穿衣和没穿衣就容易好记,也很好理解。在字体设计中记住这2个概念针对不同类型字体做装饰性处理是关键。

除了这两位基本款,从字体风格分析入手能更好认识不同字体:《不会挑选字体?来看看字体的7种类型及特点》

二、结构特征

抛开上面2种我们常见的字体分类概念,我们在来复习下小学语文中的字体结构。

单体字:一个偏旁单独构成的字。

合体字:两个或两个以上偏旁组合成的字。

其中合体字又分:

图片3.png

汉子轮廓以形似方块,但是由于笔画不同,字体轮廓的形状就会呈现不同的形状,所以在视觉均衡上就会有些许视觉偏差。尤其是单体字和合体字组合笔画就会显得不好看。所以我们要在不同形状的字形上做调整和处理,让他们看起来更加完整、均衡。

图片4.png

上图,等高、等宽的三角形、正方形、圆形我们会发现视觉上他们是不等大。

图片5.png

顶格、缩格、出格就是针对不同结构的字体笔画特征进行微调,让他们看起来更加均衡、等大、视觉更完整。

三、平衡/杠杆原理

图片6.png

中学物理里学过杠杆原理:动力×动力臂=阻力×阻力臂 ,公式:F1×L1=F2×L2

时过变迁,也许有点难理解。结合上图,简单点讲:就是距离中心点越近,F2越重才能与离中心点远的F1平衡。

图片7.png

结合汉字方格,中心点就是方格的垂直中心,例如“体”字,右侧“本”的垂直中心点B,单人旁的垂直中心A,B跟中心点的距离越近,A跟中心点的距离越远,整个字体组合字体重心才平衡,均衡。

当字体变形的时候,把字体拉长,或压扁都是同样的道理需要去细调偏旁部首让重心更平稳、均衡、视觉才更加完美。

单独看每个字都有一个独立视觉重心,设计字体就是要兼顾每个字体的重心,让整体更加平稳均衡。

四、一般规律

(1) 黄金分割线原理

黄金分割值≈0.618

按照黄金分割线0.618的位置我们可以把方格字按上下、左右结构的比例特质画出4条黄金分割线A、D、C、D。

图片8.png

我们在设计单个字体结构的时候,可以参照黄金分割线的原理去调整不同笔画结构的字体,让其看起来更加美观。

黄金分割定律也可以运用到网页设计中,方法右戳:《你知道网页设计的黄金比例吗?》

(2 )上紧下松

上紧下松的例子比较容易记住。拿长腿女人和长腿大叔做例子就好很贴切了。

图片9.png

(3)横细竖粗

横细竖粗跟重力感觉相近,只有字杆粗壮(像树一样)才看起来更加平稳,舒适。

图片10.png

(4) 左紧右松

左紧右松跟视觉阅读习惯相关,就像我们阅读喜欢从左上角开始往右下角阅读一样。

图片11.png

【优设字体最佳好文人气榜】

Top 1:我应该说是最全最强的创意总结吗?
《推荐:17种设计字体的创意方法》

Top 2:案例多,分析多,方法新,有收获:
《经验分享:超详细的字体设计方法+案例分析》

Top 3:实战好文,一个字体设计的全过程!
《字体设计实战!QQ音乐巅峰榜诞生记》

原文地址:tgideas.qq
作者:高露洁

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

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量87万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/chinese-typeface-infrastructure

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

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

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

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