字体是体系化界面设计中最基本的构成之一。
优秀的字体系统首先是要选择合适的字体家族。XSKY 的字体家族中优先使用系统默认的界面字体,同时提供了一套利于屏显的备用字体库,来维护在不同平台以及浏览器的显示下,字体始终保持良好的易读性和可读性,体现了友好、稳定和专业的特性。
另外,在中后台系统中,数字经常需要进行纵向对比展示,我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums,使其为等宽字体。
大小为 14px,以保证在多数常用显示器上的用户阅读效率最佳。
根据产品需求及设计需求,定义了 6 个不同尺寸的字体以及与之相对应的行高。
Font Size | 12 | 14 | 16 | 18 | 26 | 34 | ... |
---|---|---|---|---|---|---|---|
Light Height | 20 | 22 | 24 | 26 | 34 | 42 | ... |
字重的选择同样基于秩序、稳定、克制的原则。多数情况下,只出现 regular 以及 medium 的两种字体重量。
文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求,我们参考了 WCAG 的标准,将正文文本、标题和背景色之间保持在了 4.5:1 以上的 AA 级对比度。
一级色值:#3F3F44
二级色值:#646369
三级色值:#A2A3A9
文字链:#6B58C4
白色:#FFFFFF
状态色:健康(#30B65F)、警告(#FFB71C)、错误(#F24542)、紧急(#B90A38)、进行中(#448AFF)