中文字体
关于叫法:有衬线体,印刷体;无衬线体,黑体字
衬线体:
-
宋体
古书说:刻字刻书,宋体为方体字,楷体作为软体字。
结构饱满、端庄典雅、整齐美观
财经类杂志刊头最频繁,教育类杂志刊头最少
-
楷体
楷书技术上规范出一种字体,与手写体相近似
流畅和谐,富有韵味
用于正文及说明性文字。新闻类杂志的刊头频繁,娱乐、女性、情感杂志运用最少。
GUI:图形化用户界面。字体即界面,好听点叫用户体验,不好听叫界面端排版设计师
UI字体注意:
1. 可读性:字母形状区分度。
- 辨识度:清晰、可辨认
- 低调:不喧宾夺主、为方便完成任务,不增添认知负担
- 灵活度:不同媒介设计用户体验。
- 宽比例:宽比值越大,识别度越好,小屏体验越好。瘦长有设计感识别度差
2. 易读性:行文排版的一切,包括字号、字色、字距、行距、行宽、文本灰度、对齐方式和段落排布等等。
- 字号:偶数,例外是15px(5的倍数);多端设计时,要考虑显示的比例及设备显示距离。
- 电脑显示器阅读距离50CM最佳角度为0.3,14px字体;
- 移动端阅读距离20CM-30CM,受限于屏幕尺寸,字号不能小于11px。长文阅读字号适当增大,减轻阅读压力。
- 字色:
- 对比度最小对比度4.5:1(AA级)、3:1;最大对比度7:1、4.5:1。
- 字号与字色 :字号≥24px normal/19px bold,白背景上最浅纯灰色是#959595;否则小于此字号的话,最浅纯灰色是#767676(如再灰色背景上应该更深)推荐软件:Contraste
- 行间距:1.5-2倍
- 行宽:整除?对齐?(网格对齐)
- 中西文字体差异:中文是固定宽度,除上下对齐、字间距没有调整空间;西文比例宽度(字母间距、单词间距)
- 对齐原则:印刷对齐:两端对齐;UI排版设计对齐:左对齐即可;英文左对齐;
- 层次感:行间距、端间距
- 每行字数:MD指出移动端,英文每行40-60;中文字号14px,字数18-24字
- 字距:特别是运营排版标题,字距小的字要拉近
- 符号标点:中文的全角半角,中文与英文交接处用半角(中文),为了遵循双方排版习惯,作为过渡和衔接。数字与单位之间:度、斜杠、百分号与数字之间不需要加空格,自动会有空格
- 字体单位:em/rem(开发会用到,设计用px,于是有了pt)
- 1倍图:1pt=1px;
- 2倍图:1pt=2px;
- 3倍图:1pt=3px;
-
苹方
改进自“华文黑体”,去掉了喇叭口增加了些字重。
-
华文细黑
Mac OS 9之前版本中文默认字体,身份证字体。
-
兰亭黑
方正兰亭黑衍生于齐立为微软雅黑
-
微软雅黑
微软委托方正设计
-
华文黑体
同样是Mac OS 9之前版本中文默认字体,也是iOS 8之前的中文字体。iOS developer编程默认中文字体(Heiti SC)
而OS developer在Ps设计时使用的是黑体-简或Heiti SC,并设为西体,浑厚。
-
Droid
Android4.4之前的默认字体,中文部分由华康完成。
-
Roboto Adobe称为:Source Han Sans
谷歌于Adobe一起委托一个工作室开发。Android系统、中文Noto字族(思源黑体)、Gmail
-
Segoe
微软Vista用字
-
冬青黑
Mac OS X 10.6雪豹系统用字。日本设计字体,锤子手机冬青黑+Helvetica。
-
小米兰亭
就是方正兰亭,18个月委托方正改一改,还不如原版
段子:如果你要成功,必须要被雷总拒绝一次,拒绝收购很多大佬。
-
汉仪旗黑
网易新闻使用
头条于2014年进入市场,在这之前最大的是网易与凤凰新闻。
-
明兰
早期“极限社区”活跃于论坛。
推荐常用字体
- 白舟大髭书体:
日本制作,广泛用于综艺节目、宣传、海报推广 - 方正清刻本悦宋:
运营作品中banner、专题页、插画作品中用到 - 汉仪小麦体:
白茶的插画作品、手绘作品 - 文悦古典明朝体:
古朴、神秘。转折多,方框。 - 文悦新青年体:
现代互联网、几乎成了banner标准用字。设计感、很简洁。 - 造字工房劲黑:
设计感,力量感。keep、设计类网站
字体测量
找相关行业的竞品截图,Sketch测量,字体、字号、颜色、字间距、行间距等
栅格化设计
- 网格的基本概念:“列”
- PC端一般12列;移动端一般6列
- 结构分析:屏幕间距、水槽、内容模块、组合区域
- 行:行间距。黄金分割比例(话术:斐波那且数列、专业工业制图法)
- 1.设定最小设计单位:阿里系最小单位是3;airbnb、亚马逊、Pinterest是5、6。定好后,界面中所有间距一定是最小单位的倍数。
- 2.定边距和水槽大小:
- 3.定横向间距
字体设计概论
-
西文字体基础:
- 基线:包含X字母高度——小写字母主体高度
- 大写高度
- 上伸部分
- 下伸部分
-
汉字原理
- 结构:左右、左中右、上下、包围...
- 字体原理(重心):物理中心、视觉中心。重心:重心线、中心线、字身、骨骼、中心点;
- 重心高:文艺、女性、稳重、端庄、力量低;重心低...小米兰亭字重心没有起伏
小窍门:笔画堆积的地方,差不多是重心所在的区域
- 中宫