七个Web排版规则

time

曾几何时，Web 上的打字“应该”使用无衬线字体。然后，对 Web 字体的意识出现了，以确保您的设计快速有效地加载。但互联网排版的规则从早期开始就发生了变化。

现在，网站字体一点也不无聊，没有理由坚持使用安全的无衬线字体，除非它能达到你的目的。

在制作网站时，网站排版的新规则  可能不是你所想的。

7个Web排版规则

要使用的字体类型

字体大小和比例

可读性和可访问性

可用性

空间和对比度

线路长度很重要

拆分文本

01. Web 排版中使用的字体类型

现代互联网排版的第一条规则是字体风格没有对错之分。

是的，曾经有一段时间建议在网页设计和应用程序设计中使用无衬线字体选择。这有几个原因，主要植根于与屏幕分辨率相关的可读性。

早期的屏幕没有几乎所有台式机、平板电脑和移动设备的标准清晰度、高质量显示屏。由于无衬线字体的简单性，它们在低分辨率设备上更清晰，更容易准确呈现。对于大多数设计师来说，这已经不再是一个真正的问题。

所以，尝试一下其他排版风格。混合和匹配衬线、无衬线，甚至手写字体或实验性字体。

在决定如何设计网站时，关于使用哪种字体（无论风格如何）也有很多神话。

最常见的字体类别包括：

Web 字体：一旦有人访问网页，浏览器就会自动下载这些类型的字体，这意味着任何（和每个）浏览器都以完全相同的方式呈现它们。Web 字体是一种 CSS 功能，具有广泛的兼容性。

系统字体：这些字体使用计算机上安装的字体在网站上呈现排版。这仍然是一种相当普遍的做法，但与 Web 字体不同的是，对于不同的用户和设备，最终的设计看起来会有所不同。

可变字体：网站字体交付的最新方法是通过可变字体，这是一种 OpenType 字体规范，可以将字体的许多不同变体合并到一个文件中，而不是为每个宽度、粗细或样式提供单独的字体文件。这使得字体动画化成为可能，使它们在各种宽度、粗细和样式之间流畅地移动。

这里没有使用正确或错误的字体类型。它们各有优点和缺点，您应该与您的网站设计需求和目标保持一致。

话虽如此，许多开发人员正在将可变字体合并到重新设计和构建中。它确实可以很好地提供灵活性，让您可以以有效的方式使用所需的字体。

02. 字体大小和比例

传统上，我们以固定高度的测量值来测量排版，例如点、x 高度和像素。把它扔出窗外！

对于Internet字体，您应该使用相对度量来创建排版比例，以便无论大小、浏览器或设备类型如何，所有内容都保持相同的比例。

通常，1 em 是 16 像素，基于固定测量值。由于这是常见的正文文本大小，因此最好从缩放类型开始。如果您希望正文文本大约为 18 px，请进行一些数学运算：将所需的大小（以像素为单位）除以父字体大小，以找到以 ems 为单位的度量值（例如 18/16=1.125 em）。

对于相当精确的度量单位，Ems 最多可以指定小数点后三位。

使用百分比设计字体大小和缩放比例与使用 ems 非常相似。

从基本字体大小开始。通常，这是正文文本，因为它是整个设计中最常用的文本，因此它是排版比例的推荐起点。

然后，使用基于默认字体大小的百分比值生成不同文本元素的文字大小（例如，如果默认值为 16，则为 150%=24）。建立度量单位后，应用数学运算为项目创建视觉比例。

此工具不仅显示了像素和 ems 之间的良好转换，而且还应用了几种不同的比例，允许您更改预览字体选择和基本字体大小或完全创建自定义比例。

使用百分比或 ems 的好处是，这些度量单位也可以提供可访问性优势

由于文本大小基于用户偏好，因此在屏幕上使用较大文本（或更小）的用户将获得与坚持默认设置的用户相同的用户体验。由于调整大小适用于数学计算，而不是固定大小，因此它以相同的方式按比例考虑几乎所有用户/浏览器设置。

换句话说，使用固定测量可以防止在浏览器级别进行必要的调整。许多用户更改了他们的默认设置或使用缩放浏览器，您肯定希望您的网站相应地适应。

好的网站排版是可用的、可读的和可访问的。

03. 可读性和可访问性

好的网站排版是可用的、可读的和可访问的。

为确保可读性，请将排版比例连接到 CSS 自定义属性。

这听起来可能很基本，但确保排版的视觉和技术方面匹配可以创造阅读的一致性。反过来，由于视觉模式，这种一致性使内容更易于扫描和消化。

因此，通过链接视觉层次结构和 CSS 层次结构，有更好的机会创建搜索引擎和用户可以轻松阅读的内容。

技术排版中要考虑的另一个重要方面是为网站选择一些最好的字体，这些字体易于各种能力的读者理解。对于主字体，需要考虑一些准则，以确保您设计的是辅助类型元素：

使用无需帮助即可阅读的基本字体。这通常是 16 像素或更大，具体取决于字体。

选择具有较大且一致的 x 高度的字体。

使用标题和副标题建立层次结构。

使用相对刻度进行测量。

避免使用文本图像，因为它们可能看起来有颗粒感，搜索引擎无法读取，并且无法根据设备大小进行缩放。

根据 Web 内容辅助功能准则 （WCAG 2.1） 检查文字样式。

04. 可用性

当谈到排版时，可用性并不总是首先想到的事情。可用性通常与设计元素（如按钮、链接或图像）相关联。

但排版也必须可用。

为了确保可用的字体设计，您可以做的第一件事是选择并坚持使用有限的排版调色板。网站应使用 1 到 3 个字体系列。对于许多网站来说，两种字体就足够了。

选择具有不同视觉标识的字样，这些字样彼此不同。

颜色也会影响可用性，有些往往不适用于文本。

浅蓝色：人们将浅蓝色文本与链接相关联。

红色或绿色：这些颜色可能会给色盲人士带来可读性问题。

任何类似于背景的颜色：例如，灰色上的灰色可能难以阅读。

多种字体颜色：过多的装饰会变得凌乱且难以匆忙阅读;如果您打算使用彩色文字元素，请坚持只使用一种。

最好的 Web 排版师也明白，在许多设备上使用文本元素作为链接可能是一个挑战。对于用户来说，点击内联文本链接在较小的屏幕上可能是一个挑战，而在同一部分或段落中有多个链接时，则更具挑战性。

尽可能避免使用内联文本链接，而是选择按钮。这提供了一个视觉提示，表明文本元素是一个链接，并提供了一个有助于消除用户错误的可用函数。

05. 空间和对比度

如果你还没有考虑空间和对比度，那么这些与任何东西一样都是好的 Web 排版的一部分。空间和合同有助于提高可读性、可访问性和视觉上令人惊叹的文本。

当谈到间距时，最重要的文本间距可能是文本行之间的间距。太多的间距和段落或多层标题看起来不像是一起的，这可能会导致混淆并阻碍阅读。空间太小会导致眼睛疲劳，使用户因为阅读不舒服而远离副本块。

请牢记以下规则：

对于大多数字体，行高的最好起点是字体大小的 1.5 倍。

对于较小、较浅或较窄的字体，添加更多空间可以提高可读性。

对于超大字体，请考虑 80 px 或更高，稍微少一点的空间可能是理想的。

对于具有长下行字母的字体，请添加行距。

对于全部大写、不带下行字母的文本或带有短下行字母的文本，请减小行距。

增加不同类型层次结构之间的行高，例如在标题和正文副本之间。

06. 线长很重要

与字体选择和大小同样重要的是创建专为阅读而设计的文本块。文本元素越大，它就越重要。

请将这些基本准则视为帮助确定正文文本容器元素大小的起点：

在桌面设备上，舒适的行长是 45 到 80 个字符宽（包括空格和标点符号）。

对于正文文本，理想的数字是每行 66 个字符。

较小的屏幕应该在较短的线路长度方面犯错。

07. 拆分文本

在 Web 上阅读时，文本不应设计得看起来像小说。

好的网站排版包括字体选择、样式和层次结构，以及如何分解文本块以方便阅读。

使用段落、列表、块引用和不同的元素使用户能够扫描文本。用户越容易扫描您的网页并找到他们感兴趣的信息，他们就越有可能留在您的页面上。从在线营销的角度来看，如果他们很容易理解页面目标，他们也更有可能转化。

尝试不同的文本块变体和格式，以确定您的受众喜欢哪种类型的阅读，并以该格式设计更多文本元素。请记住为每种不同的样式创建适当的层次结构，例如项目符号或编号列表、引号、常见问题解答或其他文本元素的 CSS 规范。

相关阅读：公司网站设计