文本
文本作为用户界面信息传达的元媒介,直接影响用户的使用感受和效率。通过定义文本的使用规则,以确保用户在阅读上更舒适、更高效。
字体家族
需区分手机操作系统 iOS 或 Android,建议优先使用系统默认字体。除非你的应用迫切需要使用自定义字体,例如为了宣传品牌或者创造沉浸式的游戏体验,否则请首选系统字体。
列举市场上常见的操作系统默认字体:
Type | iOS | Android | HarmonyOS | MIUI | ColorOS |
---|---|---|---|---|---|
中文 | PingFang | Source Han Sans | HarmonyOS Sans | MiSans | OPPO Sans |
英文 / 数字 | San Francisco | Roboto | HarmonyOS Sans | MiSans | OPPO Sans |
字阶
字阶定义了系统常用的字体大小梯度,我们建议设计或开发人员优先使用常用字阶,以免混合太多字阶影响信息的可读性。
Type | Size | Line height |
---|---|---|
headline1 | 32 | 42 |
headline2 | 28 | 38 |
headline3 | 24 | 32 |
headline4 | 20 | 28 |
headline5 | 18 | 24 |
body1 | 16 | 22 |
body2 | 15 | 22 |
body3 | 14 | 20 |
caption1 | 13 | 20 |
caption2 | 12 | 16 |
行高
行高是指每行文本的空间高度,合适的行高可以使文本获得舒适的可读性。如果行高过小,文本容易重叠,阅读起来费力。如果行高过大,文本看起来清晰,但阅读速度会减慢。
为了保证阅读的舒适性,单独对大段落文本行高进行了特殊自定义调整。
Type | Size | Line height |
---|---|---|
paragraph1 | 15 | 26 |
paragraph2 | 14 | 24 |
paragraph3 | 13 | 22 |
字重
字重是指字体的重量或粗细程度。
字重的作用是在不同的文本内容中提供不同的字体效果,例如在标题、副标题、正文等不同的部分使用不同的字重可以更好地突出文本的重点,提升信息对比度,提高可读性。
我们建议设计师使用 Regular / Medium / Semibold 三种字重,开发者相应通过设置 400 / 500 / 600 来调整字重,这样在美观度和兼容性上会得到一个平衡。
由于 iOS 系统原生字体字重等级全面,从 100 - 600 都有,因此前端代码设置数字字重后,文字可以显示不同的粗细。通过谷歌官网可以查到安卓原生系统字体只有一种字重(Regular - 400),粗体是描边加粗渲染出来的,实际效果并不好。
这个问题在国内手机上基本不存在,现在国产手机厂商基本上都有自己的定制字体,比如华为的 HarmonyOS Sans,荣耀的 Honor Sans, OPPO 的 OPPO Sans,小米的 MiSans 等,也都基本支持多数字字重显示。
Type | Weight | Usage |
---|---|---|
Regular | 400 | 常规文本 |
Medium | 500 | 标题文本 |
Semibold | 600 | 英文 / 数字强调 |