◆ 行高
行高约为字号的1.5倍会有更好的阅读效率,但不追求绝对地1.5倍。具体来说行高=字号+8px,其中8px为分别为上下4px间距,既能完美对比又能舒适阅读。以pc端常用字号14px和16px为例,字号和行高关系如下:
字号(px) | 行高=字号+8 | 使用场景 |
12 | 20 | 辅助文本 |
14 | 22 | 正文1 |
16 | 24 | 正文2 |
20 | 28 | 标题1 |
24 | 32 | 标题2 |
30 | 38 | 标题3 |
38 | 46 | 网站大标题 |
46 | 54 | 网站大标题 |
56 | 64 | 网站大标题 |
68 | 76 | 网站大标题 |
◆ 表单间距
独立表单项:以字号14px的【文本框】为例,如果文本框下面有【说明信息】行,则间距应为4px;如果一行有多个文本框组成组合输入框,各文本框间隔8px;如果由两行文本框组成级联文本框,则各文本框间距也是8px。
各独立表单项间隔:24px。