排版

印刷术通过创建清晰的视觉模式来帮助建立层次结构和传达重要内容。

由乐高积木构成的字母插图

使用排版

一系列的三个插图代表了这些原则，使其可读性强，适应性强，强化了信息

1.让它可扫描

保持相关文本对齐，并靠近在一起，以创建可视分组。对于大多数语言，大部分文本应该左对齐。

2.根据设备大小和与商家的距离调整文本

因为小屏幕通常在一个手臂的距离，我们可以减少大标题的大小，增加重要的正文文本的大小。

3.创建视觉层次结构

将字体的重量、大小和颜色组合在一起以创建层次结构。使用较浅的颜色或字体大小来淡化次要内容。

字体设计要点

在使用字体进行设计时，我们可以结合使用字体大小、粗细、颜色和空间来确保页面具有很强的层次性和可扫描性。通过理解基本原理，您将能够更好地将类型应用于UI。

使用边界框

边界框是文本的垂直高度，由文本的行高定义。line-height的值对于确保文本对齐到4px网格非常重要。请参考个别类型样式以获得指定的高度。

显示如何将边界框应用于文本元素的图像

使用基线

基线是字母所在的假想线。将文本水平对齐到基线，以获得简单干净的外观。

显示基线及其如何应用于文本元素的图像

在某些情况下，在单行上使用多个文本大小来建立元素的层次结构是有意义的。对齐文本的基线，而不是中心，这样看起来更和谐。

一个将文本元素对齐到基线的例子

线的长度

行长描述内容的宽度。对于较长的正文文本，建议行长在40到60个字符之间。

显示文本理想行的长度的图表

颜色

颜色可以用来增加对比和加强文本之间的层次。

例如，区分标题和副标题的一种方法是应用——p-text-color对标题，和——p-text-subdued到副标题。次要信息使用较浅的颜色可以在文本之间形成对比，即使文本大小和重量相同，也有助于加强层次结构。

显示如何使用颜色在文本元素中添加层次结构的图像

空间

我们可以通过将相关信息分组在一起来帮助商家浏览UI。一种方法是使用空格来创建页面上元素之间的关系。

不明确的间距会造成混淆，使人难以理解内容。

展示如何使用空间来创建文本元素之间的层次和关系的图像

令牌	像素值	快速眼动值
`p -字体大小- 700`	40	2.5
`p -字体大小- 600`	32	2
`p -字体大小- 500`	28	1.75
`p -字体大小- 400`	24	1.5
`p -字体大小- 300`	20.	1．25
`p -字体大小- 200`	16	1
`p -字体大小- 100`	14	0.875
`p -字体大小- 75`	12	０．７５

式风格

北极星式风格分为两类:标题和正文。每个都有一个默认的变量集以及一组选项，以允许用户界面内的灵活性和广泛的应用程序。他们使用一个比例，所以他们可以适用于任何屏幕尺寸。

体风格

正文样式用于组件和文本块中。

展示如何应用身体风格的图片

标题样式

标题样式用于在页面上创建各种层次结构。这些款式的大小和重量各不相同。混合使用这两种方法可以帮助区分内容，并在页面中引导商家。

headingXl-heading4xl样式通常用于数字和商人旅程中的关键时刻。作为屏幕上最大的文本，在单个页面中少量使用这些样式。这些风格应该将商家的注意力吸引到重要的关键信息上。

显示如何应用标题样式的图像

headingXs-headingLg样式最常用于卡片、节或页标题。

显示如何应用大标题样式的图像

响应性风格

大标题样式，headingLg-heading4xl，是响应性的，并将在不同的断点改变大小。

小标题样式，headingXs-headingMd，并且除非指定了断点，否则正文样式将保持相同的大小。您可以在需要时选择在特定的断点上调整这些样式的大小。例如，您可能需要在较小的屏幕上增加重要正文文本的大小。

显示标题样式如何基于断点更改的图像

大写风格

设计语言不再支持大写字体。我们建议使用文本组件应用可视化层次结构。与您的团队一起确定最适合您的用例的类型样式。

字体堆栈

我们使用字体堆栈，以适应其运行的操作系统，如macOS, iOS, Windows, Android或Linux发行版。

显示默认iOS、Mac、Windows、Android和Linux字体选择的图表

苹果设备将显示旧金山
Android设备将显示Roboto
运行Windows的设备将显示出来Segoe UI
运行Linux的机器将显示任何正在运行的发行版的默认sans-serif字体

这个字体堆栈确保所有浏览器都可以加载特定于平台的字体:

           
            
             
              
               例子
             
             
              
             
            
            -苹果-系统，BlinkMacSystemFont，圣旧金山，Segoe用户界面，Roboto，海维提卡莱纳，无-衬线

将此添加到您的CSS预加载系统字体，并设置浏览器的易读性:

           
            
             
              
               例子
             
             
              
             
            
            超文本标记语言｛加载系统字体*/字体类型：苹果系统，BlinkMacSystemFont，旧金山，Segoe UI，Roboto，Helvetica Neue，无衬线；/*使类型渲染看起来更清晰*/-webkit-font-smoothing：抗锯齿；-moz-osx-font-smoothing：灰度；/*禁用Safari小文本的自动放大功能*/text-size-adjust：One hundred.％；/*启用字距和可选连缀*/文本渲染：optimizeLegibility；｝／***表单元素使用操作系统默认呈现，所以必须特别声明font-family继承* /按钮，输入，optgroup，选择，文本区域｛字体类型：继承；｝

排版