Figma中的版式

版式是早期建立的设计系统中最重要的方面之一——考虑一下您将通过字体向用户传达多少信息。类型可以占任何给定屏幕的 85-90%。版式通常是您想要掌握的基本组件之一，因为它需要与图标和 UI 控件等其他元素协调工作。您的行高甚至可能会影响许多其他结构元素，例如间距和网格。以下是您需要考虑的几个关键领域。

选择字体

选择字体时需要考虑很多因素，尤其是在屏幕上使用时。您可能还需要与品牌/营销团队进行跨职能合作，以适应您品牌的字体并确定它们如何适合您的系统。字体可以是另一个接触点，有助于在整个数字体验中巧妙地传达正确的基调和个性。如果您的品牌有非常独特的字体，不适合扩展阅读或小尺寸，您可以选择将其保留用于不常用的元素（例如标题）的显示尺寸。在这种情况下，您可能需要将其与更清晰的字体配对，以应对以较小尺寸显示的大部分版式。如果性能是一个关键目标，Shopify Polaris 系统）。当然，您也可能决定处理这些事情，具体取决于您的系统是否需要支持产品或营销网站（品牌个性可能是更高优先级）。您的决定需要考虑很多因素，但最好在个性、性能和屏幕易读性之间找到适当的平衡。

选择字体粗细和样式

考虑一下在最复杂的屏幕中创建简洁的层次结构需要多少权重或变化。使用粗体版本或精简版本在哪里有意义？保持字体变体列表简短通常是有好处的，因为加载整个字体系列的每个粗细可能不是很高效（并且许可成本更高）。您在 UI 中使用某些样式的频率如何？例如，如果您有一两个非常小的斜体应用程序，请考虑权衡加载额外的网络字体与利用浏览器渲染斜体的利弊。另外，寻找机会通过增加字体大小而不是添加额外的字体粗细来在层次结构上实现相同的效果。

字体大小、行高和响应能力

一旦您了解了正在使用的字体，这可能就是您将花费最多时间进行工作的区域。字体大小和行高密切相关，并且通常受到或将影响设计中使用的一些底层网格。许多设计师会首先建立基本字体大小（通常是正文最常用的大小），并从中确定合适的行高。1.5 倍字体大小的行高是作为起点的一般经验法则。许多设计师将使用行高作为建立基础基线网格的基础，所有尺寸都映射到或均等划分到该网格中。这里的系统方法将帮助您定义系统的其他特征，例如图标大小、边距、填充和间距值以及 UI 组件的一般大小。

当您开始处理这些字体和行高配对时，还要考虑您需要多少尺寸，以及哪些尺寸将映射到特定的粗细或样式。确保您能够容纳所需的所有应用程序，包括从帮助文本和表单标签到正文和副标题，再到标题的所有内容。

您还需要定义这些尺寸如何在不同的设备和视口尺寸上工作。通常，设备之间最大的尺寸差异会发生在较大的显示尺寸上。您的方法也可能受到您选择的类型单位的影响，从 px 到 rems、ems，甚至 vh/vw 单位（基于视口宽度或高度的流体单位）。从技术角度来看，其中许多值将被编入易于使用的令牌或变量系统，而不是硬编码，以便随着时间的推移更容易维护。

以下是一些排版深入指南，可帮助您入门：

一个框架，用于创建可访问且和谐的排版系统，以实现更快的设计开发交接

Priyanka Godbole 将引导您了解如何审核排版、确定基本字体大小、标题大小、粗细和行高。如果您从头开始或正在完善现有系统，则用于为 PracticeFusion 电子健康记录建立排版系统的 10 个步骤流程均适用。

设计系统中的版式

Dan Mall 对设计系统中现有的版式分类法感到失望，因此探索了不同的方法，使设计系统中的版式更加可预测和直观。他提倡使用数字系统进行规范预设，每个预设都包括系统所需的属性（大小、行距、粗细）的任意组合。这使得预设级别的任何更改都可以系统地应用于继承该样式的任何组件。

创建您的设计系统，第 1 部分：版式

版式可以说是任何网站最重要的部分。当我们思考网页的内容时，我们会想到文字。Sebastiano Guerriero 详细介绍了如何考虑使用 CSS 全局变量来设置版式设计系统。从选择正确的字体系列到创建由变量控制的模块化字体比例，本指南将引导您了解为设计系统创建一组和谐值的基础知识。

数学网页排版

你的数学教授是对的，你应该在课堂上更加集中注意力！布伦特·杰克逊带领我们设计更好的网络排版系统。通过将排版系统植根于数学，您可以降低复杂性，同时保持跨设备尺寸的一致阅读体验。从您的口袋到巨型桌面显示器，网络无处不在，这意味着您的类型系统需要在一致性和灵活性之间取得平衡。Brent 的文章向我们介绍了为每种设备设计 CSS 类型系统的基础知识。

更有意义的排版

蒂姆·布朗（Tim Brown）向我们介绍了一个使用模块化比例尺从类型中构建网络体验的示例，并解释了为什么他使用特定的数字来表示他的比例尺。这包括选择特定的比例、使用第二个基数来开发双链模块化量表，以及将量表的数字应用于特定的 CSS 测量。他还深入探讨了确定行高和行距的策略。