字体
字体的样式、大小、粗细的有序变化会使页面产生一种协调的关系,关于字体的规范包括字号、行高、字重、颜色。字号 #
默认字号为14px
行高 #
行高也就是行间距,是行间的垂直距离,行高的使用会对你的文字易读性产生很大的影响,行高过大过小都不利于用户阅读。一般来说,行高选择为
字符高度的1.5倍是恰到好处的。
不同行高对比示例
行高示例
行高计算公式:行高=字体高度*1.5。
字重 #
字重的存在增强了字体的适用性,一种字体可能用在标题、段落或者是说明性文字,单一的字重可能并不会很好的适应这些。
一般情况,只出现 regular 以及Bold的两种字体重量,分别对应代码中的 400 和 600。
一般情况,只出现 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
一次可对比多种配色
一次可对比多种配色