排版是网站设计系统中最重要的方面之一，要尽早建立起来，要考虑通过字体与用户交流的信息有多少。类型可以占任何给定屏幕的85-90%。网站设计的排版通常是你需要掌握的基本组件之一，因为它需要与其他元素如图标和UI控件协调工作。你的线条高度甚至会影响许多其他的结构元素，比如间距和网格。以下是你需要仔细考虑的几个关键方面。


选择字体

      在选择字体时要考虑很多因素，特别是在屏幕上使用的时候。您可能还需要与品牌/营销团队进行跨职能合作，以适应您的品牌的字体，并确定如何将它们融入您的系统。字体可以是另一个触点，帮助你在整个数字体验中微妙地传达正确的基调和个性。如果你的品牌有一个非常独特的字体，不适合扩大阅读或小尺寸，你可以选择保留它的显示大小元素，如标题，使用不太频繁。在这种情况下，您可能想要将它与一个更清晰的字体配对，以显示更小的字体。如果性能是一个关键目标，那么许多网站设计系统将经常利用不同平台的系统/本机字体堆栈来避免加载网站设计体（如Shopify Polaris系统所示）。当然，您也可以决定处理这些事情，这取决于您的系统是否需要支持产品或营销网站（品牌个性可能是更高的优先级）。在做决定时要考虑很多因素，但在个性、表现和屏幕可读性之间找到适当的平衡是个好主意。


选择字体权重和样式

      考虑在最复杂的屏幕中创建简洁的层次结构需要多少权重或变量，在什么情况下使用加粗的版本和压缩的版本是有意义的？保持这个字体变体列表的简短通常是有好处的，因为加载整个字体家族的每个部分可能不是很有效（而且获得许可的成本更高）。您在UI中使用特定样式的频率是多少？例如，如果您有一个或两个非常小的斜体应用程序，请考虑权衡加载额外的webfont和利用浏览器呈现的斜体的利弊。此外，寻找机会，您可以通过增加类型大小而不是添加额外的字体权重来实现对层次结构的相同效果。


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

      一旦你知道了你使用的字体，这可能是你花费最多时间的地方。字体大小和行高是密切相关的，并且通常会受到设计中使用的一些底层网格的影响。许多网站设计师会从建立基本字体大小（通常是最常用的字体大小）开始，然后从中确定合适的行高。以1.5x字体大小的行高作为起点是一个普遍的经验法则。许多网站设计师会使用行高作为基础来建立一个基础的基线网格，所有的尺寸都被映射到这个基线网格中，或者平均地划分到这个基线网格中。这里的系统方法将帮助您定义系统的其他特征，如图标大小、空白、填充和间距值，以及UI组件的一般大小。

      当您开始处理这些字体和行高匹配时，还要考虑需要多少大小，以及哪些大小将映射到特定的权重或样式。确保您适应了所有需要的应用程序，包括从帮助文本和表单标签、正文副本和副标题到标题的所有内容。

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