文字-Typography
用于控制对齐(alignment),封装(wrapping),以及字重(weight)等等的常用文本实用辅助工具的文档和示例。
文本对齐(Text alignment)
字重(weight)
字体大小(Font size)
中英文的字形高度对比:
tips:同样的字体、字号、字重,中文字形要大于英文。
元素 | 尺寸 | |
---|---|---|
标题(页面或模态) | 16pt | 中等字体粗细 iOS 10+ 页面标题在滚动前为 34pt,滚动后为 17pt |
段落文本,链接 | 16pt | |
次要文本 | 14pt | 颜色也比较浅 |
第三文本、字幕、分段按钮 | 12pt | 跳过二级和三级文本之间的字体大小 |
表单控件(按钮、文本输入) | 16pt | 突出显示中等字体粗细的重要按钮 |
标签栏、操作栏 | 10pt | 不要比这个小 |
ArcUI 内px与rem的尺寸换算关系(x/50) | |||
---|---|---|---|
ArcUI-rem | px | ||
1 | 0.02 | 1px | |
2 | 0.04 | 2px | |
3 | 0.06 | 3px | |
4 | 0.08 | 4px | |
5 | 0.1 | 5px | |
6 | 0.12 | 6px | |
7 | 0.16 | 8px | |
8 | 0.2 | 10px | |
9 | 0.24 | 12px | text-xs |
10 | 0.26 | 13px | |
11 | 0.28 | 14px | text-sm |
12 | 0.3 | 15px | |
13 | 0.32 | 16px | text-base |
14 | 0.36 | 18px | text-lg |
15 | 0.4 | 20px | text-xl |
16 | 0.48 | 24px | text-2xl |
17 | 0.5 | 25px | |
18 | 0.56 | 28px | text-3xl |
19 | 0.64 | 32px | |
20 | 0.72 | 36px | text-4xl |
21 | 0.8 | 40px | |
22 | 0.88 | 44px | |
23 | 0.96 | 48px | text-5xl |
24 | 1 | 50px | |
25 | 1.12 | 56px | |
标签栏文字:9-10pt(中文最小9、英文最小10)
列表项文本
- 主要文本(16pt 常规)
- 主要文本(16pt 常规)和辅助文本(14pt 常规)
- 自定义布局 - 例如主要文本(16pt 常规)、辅助文本(14pt 常规但更轻)和第三文本(154常规但更轻)
当用户尚未滚动(或已滚动,但随后又滚动回顶部)时:
- 尺寸:34pt
- 字体粗细:粗体
- 颜色:#000
- 深色模式颜色:#FFF
- 对齐方式:左
当用户向下滚动时:
- 尺寸:17pt
- 字体粗细:中等
- 颜色:#030303
- 深色模式颜色:#FFF
- 对齐方式:居中
iPhone 应用程序的默认文本样式
iPhone 应用程序上文本的“默认样式”是:
- 尺寸:17pt
- 字体粗细:正常
- 颜色:#000
- 深色模式颜色:#FFF
iPhone 应用程序的辅助文本样式
iPhone 应用程序对任何支持的“辅助”文本都有标准化的样式。
- 尺寸:15pt
- 字体粗细:正常
- 颜色:#8A8A8E
- 深色模式颜色:#8D8D93
iPhone 应用程序的三级文本和字幕样式
任何解释性“标题”都比辅助文本更小、更轻。
- 尺寸:13pt
- 字体粗细:正常
- 颜色:#6D6D72
- 深色模式颜色:#8D8D93
iPhone 应用程序上的最小文本大小
对于任何设计系统,只需定义一个最小尺寸就可以省去很多麻烦。对于 iPhone 应用程序,这是 10pt 处的操作栏标签:
- 尺寸:10pt
- 字体粗细:正常
- 颜色:#999(未选择时)
- 深色模式颜色:#757575(未选中时)