2021年响应式排版规模及比例指南

您网站设计的真正响应能力不仅是一个可扩展到每个设备的框架，还需要将排版调整到最佳可读性。

为了改变网站上的大小和比例，将调整响应式排版。虽然这是技术上的答案，但还有一种更重要的设计方法，因为仅仅改变文本元素的大小并不总是足够的。

让我们深入研究响应式排版的最佳实践、指南和工具，以帮助您创建任何尺寸的优秀字体。

可靠的响应式排版计划将确保您的内容可以跨设备阅读。它确保您已经为交互、大小和缩放制定了一组规则，这将有助于跨设备呈现所有内容。

对于大多数网站来说，这几乎可以减少到桌面版和移动版两种尺寸。(过去几年，用于一般网页浏览的平板电脑整体使用量急剧下降。）

在宽屏幕上看起来很棒的字体和比例在垂直方向的手持屏幕尺寸上可能无法很好地呈现。

现在是挑战。垂直方向的手持屏尺寸可能无法很好地呈现宽屏上看起来很棒的字体和比例。这可以决定你的字体选择以及你如何规划网站。(否则，您可能需要在桌面和移动设备之间切换字体，不建议这样做。）

在规划设计时，将排版元素作为整个框架的一部分很重要，这样你将来就不会遇到奇怪的响应性排版挑战。(例如，超宽字体可以在移动屏幕上呈现出独特的可读性挑战。）

响应式排版设计注意事项包括：

排版选择：首先，在小屏幕上使用看起来很棒、可读性很好的字体。然后在更大的屏幕上测试。

限制类型选项：在加载时间方面，较小的调色板更容易管理，重量更轻。

以防万一：如果您想要的字体不能加载（可能设备不喜欢它或 CDN 服务器已关闭)，请允许使用非常常见的替代选择。（Arial 是 sans serif 流行字体的后备选择。）

基于内容的设计尺寸和比例：可读排版可以依赖于其他内容，如字体选择。文本元素的比例和大小通常根据一次渲染的文本数量和屏幕上的内容类型而有所不同。

注意行高：行间的一点额外空间可以提高移动设备的可读性。空间太大和太小之间有微妙的平衡。对于较小尺寸，150% 或 1.5em 行高可能是一个很好的起点。

字体类别：设计师确实愿意使用更多的字体变体——衬线字体、实验字体等——一般做法。当屏幕较小或用户可能主要使用暗模式时，这些可能会带来一些挑战。如果你走这条路，尽快测试类型选择，以确保可读性。

大多数设计师更喜欢百分比或 em 和 rems。

为响应式设计创建字体需要考虑大小和比例。每个设计师可能对他们想要使用的尺寸单位有不同的看法。

最受欢迎的尺寸单位包括：

像素：数字体大小的常用符号表示绝对数字

要点：更多来自印刷品的结转尺寸，网上不常见

Ems：与父字体大小相比，调整大小

Rems：继承根风格的大小调整

百分比：根据父亲风格的百分比变化调整尺寸

大多数设计师更喜欢百分比或 em 和 rems。使用此模型，您可以从基本尺寸(如文本)开始，然后从那里调整尺寸。使用此模型，您可以从基本尺寸(如文本)开始，然后从那里调整尺寸。

它使数学更容易(1)rem 大约为 10 像素)，只能通过改变默认字体大小进行全面调整。

默认大小怎么样？

正文一般为 16px 到 18px 或 1.6rem 到 1.8rem(移动设备为 14px 到 16px）。然后你可以用你喜欢的比例来调整所有的内容。

如果您调整桌面和移动设备的文本或其他默认字体大小，其余部分将由比例尺处理。

字体比例决定了在基本字体或默认字体中植根的字体大小。假如你喜欢百分比或 1em(如果这是你的首选单位)，用这种方法，你的基本尺寸是 100%。

然后选择比例和如何跟随比例 H1 到 H6 的 CSS 位置相关，以此类推。

有一些常见的排版比例可以创造不同的和谐感，比随机分配值到字体大小更容易数学计算。

非常适合大屏幕，尺寸之间有很多变化。由于尺寸的不同，H1 和文本库会产生很多戏剧性。

这些量表包括(数字是变化率):

增强四，1.414

完美五分之一，1.500

黄金比例，1.618

这是大多数类型比例下降的地方，也是大多数屏幕尺寸的安全区域。它非常适合具有大量文本内容的设计。

这些量表包括：

小三，1.200

大三度，1.250

完美第四，1.333

最小可变比最适合作为标识符的较小类型元素。您可以在基于仪表板的应用程序、电子商务列表或基于网格的元素中看到这种类型的规模。

这些量表包括：

小二，1.067

大二，1.125

在创建排版比例时，如果你不想自己计算数学或预览尺寸的变化，那么就有一些伟大的资源和工具可用。

视觉比例计算器(如上所示)

纯 CSS 中间的响应字体

MDN 字体大小属性

排版比例计算器

计算器响应字体大小简单

就网络排版而言，下一步要考虑的是内在类型。今年早些时候，CSS-Tricks 的 Scott Kellum称其为"未来的网络文本风格"。

最简单的解释是，内在排版失去了独特的文本风格；而是根据文本与区域的比例定义样式。这样做的原因是为了增加灵活性，编写更简单的代码。

结果是文本"自我调整"它的容器不连接到视口。您可以在适用于整个设计的比例范围内拥有更多的预设尺寸。差异几乎是无限的。

您可以使用Typetura 尝试工具。

排版设计是任何网络项目中最重要的元素。通过考虑如何呈现文本以及它在各种尺寸下的阅读方法，您正在为每个人创造更有价值和更容易访问的网络体验。

它从坚实的排版基础开始，知道如何调整网站查看者，无论他们如何与设计互动。