排版——层次结构

排版层次结构是一种用于组织页面上的文本的系统，用于确定其重要性顺序。它还允许读者轻松浏览内容并找到他们正在寻找的内容。

标题是类型层次结构的关键元素。它们有助于将读者的视线引导到一个部分的开始和结束位置，并在内容部分之间提供视觉休息。

开发有效的排版层次结构需要考虑的因素是字体大小、字体选择、重量、颜色、大小写和样式。每一个都在创建高度可读和用户友好的内容方面发挥着重要作用。

字号

字体大小是帮助在页面上创建层次结构的重要工具之一。读者的眼睛通常会先被最大的字体吸引，然后再转向其他元素。一个好的经验法则是“从页面向上工作”并从正文开始，因为它占用的空间最多。然后你可以增加或减少字体大小，以选择最适合其他类型的副本。

在选择字体大小时，请考虑字体的视觉效果、作品的上下文，或者只是根据个人喜好。一个好的标题与正文的比例是 2:1。然而，没有严格的规定——这真的取决于你的风格。您还可以使用类型比例生成器创建类型比例，例如材料设计生成器它提供了一个字体大小和样式系统，可用于不同的文本类别。

精心制作的字体比例创造了一种有凝聚力的排版体验。它们传达字体粗细、大小、字母间距和大小写的层次结构差异。

字重

字重有助于增加与标题的对比，以结构化的方式引导读者浏览页面。指定标头尺寸时，请务必相应地选择您的重量，反之亦然。字体的粗细将帮助您选择最佳尺寸范围以实现最佳可读性。

这里的经验法则是，与常规字体样式相比，您的字体越薄或越粗，它就需要越大。更接近“常规”的重量具有更平衡的行程空间比。如果您为极细的字体使用小尺寸，笔画实际上会在页面或屏幕上消失。极厚的字体也不适合较小的副本尺寸——主要是因为计数器会关闭。

使用超粗或细字体时，请确保它以较大的尺寸位于层次结构中的较高位置。这将提高易读性和可读性。

字体样式

粗体或斜体等类型样式有助于强调标题。格式化标题时，强调的元素应加强层次结构。

将粗体样式应用于更大或不同的字体有助于标题从正文中脱颖而出。斜体可以很好地用于正文中的强调或对比——但在标题中，它们本身并不能很好地发挥作用。但是，与大字体或粗体样式一起，它们可以突出标题并增加可扫描性。

一些专家认为，不应该在标题中使用斜体，尤其是粗体，因为它会造成视觉混乱。尝试各种样式，看看哪种方式更适合您的内容。

类型颜色

颜色是一种强大的类型层次结构工具。它可以引起对某个元素的注意或淡化。例如，红色或深蓝色等明亮的颜色使字体脱颖而出。像灰色这样的柔和颜色会淡化副本并使其感觉不那么重要。

适度使用颜色至关重要。在太多情况下使用太多颜色会造成视觉混乱，并破坏首先使用颜色的目标。

类型案例

全大写文本——所有字母大写的文本——可以有效地吸引注意力并表示重要性。它特别适用于短标题和副标题。同时，全大写文本比普通小写文本更难阅读。

由于我们阅读的大部分文本都是小写的，因此小写对我们来说更熟悉和易读。研究还表明，小写字母的各种形状有助于我们的大脑更容易识别单词。大写使这些形状均质化并留下矩形轮廓。

所有大写字母有时都适用于短于一行的标题、页眉、页脚、标题或其他标签。

不要组合太多元素

使用太多元素来划分标题会造成视觉混乱并增加认知负担。选择不超过 3 种工具来格式化您的标题：字体粗细、大小、样式、颜色或大小写。

有时设计师觉得他们需要使不同的级别标题在视觉上有所区别。这可能表明您使用了太多标题级别。尝试将自己限制在 2-3 个级别——宣布每个主题、子主题、迷你主题和微主题的标题令人筋疲力尽。读者应该能够根据标题确定自己的方向。如果超过三个级别，该任务就会变得混乱。

从你的正文开始

无论您是使用字体比例还是创建自己的尺寸对比，从占用空间最多的元素的尺寸开始——正文。字型设计对文本的易读性和文档的整体外观影响最大。

虽然最佳文本大小取决于字体，但请避免将正文大小设置为小于 16 pt。这是 Web 内容可访问性指南推荐的正文副本的最小尺寸。过去，12 pt 是更常用的起始尺寸，但长时间阅读或在某些设备上阅读可能会让人不舒服。

确定正文字体大小后，确定需要多少层次结构级别。作为一般规则，设计应包括三个：正文、副标题和标题。从那里，考虑是否需要额外的级别，如标题、引语、元信息或其他。

最小标题的大小

创建类型层次结构时，请确保设置至少 4 个标题级别。Web Content Accessibility Guidelines 建议h4 与正文文本大小相同，尽管通过其他样式选择分开。这导致了更具吸引力的层次结构。

但是，如果最佳做法是不超过 3 个级别，为什么还要设计这么多的标题级别呢？在设计师无法完全控制稍后添加的内容的产品中，额外的标题级别可以派上用场。如果将来内容变得更加复杂，可能需要更多的标题级别。

虽然字体刻度带有所有 h1-h6 标题样式，但很少使用 h5 和 h6。它们的主要用例是具有复杂结构的长文本，例如技术和法律文件。您可以设计这些关卡，但请记住，您很可能不需要它们。

较小的类型元素

文本大小是传达排版层次结构所需的关键工具之一。标题应比正文更突出，正文大小应大于次要文本大小。辅助文本元素包括标题、次要标签、署名（文章作者的信用额度）和其他元信息。

辅助文本应至少比正文小 2 px，但仍易于阅读。大小对比应该足够强，以免用户将次要信息与常规文本混淆。为了进一步推动您的观点，请添加颜色对比——例如，使用较浅的灰色阴影。这将更清楚地传达次要重要性

以上内容为转载