排版

排版基于两种字体和一组样式,这些样式包括字体、字重、字号和行高。

默认使用两种字体:Inter 用于标准排版和标题,Menlo 作为等宽字体。Inter 可在 Google Fonts 上找到,Menlo 则预装在某些操作系统中。您可以根据品牌指南更改这些字体。

字体参数

字号和行高

行高决定了基线之间的距离,字号则确定了字体的大小。这两个参数决定了文本的可读性。

字重

字重针对文本样式(Body 和 Caption 组的默认值为 400)和显示样式(Subheader、Header 和 Display 的默认值为 600)进行指定。默认情况下,显示样式具有更重的字重。但可能存在例外情况。

样式组

Body

用于所有类型的文本。默认设置为 Inter (400)。

Body

Body 1 Short 具有较小的行高,用于较窄的内容块(宽度 up to 300–400px)。

Caption

所有可用字体中最小的字号。用作图注、脚注和任何附加信息的样式。默认设置为 Inter (400)。

Caption

在信息密度至关重要的界面中,最常用于标题。默认设置为 Inter (600)。

Header

Subheader

可作为副标题,或与适当的正文样式搭配使用以突出重点。默认设置为 Inter (600)。

Subheader

Display

适用于显示比信息密度更重要的场景,例如在沟通设计中。默认设置为 Inter (600)。

Display

Code

用于在单独的块中显示代码。默认设置为 Menlo。

Code

Code Inline

用于在纯文本中嵌入代码。使用较小的行高进行光学补偿,并与纯文本对齐。更改字体时,请确保行内代码显示正确。默认设置为 Menlo。

Code Inline

上一页颜色
下一页圆角