字体

字体是文字信息的载体，通过场景约束来统一字号的使用，在桌面&移动端建立相应的对应关系和一致性。我们建议从下面五个方面出发：

1. 字体
2. 字号
3. 行高
4. 字重
5. 段落间距

字体

我们以字体群组的方式提供系统设计和开发上的参考建议。推荐优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性。

@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';

在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，使其为等宽字体。

字号

考虑到通用性和包容性，在字号的选择上，我们将主字号定义为14px，并提供了不同层级的字号以适配不同信息层级的展示需求。

• 最小可识别文字尺寸：桌面端：12px / 移动端：10px
• 字体层级：区分文本主副层级，字号差距需保持2-4px

行高

关于文字的行高 line-height，在国际无障碍网页使用标准中给出了明确的指引 line-height=font size*1.5

在验证过程中发现，固定 1.5 倍的行高比例，在当字号越大的时候，行高就会越大，在大号文字的展示上信息的连贯明显得出现割裂，尤其在多种字号及元素混排的场景中。

为了让文字之间有呼吸的空间，我们通过逻辑得到这样一个公式：行高 = 字号 + n，8 作为变量时， 14px & 16px 这 2 个常用字号行高正好同时满足与 1.5 倍比例，因此比较推荐的计算公式为 line-height = font-size + 8。

字重

字重是重要排版的变量，可以增强层次结构和重要内容区分。

面对复杂的中后台场景，在 Windows 系统下 font-weight 如果使用小于 600 默认显示为常规体，而在macOS 系统中可以使用400、500、600区分，综合考虑复杂场景显示效果，推荐在设计时只使用「400、600」两种字重配置效果。

段落间距

段落文本中文字的可读性，由字号、行高和段间距的变量决定。在文字较多的内容中，段落与段落之间需要有一定的间距以保证最好的显示效果。根据 WCAG 中的 AAA 标准，段落间距至少为字体大小的 1.5 倍。正文 14px 字号对应段间距为 22px。