网站设计的排版概论。

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

选择字体

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

Polaris系统所示）。当然，您也可以决定处理这些事情，这取决于您的系统是否需要支持产品或营销网站（品牌个性可能是更高的优先级）。在做决定时要考虑很多因素，但在个性、表现和屏幕可读性之间找到适当的平衡是个好主意。

选择字体权重和样式

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

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

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

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

您还需要定义这些大小如何跨不同的设备和视口尺寸工作，通常，设备之间最大的尺寸差异发生在更大的显示器尺寸上。你的方法也可能受到你选择的类型单位的影响，从px到rems,

ems，甚至vh/vw单位（基于视口宽度或高度的流体单位）。从技术角度看，这些值中的许多将被编码成易于使用的令牌或变量系统，而不是硬编码，以使它们更容易维护。

这里有一些排印深度指导，让你开始：

一个为更快的网站设计-网站开发切换创建一个可访问的和和谐的排版系统的框架

Priyanka Godbole指导您如何审核排版，确定基本字体大小、标题大小、权重和行高。这10步的过程用于建立印刷系统的PracticeFusion的电子健康记录是适用的，如果你是从零开始，或如果你是完善现有的系统。

版式设计系统

Dan

Mall对网站设计系统中现有的排版分类感到失望，他探索了使设计系统中的排版更加可预测和直观的不同方法。他提倡使用一个数字系统进行规范的预置，每个预置都包含各种属性的组合——大小、主导、重量——这是系统所需要的。这使得在预设级别的任何更改都可以系统地应用于继承该样式的任何组件。

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

排版可以说是任何网站设计中最重要的部分，当我们想到网站的内容时，我们想到的是文字。Sebastiano

Guerriero详细介绍了如何使用CSS全局设置排版设计系统。从选择正确的字体系列到创建由变量控制的模块类型比例，本指南将带您了解为设计系统创建一组和谐的值的基本原理。

数学网络排版

你的数学教授是对的，你应该在课堂上多注意听讲！Brent

Jackson带领我们设计更好的网页排版系统。通过将你的排版系统建立在数学的基础上，你可以在保持一致的阅读体验的同时降低复杂性。从你的口袋到巨大的桌面显示器，网络无处不在，这意味着你的类型系统需要在一致性和灵活性之间取得平衡，Brent的文章向我们介绍了为每个设备设计CSS类型系统的基本原理。

更有意义的排版

蒂姆•布朗（Tim

Brown）向我们展示了一个使用模块化秤从type构建网站设计体验的例子，并解释了他为什么使用特定的数字作为他的秤。这包括选择特定的比例，使用第二个基数来开发一个双链模块比例，并将比例的数字应用于特定的CSS测量。他还研究了确定线高和线间距的战术。