2022年响应式字体大小和比例指南

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

 

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

 

让我们深入了解响应式排版最佳实践、一些指南，以帮助您创建任何尺寸的出色字体。

响应式排版入门

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

 

好处是对于大多数网站来说，这几乎可以归结为两种大小：桌面和移动。（在过去几年中，用于一般网页浏览的平板电脑总体使用量急剧下降。）

 

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

 

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

 

响应式排版设计考虑因素包括：

排版选择：首先从一个看起来很棒并且在小屏幕上阅读良好的字体开始。然后在更大的屏幕上进行测试。

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

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

基于内容的设计大小和比例：可读的排版可以像字体选择一样依赖于其他内容。文本元素的比例和大小通常会有所不同，具体取决于一次呈现多少文本以及屏幕上的内容类型。

注意行高：行之间的一点额外空间可以增强移动设备的可读性。太多和太少的空间之间存在微妙的平衡。对于较小的尺寸，150% 或 1.5em 的行高可能是一个不错的起点。

字体类别：设计师已经真正开放使用更多的字体变体——衬线、实验性等——作为一般做法。当用户可能更主要使用暗模式的小屏幕或屏幕上时，这些可能会带来一些挑战。如果您走这条路，请尽早测试类型选择以确保可读性。

 

响应式字体大小超越像素

 

 

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

 

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

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

磅：更多是印刷品的结转，用于确定在网上不太常见的尺寸

Ems：相对于父字体大小的大小

Rems：继承根样式的大小

百分比：根据父样式的百分比变化调整大小

 

大多数设计师避免使用绝对数字单位，而更喜欢百分比或 ems 和 rems。使用此模型，您可以从基本尺寸（例如正文）开始，然后从那里调整尺寸。

 

它可以使数学更容易（1rem大约为 10px），并且只需更改默认字体大小即可进行全面调整。

 

这看起来像默认大小？

 

正文通常为 16px 到 18px 或 1.6rem 到 1.8 rem（移动设备为 14px 到 16px）。然后你可以使用你喜欢的比例来相应地调整所有内容。

 

如果您为桌面和移动设备调整正文文本或其他默认字体大小，则比例将负责其余部分。

 

找到合适的比例

 

 

类型比例决定了在基本字体或默认字体中的更大或更小字体。使用这种方法，如果您喜欢百分比或 1em（如果这是您的首选单位），则您的基本尺寸为 100%。

 

然后选择比例以及该比例如何与从 H1 到 H6 的 CSS 位置相关，依此类推。

 

常见的排版比例可以创造出独特的感觉和和谐，比随机分配字体大小的值更容易用数学计算。

 

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

 

 

它首先要为排版打下坚实的基础，并了解如何为网站查看者进行调整，无论他们如何与设计进行交互。