目录

概述

字体原则

字体

字号

字重

颜色

行间距

段间距

概述

文字是信息传达的工具，字体是的外在形式特征。我们对字体进行统一的规范，力求在各个系统下都有最佳的展示效果。体现友好、稳定、专业的特性。

衬线字体：在笔画开始、结束的地方有额外的装饰，而且笔画竖线比横线粗。衬线体在传统印刷中能带来更佳的可读性。

无衬线体：没有这些额外的装饰，而且笔画的粗细差不多。无衬线体给人一种轻松的感觉，看起来更干净，更符合扁平化的设计。比较适合屏幕端的显示。

原则

对比：使强的更大、弱的更弱。使用字号、字重、颜色等方式使信息层级更加清晰、对比更加明显。

克制：使用统一的字体。最多两种字重。以避免层级过于微妙和繁多。

字体

优先使用系统默认的字体。苹果系统的中文字体默认使用苹方，Windows系统中默认使用Microsft YaHei，英文和数字可以使用Arial。如果使用特殊字体需要和前端沟通，看电脑和浏览器是否能够兼容、是否购买字体商用权。

字号

采用14号字体为主字号，使文字更加清晰、易读，在繁多的信息里阅读起来更加轻松，增加文字的可读性，减少用户阅读时的疲惫感。

参考AntDesgin的研究“我们基于电脑显示器阅读距离（50 cm）以及最佳阅读角度（0.3）对 Ant Design 的主字体进行了一次升级，从原先的 12 上升至 14，以保证在多数常用显示器上的用户阅读效率最佳”

字重

苹方提供了6种字重。微软雅黑有3种字重。基于对比、克制的原则，采用 regular 、Blod 的两种字体重量，

颜色

共有三种颜色：主文字颜色、辅助颜色、不可点击/提示框文字。

我们在文字的黑色里添了一下品牌色的蓝色，使颜色有了倾向，也更耐看。参考了 WCAG的标准。我们的主文字和背景的对比度是14：1  （AAA级）

行间距

上下行文字的基线间的距离，即图中两条红线间的距离。 而并非文字高度+上下间隔的高度。虽然这两种定义并不影响最终结果，但还是区分一下比较好。

西文的基本行高通常是字号的1.2倍左右，而中文因为字符密实且高度一致，所以行高设定为文字的1.5倍。

段间距

亲密性的原则，段落之间的间距应该大于段内文字之间的距离，通常空一行文字。

段间距>行间距>字高

下篇更新【设计原则篇】~~

Powered by Froala Editor