组件

字体

字体的样式、大小、粗细的有序变化会使页面产生一种协调的关系,关于字体的规范包括字号、行高、字重、颜色。

字号 #

默认字号为14px

行高 #

行高也就是行间距,是行间的垂直距离,行高的使用会对你的文字易读性产生很大的影响,行高过大过小都不利于用户阅读。一般来说,行高选择为 字符高度的1.5倍是恰到好处的。
不同行高对比示例
行高示例
行高计算公式:行高=字体高度*1.5。

字重 #

字重的存在增强了字体的适用性,一种字体可能用在标题、段落或者是说明性文字,单一的字重可能并不会很好的适应这些。
一般情况,只出现 regular 以及Bold的两种字体重量,分别对应代码中的 400 和 600。
一般标题和需要强调的字体使用Bold样式。

颜色和对比度 #

字体的对比度应遵循 WCAG 的标准 Web Content Accessibility Guidelines (WCAG) 2.0
文字应保持最小对比度至少为4.5:1,比例为7:1是优选的。
浅色背景以及深色背景字体颜色示例。
图片背景字体颜色示例。

对比度检测工具推荐 #

WebAIM’s Color Contrast Checker
可以在线实时调整颜色,观察对比度是否满足要求。

Tanaguru Contrast-Finder
除了显示对比度以外,如果你的颜色不符合标准,还会向你推荐一些达标颜色。

EightShapes Contrast Grid
一次可对比多种配色