web设计规范05-字体规范

设计便利签

西安/设计爱好者/3年前/2992浏览

版权

web设计规范05-字体规范

设计便利签

在网页设计中,科学的文字系统将大大提升用户的阅读体验及工作效率。

概述

字体是体系化界面设计中最基本的构成之一,网页文字将与网页中的界面系统相结合,从而形成一个可供用户操作的产品系统。用户除了阅读,还需要进行一系列与界面系统产生的交互行为来完成工作。因此,在界面设计中,科学的文字系统将大大提升用户的阅读体验及工作效率。

为了让字体有规律和韵律、实现像素对齐、具备和谐美观的大大小对比、明确内容主次关系。本文结合Ant Design、TDesign字体系统,为大家整理了WEB视觉体系中的字体规范,我们将通过以下五个维度来认识文字系统:

1.字体家族 2.字阶 3.行高 4.字重 5.字体颜色

#01字体家族

字体选择没有过多讲解的内容,设计稿默认为无衬线字体(黑体、微软雅黑、苹方体等),另外需要了解font-family的属性,能够和前端很好的沟通即可。

font-family是用于某个元素的字体族名称或/及类族名称的一个优先表。如果浏览器不支持第一个字体,则会尝试优先表中的下一个。不同主流的操作系统及浏览器的默认字体不尽相同。从西文到中文,分别对个平台做一个基础的降级,这是针对系统字体规范font-family的基本思路。

这里需要注意的是,不声明字体时,浏览器渲染的是「默认字体」,不一定是「系统字体」例如:Windows7浏览器默认渲染的是中易宋体(Slmsun),而非系统字体微软雅黑(Microsoft YaHei)。

数字字体选择-等宽字体：在展示表格数据时,数字应该使用等宽字体。表格数字相比普通字体的数字能实现更好的对齐,在获取数据时用户能更快速便捷的扫描和对比。表格数字可以说是特殊字体,使用腾讯云数字字体TCloud Number、DIN字体等,都可以满足字符等宽的需求,并在缩放中保持稳定可见的粗细。

什么是等宽字体?

等宽字体(Monospaced)是指字符宽度相同的电脑字体,与此相对,字符宽度不尽相同(字符之间留白区域相同)的字体称为比例字体(Proportion:al)。

等宽字体在表格中的应用,能够直观的看到数字位数之间的对比。

另外,在AntDesign中,关于数字字体还提到了font-variant-numeric属性,将font-variant-numeric设置为tabular-nums ,使其为等宽字体。这个作为设计师了解即可

#02字阶

(1)确认主体字(正文字)字号

我们基于电脑显示器阅读距离(50cm)以及最佳阅读角度(0.3),当主体字为14px时,在多数常用显示器上的用户阅读效率最佳。

(2)设置字阶规范

字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同大小的字体。

字阶定义一级字阶和二级字阶,一级字阶常用于基础组件的设计中,二级字阶用于标题及特殊场景的应用。

第一字阶(10、12、14、16)

每个字号以2px增长。桌面面端中,正文字号我们设置为14px,最小字号是12px,而10px则作为移动端的Base字号号,将桌面端与移动端字阶统一处理,让两端文字与设计系统更一致,更标准地调控。

第二字阶(20、24、28、36、48、64)

为了减少字阶区间里的步数,在这个范围中的文字,多为模块超大标题,展示型文案,以数字数据展示为主。通过+4,+8,+12,+16的步数增长规律,满足文字层级跨度大的展示诉求,也减少没有必要的小步数字号。

字阶规范应用:

建议在一个系统设计中(展示型页面除外),字阶的选择尽量控制在3-5种之间,保持克制原则。

#03行高

字阶和行高决定着一套字体系统的动态与秩序之美,行高可以从理解为一个包裹在字体外面的无形的盒子。

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

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

行高是为了让上一行的文字和下一行的文字之间有呼吸的空间,基于呼吸空间一致,让不同字号之间的间距都保持相同,通过逻辑得到这样一个公式:「行高=字号+n」,8作为变量正好同时满足与「14px&16px」常用的1.5倍行高保持一致,总体文字间隙稳定呼吸,行高空间较一致得出计算公式:「行高=字号+8」