每个设计师都应该知道的 10 条网页排版规则

您可以在您的网页设计中加入许多元素，这些元素将创造参与度，并保持访问者的注意力。 这些包括图像、视频，甚至声音。 然而，几乎每个网站最重要的部分是访问者为了获取他们阅读的信息而阅读的内容。

如果你想让这些信息更容易阅读、视觉上更有趣，并且让文本添加到网站的整体设计中，你必须了解排版。 这是使书面文字既实用又美观的艺术和技巧。

如果您想学习使用排版来发挥自己的优势，请查看每个设计师都应牢记的这 10 条规则。

1. 在初始设计过程后停止使用 LoremIpsum

如果内容为王，为什么在网页设计过程中没有认真考虑？ 通过使用虚假内容作为占位符，网页设计师将内容降级为次要角色。 这是一个很大的迹象，表明设计优先级完全不合时宜。 在早期阶段问题不大，例如，当您模拟各种页面布局时。 但是，一旦您缩小范围，在创建最终设计时使用实际的 Web 内容非常重要。 这确保了在特定网页上所说的内容与布局和视觉元素一样重要。

除此之外，在设计和布局方面拥有实际的文本很重要。 您不想处于完全设计网页的位置，只是发现它不适用于实际内容。 这就是为什么尽快从内容作者的客户那里获取实际文本非常重要的原因。

2. 使文本无衬线

衬线文字绝对漂亮。 这些字体非常适合用于打印，以及用于较大的打印应用程序，例如标题、标题和副标题。 不幸的是，在屏幕上，当涉及较小的内容显示（例如文本块）时，衬线不能很好地缩放。 较大尺寸看起来不错的衬线，当字体变小时使文本难以阅读。 因此，建议为大文本保存衬线并在可读性可能成为问题时依赖无衬线。 更好的是，拥抱无字体的干净、时尚、现代的外观，并为印刷机保存衬线。 这样，您将永远不必处理可读性下降的问题，而转而使用看起来漂亮的字体。

3. 在设计过程的早期考虑智能引号和其他符号

很有可能，您访问的网站某些符号无法正确显示。 有时它们被替换为一个问题或一串看起来很奇怪的字符。 其他时候，他们根本不在那里。 这经常发生在智能或“卷曲”引号中。 这通常是在 MS Word 或其他软件包中创建文本然后移植到网页的结果。 事情根本没有按预期翻译。 欧元符号、双字节字符和其他取自外国内容的符号也很常见。

为了在您的最终设计中避免这个问题，您有几个选择。 首先，您可以修改您的内容以摆脱这些符号。 如果您愿意将符号更改为自然语言，则此方法有效。 您还可以使用 HTML 来确保符号正确显示，而不是仅仅依靠复制和粘贴。 无论您决定什么，请务必在您可以使用的每个浏览器中测试网页。 在一个浏览器中可能解决符号问题的方法在另一种浏览器中可能根本无效。

4. 高级 CSS 技能极其重要

如果您具备良好的 CSS 技能，您的访问者应该能够以绝对无缝的方式浏览您网站的页面。 如果您正确创建样式表，您甚至可以拥有同一页面的多个版本，同时在排版方面仍保持良好的连续性。 当然，你不需要使用很多诡计。 好的 CSS 可以帮助您避免小而常见的问题，例如字体和字体大小从一页更改为下一页。

为什么一致的排版如此必要？ 使用 CSS 来保持一致的排版可以让您的网站看起来专业而清晰。 这也意味着您在设计每个页面时不需要考虑排版。 相反，您只需使用适当的样式表。 如果您决定在特定页面上打破常规并使用排版做一些不同的事情以创造效果或引起对某事的注意，那么由于您使用 CSS，它将更加突出。

5. 微观和宏观排版都很重要

微排版涉及与可读性相关的排版细节。 例如，间距是与微排版相关的一个问题，缩放和对比度也是如此。 您为确保文本块在任何设备或浏览器上可读而进行的调整都与微排版有关。

宏观排版与您对排版的选择与整体设计的联系方式有关。 它与美学有关。

良好的排版同时考虑了微观和宏观排版。 您是否曾经访问过一个使用非常整洁的自定义字体且几乎无法阅读的网站？ 当关注宏观排版而不是微观排版时，就会发生这种情况。

6. 了解内容和设计

如您所知，一个好的网站是有流量的。 部分原因是页面上内容的可读性。 我们已经讨论过衬线如何影响这一点，并且我们已经讨论了在设计的后期阶段，虚拟文本如何无法替代真实文本。 我们还没有结束。 内容真的为王。 一旦最终设计（包括内容）到位，您就必须阅读网页。

当你在设计完成后阅读内容时，可以判断是否存在间距或换行问题。 这些可能会使内容混乱，甚至会无意中改变内容的含义。 通过使用一些排版技巧来解决这些问题可以确保您的最终产品准确传达您或您的客户的意图。

7.了解层次结构的重要性

层次结构是您提供给访问您网站的人的路线图。 您可以使用图像、视频、颜色和（当然）排版来创建该层次结构。

只需将访问者从您希望他们看到的第一件事引导到下一个，依此类推。 通过排版，您可以使用大小、字体更改和间距来帮助定义您希望用户遵循的层次结构。 事实上，如果您有一个没有转换的页面，您可能想尝试一下排版，看看您所做的任何更改是否有助于引导访问者访问号召性用语按钮。

8. 有创意但谨慎使用颜色

确保您永远不会因字体颜色和背景颜色问题而出现可读性问题的最简单方法是使用对比度最高的颜色，黑色和白色。 不幸的是，这可能会导致一些非常无聊的设计。

不要害怕使用颜色。 事实上，不要害怕使用看起来不起作用的颜色组合。 有时，只需将一两个色调变浅或变深即可。 然后，您的排版从不可读变为完全可辨别且看起来非常酷。

9. 抛弃居中的文本

居中文本的问题很多。 首先，它可以使您的网页类似于设计不佳的传单。 除此之外，您几乎总是会遇到奇怪的页边距和文本，看起来好像是旧摇滚专辑中的一首诗或衬里笔记。 虽然可以在标题中使用居中文本，但通常最好完全避免使用它。 坚持使用左调整文本，您的读者会发现您的内容更易于阅读。

10.考虑一下你的文本放大后的样子

无论他们使用拇指和食指还是单击缩放按钮，人们都会将您的文本放大。 有时，他们这样做是为了补偿较小的屏幕。 其他时候，他们这样做只是因为他们很难以正常大小阅读您的文本。

如果每个人都能够按预期查看您的文本，那就太好了，但是婴儿潮一代通常需要一些额外的帮助才能查看文本，这根本不可能。 注意不要使用放大后会变质的字体。

有用的工具和资源

以下是一些有用的工具和资源，可帮助您在排版方面做得更多：

• FontFace Ninja ：此实用程序可帮助您识别在 Internet 上找到的字体。 当您遇到真正吸引您眼球的字体时，这是一个很棒的工具。 此 Chrome 插件将帮助您识别、查找和购买您在任何网站上看到的任何商用字体。
• TypePlate ：这是一个完整的排版框架，非常适合网页设计师。 TypePlate 可以处理首字下沉、块引号、缩放、颜色和各种其他与排版相关的挑战。
• 模块化比例：这是一种比例，可让您确定理想的字体和字体大小。 它还可以帮助您在标题和标题的字体大小与您为文本选择的字体之间建立平衡。
• TIFF ：此工具允许您调出两种不同的字体。 然后，它会为您显示两种字体之间的差异。 它甚至允许您比较一种字体和另一种字体的不同字母和数字。
• TypeWolf ：使用这个网站来修复一些最酷的字体和最鼓舞人心的互联网上的排版使用。 这是灵感和信息的绝佳来源。
• 为什么字体很重要，Sarah Hyndman ：这是一本很好的书，探讨了字体的重要性，以及排版如何影响心态。 对于那些对排版充满热情的人来说，这是一本很棒的书，但对于那些可能需要说服选择正确工作类型的重要性的人来说，这也是一本好书。

结论

希望这篇文章能够影响网页设计师对排版进行更多思考，并找到在他们的设计中更有效、更有创意地使用字体的方法。