TPower Design

Appearance

Return to top
On this page

字体

字体是体系化界面设计中最基本的构成之一。

我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。基于「动态秩序」的设计原则，结合了自然对数以及音律的规则得出的，再经过了大量后台产品验证之后，推荐给大家。在中后台视觉体系中定义字体系统，我们建议从下面四个方面出发：

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

字体家族

字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。


@font-face {
  font-display: swap;
  font-family: 'SourceHanSans';
  src: url('https://static-state.trinapower.com/static/fonts/pc/SourceHanSans_CN-regular.OTF')
    format('opentype');
}

另外，在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，使其为等宽字体。

font-variant-numeric: tabular-nums;

字阶与行高

字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。

在TPower Design的视觉体系中，我们建议的主要字体为 14，与之对应的行高为 22。 文字行高会设定为字号的1.5倍。段落行高在其之上加2px。建议在一个系统设计中（展示型页面除外），字阶的选择尽量控制在 3-5 种之间，保持克制的原则。

字重

字重的选择同样基于秩序、稳定、克制的原则，多数情况下，只出现 regular、medium、semibold 的3种字体重量。