网站设计中漂亮的版式

2023/12/27

一个伟大的网站始于漂亮的排版。虽然偶尔打破规则固然很好，但有时回到优秀版式设计的原则以及如何创建它也是件好事。

这是一次重要的更新，可以帮助您重新思考项目、考虑新方法或只是回到更简单、更精简的设计。

因此，今天，我们忽略趋势和打破规则的方法，而是专注于版式理论以及“规则”如何成为创建非凡字体的重要指南。

规模和层次结构

大小事项。在屏幕上创建可读排版轮廓时，尺寸可能是最重要的因素之一。微小的文字可能会刺耳且难以看清。过大的文本可能会以奇怪的方式跨行并导致混乱。

可读的排版具有多层层次结构，可以告诉用户首先要阅读什么，其次要阅读什么，等等。有一个明显的比例，因此正文在整个设计中是一种尺寸，标题是另一种尺寸，分栏和副标题也有自己的规格。

人们常常感到困惑，字距调整和字距调整不是一回事。字距调整是调整一对字母之间的间距。跟踪是对整组字符之间的间距进行调整，例如段落或对文本块的整体调整。

字距调整通常应用于单个元素，以创建精确度并增强可读性，甚至是大文本的样式。跟踪通常用于收紧正文中松散的字体。

太多的字体可能会让人不知所措和不和谐。对于大多数项目来说，两到三种字体就足够了。

选择实体字体选项的关键是选择风格丰富的字体系列。大多数优质字体都有多种样式——粗体、常规、斜体、压缩、黑色等。通过选择具有多种选项的字体，您将拥有适合多种用途的粗细和样式。（如果您想将整个设计保留在单个字体系列中，有些系列甚至包括衬线和无衬线选项。）

当您选择字体时（诚然，这可能是许多设计项目中最困难的部分），选择两种不同风格的字体是可以的，甚至是首选。

最常见的配对是衬线和无衬线。但你不必坚持这一点。

当配对不同的样式和字体时，寻找具有相似 x 高度的字母（寻找具有相同垂直小写“x”大小的字符集）和碗形状（封闭字母内部的空间，例如“o”）。

这些细节可以在字体组合在一起的感觉以及用户阅读文本的容易程度方面产生很大的影响。在不同的风格中使用相似的字母形式仍然具有视觉熟悉感，可以使所有类型更容易一起阅读。

大多数时候，连字符和完整的理由是不必要的。

特别是在网上，这些技术可能会使文本更难以一目了然地消化和理解。连字符会破坏阅读体验，并且完整的理由通常会导致难以阅读的奇怪间距。

虽然这两个元素在某些项目中都占有一席之地，但通常应该避免它们。

你永远不应该调整字体。不要试图让它变胖、变高或变瘦。选择一种新字体。

字体设计师努力为字体创建一组一致的字符，这些字符可读且适合字体风格。不要尝试改变一组角色的外观。您不会改进它们，并且经常会在此过程中使类型变得混乱。

如果某种字体不能完全按照您需要的方式工作，请寻找其他字体。尝试使用Identifont 相似字体工具，该工具可识别具有相似外观的字体，以选择可能在您的项目中效果更好的另一个选项。

使用排版进行对比设计。正如您使用不同的大小来创建层次结构一样，请考虑不同的字体粗细、颜色和样式来提供视觉兴趣。

颜色是创造对比的最有效且最简单的方法之一。理想的对比度是浅色背景上的深色文本（或相反）。有几乎无限数量的颜色选项可以帮助您实现这一目标。在使用颜色和排版时，请注意某些颜色组合（例如右蓝色上的亮红色）可能非常难以阅读。寻找明暗、活力和饱和度方面不同的组合。

当谈到对比时，简单的背景通常最适合为文本提供阅读空间。但是，如果背景包含视觉元素（例如图像或图案），则字体大小的凹凸会在背景和前景文本元素之间创建分离。

度量是容纳文本的容器的大小。这可以是整个文本框架的宽度或多列格式中的单个列的宽度。

衡量很重要，因为屏幕上的字符数量（包括空格、字形和标点符号）会影响可读性。这一概念背后的理论是，如果行太长或太短，由于从一行到下一行不断地来回运动，用户的眼睛阅读时可能会感到疲劳。

来自《印刷风格的元素》： “对于在文本大小的衬线文本中设置的单列页面，45 到 75 个字符之间的任何字符都被广泛认为是令人满意的行长度。66 个字符的行（包括字母和空格）被广泛认为是理想的。对于多栏工作，更好的平均长度是 40 到 50 个字符。”

对于大多数项目来说，这是一个非常好的起点，尽管许多项目倾向于使用稍大一点的字体大小，这将使字符数落入该范围的较小端。

尽管本书首次出版时移动排版并不是一个问题，但多栏指南是一个可以接受的起点。您甚至可以选择稍微低一些，针对小屏幕，每行包含 35 个字符。