排版占网页设计的 90%，剩下的只是装饰。
版式——排列文本的艺术——是网页设计中最重要的元素，因为文本是大多数信息在网上交流的方式。好的排版是看不见的；读者关注的是内容，而不是字体。糟糕的排版会立即引人注目并损害可信度。 Adobe 2025 年的一项研究显示，73% 的消费者表示他们不会从排版不佳的网站购买商品。
在 x13apps，我们将版式视为每个设计的基石。以下是指导我们选择字体的原则。
限制您的字体选择
在任何网站上最多使用 2-3 种字体。一种用于标题，一种用于正文，可能还有一种用于重音或特殊用途。使用太多字体会造成视觉混乱。选择相互对比的字体——标题的衬线字体和正文的无衬线字体可以创建清晰的层次结构和视觉趣味。
Google Fonts 提供数百种免费的、针对网络优化的字体。流行的搭配包括 Playfair Display 与 Source Sans Pro，或 Inter 与 Merriweather。对于专业项目，请考虑使用 Typekit 或 Hoefler&Co 的许可字体。
优先考虑可读性
正文文本应至少为 16 像素（18-20 像素更适合现代屏幕上的可读性）。为了舒适阅读，行高应为字体大小的 1.5-1.8 倍。每行长度应为 50-75 个字符——较长的行会使眼睛疲劳，较短的行会扰乱流畅性。使用足够的段落间距在视觉上分隔想法。
力求文本和背景之间具有较强的对比度 - 普通文本至少为 4.5:1，大文本 (WCAG AA) 至少为 3:1。避免在白色背景上使用浅灰色文本，无论它看起来多么时尚。如果用户难以阅读您的内容，他们就会离开。
建立清晰的版式层次结构
用户在阅读之前先进行扫描。使用不同字体大小、粗细和颜色的清晰层次结构可以引导眼睛并传达信息的相对重要性。标题应该比正文明显更大、更粗。使用模块化秤以获得一致的尺寸比例。
考虑性能和可访问性
自定义字体会影响页面加载时间。使用 font-display: swap 确保文本在字体加载期间保持可见。对字体进行子集化，仅包含您需要的字符。考虑在单个文件中组合多个粗细的可变字体。确保所有文本都可以调整 200% 大小而不破坏布局。使用相对单位（rem、em）而不是像素作为字体大小。在 x13apps，我们选择并实施可增强美观性和可读性的版式。欲了解更多信息，请阅读我们的色彩心理学指南。