字体设计知识点汇总

用户头像
上海/UX设计师/4年前/250浏览
字体设计知识点汇总

增加跨越不同设计领域的知识、了解设计、遇到设计问题是激发灵感,并重拾对那些不常使用的设计法则的认识。

  1. 中西文字分类

    西文字体(基本都有版权,无法免费使用):衬线体(字形笔画末端有结构装饰细节)

    无衬线体(专指西文中没有衬线的字体,与汉字字体中的黑体相对应。相比严肃正经的衬线体,无衬线体给人悠闲轻松的感觉)

    常见衬线体有:Centaur(史诗风格,适合年代悠久的感觉,圣马可大教堂指示牌和环王海报上用了此款字体)

    Caslon(英国历史上第一款原创设计字样,适合表现文艺、奢华、高端设计里面的大标题,和阅读书籍类也可用,用于美国独立宣言)

    didot(字体既保留了传统古罗马字体的经典衬线,有拥有现代风格的锋利切角,适合时尚杂志的封面大字和标题文字)

    使用衬线体的APP:Medium(需要外网)、Ployvore、Artsy、2019字体日历、妙读、西窗烛、

    中文字体(代表字体:宋体、仿宋、楷体)

    宋体(结构饱满、端庄典雅、整齐美观,既适用于印刷刻版,又适合人们基本阅读需要。在财经类杂志的刊头运用最频繁)

    楷体(流畅和谐、富有韵味,通常用于正文及说明性文字,在新闻类杂志的刊头字体设计中运用的最频繁。)

    GUI(是图形化界面的总称,包含了字体、图标和一切显示器显示出来的东西)Alto施乐之星为GUI的发展奠定了基础。)

  2. UI字体需要注意:

    可读性:辨识度是需要首要考虑的;其次是低调去个性,应该方便用户完成任务的,而不应为用户添加认知负担;

    第三应该具有一定的灵活度,我们在为各种不同的媒介设计用户体验,无法掌握的是——用户能力、应用场景、所用的浏览器、屏幕大小等;

    第四是宽比例,比例是指一个字符的高和宽的比值,宽度比值越大辨识度越好,小屏阅读体验也越好。

    易读性(行文排版的一切要素都会影响易读性,包括字号最小12pt、字色、字距、行距、行宽、文本灰度、对齐方式和段落调整排布等)

    判断字色的sketch插件,字体颜色对比可行性软件:Contraste。

    行间距(行距又叫行高,指文字块的整体高度。)正文文字:行高数值可以为文字字号的1.5-2.2倍左右;标题文字:1.2倍左右。

    行宽:一行文字的行宽为文字尺寸的整数倍,或者为“文字尺寸+字距”的整数倍。

    第一对齐原则,中文UI排版设计左对齐即可,英文采用左对齐\行首对齐的形式。

    第二层次感,层次影响着行或段落的视觉流,字母间距小于字间距,字间距小于行间距,以此类推。

    第三每行字数,在Material Design移动端英文最适合的单行阅读字符数是40-60字,中文阅读时单行文字数是当字号为14pt时字数是18-28字;字号16pt时字数16-24字;字号18pt时字数14-22字。

  3. 中西文字体差异

    中文:是方块字是固定宽度,同时每个字本身自带隐形文本框,上下对齐,除了字间距没有可调整的空间。

    西文:是比例宽度,每个字母的宽度不同,无对齐关系,句子内了调整空间大,字母间距和单词间距可调。

  4. 中西文排版差异

    中文排版:会从一行排几个字的思考方式出发去计算行宽,先算好展示字数和字号大小,算出整数倍,定下文本框大小,剩下的是余白。最好不要标题结尾。

    西文排版:先定下两边间距、中间宽度,再排文字,不在乎每一行的字数。

  5. 推荐用字

    一、白舟大髭字体(行业里做海报、banner用的最多的一款手写字体)

    二、阿里普惠体(只能直接免费商用不能对字体进行变形修改)

    三、方正清刻本悦宋(优化过的宋体)

    四、汉仪小麦体(多用于插画里面的手写体)

    五、文悦古典明朝体(偏中国风、古朴)

    六、文悦新青年体(当今banner用的多)

    七、造字工房劲黑(常用的黑体、粗体,海报里常用)

    八、方正字库

    九、汉仪字库

    十、华康字型(华康少女字、墨字体、金文体、唐风隶)

    十一、华文字体

    十二、新帝字体(新帝金童体、泡芙体)

    十三、文悦字型(文悦后现代体)

    十四、文鼎(文鼎DC黄阳尖魏、文鼎DC陈森田)

    十五、锐字工房(青春体、李 林哥特、卡布奇诺细、禅粗黑、墨陌写意水墨、磅礴黑简、舒体、行草)

  6. 字体原理

    重心(物理重心和视觉重心)

    表现文艺、女性特点重心高,表现稳重、端庄、力量重心低。

    中宫(指实实在在的笔画结构,字体笔画在重心区域的造型和布局)分为上三宫、下三宫、中宫、左宫、右宫。

  7. 字体应用原则

    亲密性原则:

    一、多个项目之间存在很近的亲密性,他们将成为一个视觉

    二、亲密性的根本目的是实现组织性。

    三、不同层级元素之间的留白应该不同。

    四、彼此无关的元素,一定要拉开距离,避免建立亲密性。

    对齐原则:每个元素都应当与页面上的另一个元素有某种视觉联系。

    一、对齐的目的是使页面统一而且有条理。

    二、同一个页面上,避免使用多种文本对齐方式。

    三、尽量避免居中对齐,除非在比较正式、稳重的情景下。

    重复原则:让视觉要素在整个作品中重复,能够实现整体风格的统一,包括统一颜色方案、字体字号、文本行距、图片风格等。

    一、重复可以使视觉效果保持一致。

    二、重复的目的是统一并增加视觉效果,往往会易于阅读。

    三、避免太多的重复,让人心生厌恶。

    对比原则:对比是为页面增加视觉效果最有效的途径之一。强烈的对比会给人视觉甚至心灵上的冲击,从而形成用户记忆。有利于设计的传播及转化。

    一、对比可以增强页面的可读性,同时有助于组织信息结构。

    二、可以通过字体、颜色、形状、大小、线宽、空间等增加对比。

    三、对比一定要明显、强烈,让他截然不同。

  8. 相关网站推荐

    01、http://bigertech.com/100213/(有关英文知识、英文字体结构的)

    02、http://www.typeisbeautiful.com/(有关中文字体的访谈论坛活动的)

    03、http://www.ziticq.com/字体传奇(有关一些字体包、字体教程、文章)

    04、http://www.qt86.com/艺术字体在线生成器(打一句文案生成合适的字体)

    05、https://fonts.google.com/(谷歌自己的,有些可免费下载)

    06、http://font.knowsky.com/字体下载大宝库

    07、站长之家(可以免费下,几乎涵盖所有字体)

    08、https://www.fonts.com/(英文)

    09、http://www.qiuziti.com/求字网

    10、http://www,zhaozi,cn/找字网

    11、http://www.whatfontis.com/(可以上传图片搜索识别英文字体的)

    12、字由官网(发现字体、字体合集、字体案例、字说字话)

    11、方正官网里面的字加

    12、WhatFont(字体插件)

3
举报
|
5
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
平面插画设计女孩喝咖啡
水蜜桃和李子的平面水果图案
金色颗粒质地的平面
牛奶乳液层次平面平铺平面
海底世界插画
空的平台平面和自然景观
平面设计 吊牌设计
城市园林平面布局航拍
金色颗粒质地的平面
平面设计风格的粉色草莓味马卡龙
城阙凡花
平面插画情侣/矢量
平面花卉图案扁平简约无缝拼接插画
倒计时,海报,平面
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
金色颗粒质地的平面
平面男孩喝咖啡插画设计
中国传统纹样创新图案设计
空的平台平面和自然景观
平面风格黄绿色系花朵装饰
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
牛奶乳液层次梯田平铺平面
平面书法字手写
金色颗粒质地的平面
“知识宅急送”外卖,快递,平面,海报,素材,教育
你可能喜欢
相关收藏夹
大家都在看
登录注册