字体
Semi Design 对中文与英文字体使用不同的字体。中文字体由于体积比较庞大,所以选择使用了系统默认中文字体。而英文字体,我们选用 Inter 作为主要字体。
语言 | 字体 |
---|---|
中文 | 跟随系统字体(MacOS 为 PingFang SC,Windows 为微软雅黑) |
English | Inter |
等宽字体 | Inconsolata GO NF |
Web 中,我们可以使用 CSS 的回退能力正确地设置字体:
对于数字而言,有时候我们需要更方便地比较数字的位数,这就要求数字每一位的宽度都相等。为了实现这一目的,我们可以设置 CSS 的 font-feature-setting 属性:
字阶
字阶决定了字体排版的整体韵律。正确地运用字阶级别能够让复杂的信息层级更加清晰,让文本更易读、更友好。
中文字体
级别 | 字体规格 | 例子 |
---|---|---|
Small Text | 12/16 | 始终像公司创业第一天那样思考 |
Paragraph | 14/20 | 始终像公司创业第一天那样思考 |
Heading 6 | 16/22 | 始终像公司创业第一天那样思考 |
Heading 5 | 18/24 | 始终像公司创业第一天那样思考 |
Heading 4 | 20/28 | 始终像公司创业第一天那样思考 |
Heading 3 | 24/32 | 始终像公司创业第一天那样思考 |
Heading 2 | 28/40 | 始终像公司创业第一天那样思考 |
Heading 1 | 32/44 | 始终像公司创业第一天那样思考 |
英文字体
级别 | 字体规格 | 例子 |
---|---|---|
Small Text | 12/16 | Always think like Day 1 |
Paragraph | 14/20 | Always think like Day 1 |
Heading 6 | 16/22 | Always think like Day 1 |
Heading 5 | 18/24 | Always think like Day 1 |
Heading 4 | 20/28 | Always think like Day 1 |
Heading 3 | 24/32 | Always think like Day 1 |
Heading 2 | 28/40 | Always think like Day 1 |
Heading 1 | 32/44 | Always think like Day 1 |
字重
分为常规体和粗体,分别对应 400 和 600。