排版是网页设计的基石：它控制着可读性、品牌调性、可信度，甚至感知到的速度。一个优秀的排版系统涵盖了选择、搭配、大小、节奏、性能、可访问性、本地化和管理等内容，使团队能够构建一致的网页，而无需不断地重新设计。这份指南将为您提供从头到尾的计划，帮助您构建适用于越南和全球受众的专业网页排版。
1. 目标和原则
在设计网站字体时，需要考虑以下几个方面：
2. 字体选择策略
衬线体 vs 无衬线体：衬线字体给人一种编辑/传统的感觉；无衬线字体则给人一种现代/中性的感觉。选择一种常用的字体作为基础，搭配一种具有表现力的显示字体；避免使用超过两种字体。在 Windows 和 Android 上，这些平台上渲染效果较差的情况下，评估在小尺寸上的可读性。
许可和托管：在预算有限的情况下，优先选择符合Web标准的字体或Google/Adobe Fonts；否则，自行托管并确保拥有正确的授权，以控制性能。 确保页面浏览量有相应的法律保障。 使用现代格式（WOFF2 作为首选，WOFF 作为备用），并选择字符集。
越南报道：确保完全支持连字（ă, ą, đ, ě, ę, ǐ, ơ, ư）和声调符号。测试多种字体，以避免出现错位的重音。包含与越南语兼容的备用字体。
可变字体：一个文件可以同时控制重量、宽度、斜体和光学尺寸。 它们可以减少请求，提高灵活性，但请注意文件大小，并选择合适的坐标轴和范围。
3. 搭配与角色
定义角色：显示（H1/H2）、主体、UI控件、代码使用等宽字体、小元素突出显示使用斜体字体。通过对比，而非冲突：将几何无衬线字体与人文无衬线字体/斜体字体结合，以达到平衡。保持字高和节奏的互补，避免调整大小导致间距错乱。提供示例，说明不同元素的搭配。
4. 规模与节奏
使用模块化比例尺，并坚持使用。 常见的比例：对于密集的用户界面，使用 1.125 (大二度)；对于营销页面，使用 1.25 (大三度) 或 1.333 (完全四度)。 使用 CSS。夹紧针对不同屏幕尺寸：在小屏幕上采用最小字体，在大屏幕上采用最大字体，并保持适中的响应式调整。 保持舒适的行长（正文建议45-75个字符），行高约为1.5，并确保足够的字母和段落间距。
垂直排版：将不同类型的字号对齐到一个间距网格（4/8 px）。保持标题和正文之间的边距一致。通过控制最大宽度和断点，避免出现孤行/尾行。
5. 层次结构和布局
建立清晰的层级结构：使用 H1 (页面目的), H2 (章节), H3 (子章节) 等标签，然后是正文。请不要跳过任何层级。在所有模板中使用一致的权重和大小。为卡片、表格、仪表盘和长篇文章提供小、中、大三种变体。强制段落的最大宽度，以保护在超宽屏幕上的可读性。
6. 颜色、对比和主题
定义语义文本标记：主要、次要、柔化、禁用、链接、反转、成功、警告、错误。 遵循 WCAG：
7. 可及性和包容性
使用真实文本，而不是图片。确保焦点边框可见；避免移除边框。提供足够的目标尺寸（44x44像素）。尊重用户放大到200%而不破坏布局。选择具有开放字形的字体，并且字符可区分（例如：I/l/1, 0/O）。如果需要，提供适合阅读障碍人士使用的替代方案。对表单标签和输入框进行 ANG（可访问名称、组）的对齐。提供可读的占位符，但不要代替标签。
动画和闪烁的文本应遵循 prefers-reduced-motion 规范。对于越南语，避免使用 text-transform，因为大写字母可能会扭曲连字符；如果支持，则优先使用 CSS font-variant 属性来显示小写字母。
8. 性能工程
自行托管字体，以便控制缓存和预加载关键部分。 使用 WOFF2 格式；分别预加载拉丁语、越南语扩展字符和符号。@font-face根据语境，"with" 可以翻译成以下几种：`font-display: swap` 的中文翻译是： or 可选为了避免FOIT，请使用...备用方案用于调整 FOUT 样式。预加载页面顶部可见文本的字体。使用 HTTP/2/3 进行压缩并提供。
减少字体变体：通常，常规、斜体、中等/半粗体和粗体就足够了。变量字体可以替代多个文件。检查字体粗细的使用情况，并删除未使用的粗细。使用 `unicode-range` 只加载每个区域所需的字体子集。
9. 字体加载模式
在 `
` 中插入一个小的代码片段，用于在字体加载完成后设置备用类。 例如：(function(){ var c=document.documentElement.classList; c.add('fonts-loading'); document.fonts.ready.then(function(){ c.remove('fonts-loading'); c.add('fonts-loaded'); });})();为了减少页面布局的抖动，建议采用以下策略：`font-size-adjust`当有的时候。
10. 内容类型
长篇文章：提供以下特性：
仪表盘/表格：更严格的排版规范，使用数字表格行，代码/ID使用等宽字体。对小数进行对齐；提供粗体标题；允许行悬停样式，但不降低对比度。确保省略号（...）具有可访问的工具提示。
表单/用户界面:保持标签尺寸一致，辅助文本略小，但至少为13像素；错误文本与图标形成鲜明对比。保持按钮文本简洁，使用句法式（sentence case）以提高可读性。
代码块：使用固定宽字体，并确保语法高亮显示具有清晰的对比度；避免使用霓虹色调。
11. 本地化与书写系统
完全支持越南语特殊符号；避免使用字体，其音调符号放置不合理。对于多语言网站，请设置...lang如果某些越南语单词需要不同的字体族，则需要检查属性并调整字体堆栈。 仔细测试长复合越南语单词的换行，并谨慎调整换行/断行规则，以避免出现不自然的分割。
RTL 支持：使用逻辑 CSS 属性；确保反向标点符号和数字仍然可读。 `hreflang` 和每个语言版本的短域名（slug）应与文本方向和排版选择相匹配。
12. 响应式和自适应排版
Use 夹紧对于标题：clamp(1.5rem, 2vw + 1rem, 2.25rem). 根据不同设备（例如：移动设备、桌面设备）的屏幕尺寸，调整字体大小：在移动设备上略微缩小，以适应屏幕；在桌面设备上略微放大，以提供足够的阅读空间。在低端 Android、iOS、Windows 笔记本电脑以及高分辨率显示器上进行测试。验证在移动设备上，行间距不会导致出现孤行/孤字。
13. 文档和代币
规范字体样式： 包括字体系列、字重、大小、行高、字母间距、颜色、链接样式、列表、代码、引号等。 提供“应该”和“不应该”的示例：不要居中长段落，不要使用全部大写字母，不要堆叠多个衬线。 在你的设计系统中发布，并提供与 React/Vue 相关的 CSS 变量和用法示例。
14. 治理与工作流程
将排版验收标准添加到“准备就绪/已完成”的定义中。设计交付应包含层级、间距、响应式规则、链接状态和备用堆栈。代码审查应标记不在令牌中的硬编码颜色/大小。质量保证应检查缩放布局、对比度和 FOUT（字体外溢）行为。在令牌或字体变动时，维护变更日志；并向市场和内容团队沟通。
15. 可访问性和测试检查清单
- 对比要求适用于所有状态。
- 重点关注链接/按钮/表单元素。
- 标题按照逻辑顺序排列。
- 放大到200%，保持布局。
- 字体加载方式：支持替换/可选加载；CLS（视觉层级）限制较少。
- 在不同字体下，标点符号都能正确显示。
- 屏幕阅读器会宣布语义元素；链接具有有意义的文本。
- 占位符未作为标签使用；辅助/错误文本可访问。
16. 绩效检查清单
- WOFF2 作为首选格式；WOFF 作为备用格式。
- 按区域（locale）划分，并使用 Unicode 范围。
- 优先加载关键字体；避免过度加载字体。
- 字体显示已设置；备用类已定义。
- 使用变量字体可以减少请求，在适用情况下。
- 预算包的大小已确定；在 CI 中进行监控。
- CSS 中没有未使用的权重。
17. 品牌和声音
将个性特征（值得信赖、大胆、友好、技术性）与字体选择对应起来：
18. 微交互和交互设计
微文必须易于阅读且简洁。按钮文本应具有明确的操作指令；避免在正文中全部使用大写字母。工具提示和辅助文本应略小但清晰；保持最小尺寸。使用一致的标点符号，并避免按钮中的孤立词。确保大写字母不会移除重音符号；对于越南语，建议使用句子形式。
19. 深色模式和高对比度
审核深色模式下的排版：使用更浅的文本、经过调色的柔和颜色，以及清晰的焦点。检查Windows上的高对比度模式：确保背景不消失，并且文本仍然可见。避免使用阴影以提高可读性；使用线条/下划线和强烈的焦点指示器。
20. 打印样式
添加打印 CSS：使用中性背景、深色文本、内联显示可点击的链接 URL、适当的边距，并移除导航/交互元素。 确保在打印时，如果网页字体失效，字体能够优雅地降级为系统默认的衬线/无衬线字体。
21. 示例和食谱
营销英雄：显示字体大小：48-64px，正文字体大小：18px，行间距：1.5，使用粗体或颜色突出显示关键词，不要使用下划线。限制每行字数在12-14个字左右。
博客/文章：正文：字体大小 17-19px，最大宽度 70ch，列表和引用的间距要宽敞，H2 字体大小 28-32px，H3 字体大小 22-24px。使用不同粗细和颜色的引语。
仪表盘：主体字体：14-16px，UI标签字体：13-14px，标题使用较小的字体，数据表格中使用表格格式的数字，小写字母使用 sparingly，徽章/状态显示高对比度。
移动优先：最小字体大小为 16px，标题字体缩小，确保点击友好的行高和间距；测试最长的越南语短语，确保它们能正确显示在按钮内。
22. 工具建议
Figma 插件：对比度检查器、字体规模生成器，以及越南语预览功能。
使用 fontsource/google-webfonts-helper 进行自托管；使用 capsized/Font Metrics API 进行备用字体对齐；使用 Lighthouse/axe 进行测试；使用 fontmin/subsetter 进行优化。
CMS 规范：要求添加替代文本，限制内联字体/颜色，强制标题顺序，自动链接样式。
23. 治理指标
跟踪指标：
24. 迁移计划
审核当前字体和使用情况。选择目标字体和字体样式。替换全局样式，然后是标题，最后是UI组件。删除未使用的字体文件。在不同的浏览器/设备/语言环境中进行测试。与SEO/内容团队沟通，以避免在发布文章时出现意外的布局变化。
25. 复制、调整和本地化指南
提供写作规则：
26. 教育和推广
为设计师/开发者/内容创作者提供关于角色、规模、对比、性能以及越南特定方面的研讨会。提供营销、博客、仪表盘和表单的入门模板。在公关审查中提供排版检查清单。通过设计系统发布进行推广；收集反馈；根据用户测试报告，调整标记以解决或减少拥堵。
27. 案例研究模板
测量基准：
28. 确保未来适用性
监控渲染技术：使用 COLRv1 引擎以获得清晰的图标，字体技术更新，以及新的 CSS 功能（字体技术、字体调色板），并确保浏览器支持尺寸调整。 持续更新变体字体；根据新的字形需求重新生成。 建议每 6-12 个月进行审查。
优秀的网页排版之所以感觉无形，是因为它自然而然地发挥作用：易于阅读、速度快、可访问性强，并且符合品牌形象。通过有条理地设计并记录，可以确保每个新页面都继承这种优秀的排版风格。
29. 针对越南的详细检查
验证不同字体（粗体、斜体）在不同权重下的表现；确保在小尺寸下，钩子和角清晰可见。避免在越南字符串中使用强制大写，因为连字符会变得拥挤。测试按钮、标签和面包屑导航中最常见的短语。对于表格，确保窄列不会破坏性地截断连字符；优先使用换行或提示信息来显示长名称。
在 Windows ClearType 上，请注意字间距和字形提示的差异。有些字体在 macOS 上看起来很好，但在 Windows 上则模糊不清——务必进行交叉测试。对于标牌风格的标题，请在深色背景上测试连字，以避免出现颜色边缘。
30. 高级配对模式
选项 1： 使用人文风格的无衬线字体作为正文（例如：Source Sans），以及更具表现力的衬线/衬线字体作为标题（例如：Merriweather）。
31. 图表和数据可视化
使用表格来表示数字；对于需要对齐的内容（如账本、代码），使用等宽字体。将表头单元格设置为粗体且对比度高。提供清晰的轮廓，以便在悬停或聚焦时显示。对于图表，确保标签在小尺寸下仍然可读；避免使用细线；提供图表上的图例和符合 WCAG 标准的高对比度配色方案。使用可访问的 SVG。aria-label or desc 可以翻译成：对于关键数据，并确保可点击的元素都有标签。
32. 内容编辑的规范和限制
在 CMS 中，强制执行标题层级结构，防止内联字体覆盖，限制颜色方案为预定义的样式，并自动应用链接样式。 验证粘贴的内容（去除样式），以避免出现不必要的字体样式。 提供可重用的富文本组件，用于标注、代码、清单和表格，这些组件都已预先定义了样式。
33. 性能和CLS缓解的深入探讨
使用 RUM（运行时用户体验）来测量字体交换，从而确定 CLS（可读性）。如果字体交换量较大，则选择具有相似指标的备用字体，并设置...`font-size-adjust`或者，如果支持 `@font-face` 中的 `size-adjust` 功能，可以使用它来调整 x 轴高度，从而对齐字体。 采用分阶段加载字体：首先加载 `body` 字体，然后稍后加载其他字体样式。 避免预加载所有字体样式；只预加载那些出现在视窗上方（即可见区域）的字体样式。
34. 深色模式排版模式
使用文本/静音/反转等标记对。将纯白色调整为浅灰色 (#E9EAEC)，以减少发光效果。对于深色表面上的小大写标签，稍微增加字母间距。保持链接上的下划线；在深色背景下，避免仅使用颜色进行区分。提供带有浅色线条和微妙光晕的焦点环，以便在深色背景下突出显示。
35. 高密度接口
对于管理控制台和数据密集型工具，请使用较小的字体尺寸（例如 13-15px），但至少保持 1.4 的行高。 稍微增加列的内边距，以确保连字符清晰可见。 谨慎使用图标；让文本和间距来体现层级关系。 对于筛选器和标签，请关闭 text-transform 属性，以保持可读性。
36. 关于电子邮件和PDF的注意事项
邮件客户端通常会移除网页字体：请设置可靠的备用字体，并测试深色模式的自动反转效果。避免使用带有白色文字的透明背景。对于从 HTML 生成的 PDF 文件，请确保字体可以嵌入并获得授权；提供适合打印的尺寸（正文 12-14 像素），并提供清晰的标题。避免导出文档中使用过细的字体。
37. 移动和触摸
针对中端 Android 平台的测试：渲染和子像素定位存在差异。 确保主体至少为 16px；标签至少为 13px。 确保行高留有足够的空间用于音标。 避免文本与紧凑的图标/徽标重叠。 对于叠加键盘，确保输入内容在不切断标签的情况下滚动显示。 在小型设备上检查横向模式下的长导航标签。
38. SEO和内容的影响
可读性强的排版可以降低跳出率，并提高用户停留时间，这对于搜索引擎来说都是积极的信号。请确保标题具有描述性和层级结构，避免在显示文本中过度使用关键词。请确保锚文本具有意义。通过优先渲染文本来优化 LCP（Largest Contentful Paint），避免英雄图片遮挡内容。结构化的内容，具有清晰的排版，可以同时提高可访问性和搜索引擎的抓取效率。
39. 数据分析与反馈
进行仪表的可读性调查，跟踪滚动深度，并监控提及“字体”、“阅读”、“小”、“模糊”、“对比”等词汇的工单。在更改比例或字体时，进行A/B测试；监控转化和任务完成情况。谨慎使用Hotjar/FullStory，并获得用户同意，以观察扫描模式。
40. 治理与变更控制
Create an ADR for typography choices. Store tokens centrally; changes require review from design, engineering, and content. Version tokens; communicate releases. Provide migration scripts for codebases to update class names or CSS variables. Keep a rollback plan if a new font causes regressions.
41. 教育资产
创建简短的指南："如何选择标题级别"、"如何撰写微文"、"如何申请新的符号"、"如何格式化表格"、"如何测试对比度"。 包含使用 Loom 视频演示如何在代码和 Figma 中应用标记，并包含越南特定陷阱（如大写字母、重音符号、拆分单词）和示例。
42. 快速启动检查清单
1) 选择支持越南语的字体，并显示包含越南语支持的字体。 2) 定义字体/标记。 3) 托管 WOFF2 字体，设置 `font-display: swap/optional`，预加载关键字体。 4) 实现 `clamp()` 尺寸和间距网格。 5) 验证 WCAG 颜色对比度和焦点。 6) 在设计系统文档中记录规则。 7) 在 Windows/Android/iOS 上进行测试，包括深色模式和 200% 缩放。 8) 通过设计系统发布进行推广，并监控 CLS/LCP/可读性反馈。
43. 商业案例
将排版与结果联系起来：更好的可读性可以减少跳出率，更清晰的层级结构可以提高转化率，更快的字体加载速度可以改善核心网页指标，可访问的文本可以降低法律风险。通过展示“前后”的指标，来证明持续的维护和潜在的许可费用。
如果设计得当，排版就会消失，用户只需阅读、信任并采取行动。
在季度审查中，巩固排版知识：测试新的设备，重新进行可访问性检查，并更新模板。 随着时间的推移，保持一致性可以建立用户信任，并减少认知负担——您的排版设计实际上是与读者之间的无声约定。
通过持续学习、审查和尊重迭代，让排版艺术永存。当文字易于阅读时，你的设计其他方面也会得到更好的表现。
