字体

字体是UI设计中最基本的构成之一。字体系统的建立主要解决的是内容可读性以及信息的表达,同时选择不同的字体传达不同的设计风格。通过定义字体的使用规则在设计上达到统一性和整体性,从而在阅读的舒适性上达到平衡。


字体家族

有购买版权字体的企业通过购买的字体库或者免费的字体间进行选择使用。使用免费字体前根据系统区分macor windows,如果用户使用的是mac系统可以优先使用mac默认字体渲染;如果使用的是windows,字体兼容性选择顺序:


行宽

行宽/行长:是指一行字的长度。计算行宽的简单方法,使用RobertBringhurst的方法:行宽=字号x30。如果定义网站的基础字号为12,那么最适宜基础行宽为:14(字号)x30=360(行宽)。较适宜的宽度为40-70个字符。从生理结构分析,人在阅读文字的时候,理解并传递到大脑的信息是有限的。用户在阅读时,目光左右上下巡视、扫描和阅读,这意味着阅读要求大量的眼球运动。行宽越长,眼睛移动的距离太长太多。宽度较大,眼动位移较大,读者阅读换行时容易串行。行宽越短,眼睛阅读折行的次数太多。行数较多,眼动跳跃次数多,读者阅读行时会感觉到文字不连续。



行高

行距/行高:Photoshop里为从一行文字的底部到另一行文字底部的间距。但在前端代码实现上,行距会自动平均分配到文字上下端,因此这里说的行距/行高为每行字体占用的高度空间(如下图)。行间距:从一行文字的底部到另一行文字顶部的间距。 行距(行高) = 字号+ 行间距例如:字号24,行距/行高为32,根据web页面平均分配原则,行距就是从文字的顶端上移4到文字底部下移4的距离。

行高(少文本)=字号+6, 行高(多文本)=字号+8

多文本段落:文字行数>3,宽度>2倍段落总高。两个条件满足的情况下,文字内容不受周边区块影响。
少文本段落:文字行数≤3,或者宽度≤2倍段落总高。文字内容受周边区块影响。

字体类型

family
字体
Open Sans, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"


字体尺寸

Display-3
运营标题-大
56
Hello, 世界!
Display-2
运营标题-中
48
Hello, 世界!
Display-1
运营标题-小
36
Hello, 世界!
Headline
标题-大
24
Hello, 世界!
Title
标题-中
20
Hello, 世界!
Subhead
标题-小
16
Hello, 世界!
Body-2
正文-强调
14
Hello, 世界!
Body-1
正文-常规
12
Hello, 世界!
Caption
水印文本
10
Hello, 世界!


字体粗细

Light
细体
lighter
Hello, 世界!
Regular
常规
normal
Hello, 世界!
Bold
粗体
bold
Hello, 世界!


字体行高

Lineheight-1
密集
1.3

Hello, 世界!
Hello, 世界!

Lineheight-2
常规
1.5

Hello, 世界!
Hello, 世界!

Lineheight-3
宽松
1.7

Hello, 世界!
Hello, 世界!

上一篇: 色彩 下一篇: 图标