跨平台字体配对范例

在排版中，字体配对用于平衡层级与可读性。常见做法是搭配 无衬线正文字体 与 衬线标题字体，或在现代界面中使用两种无衬线风格区分层级。

本工具支持浅/深主题、响应式预览、系统字体栈选择，以及常用参数（字号、行高、字重、字距、标题级差）。所有逻辑均在一个 HTML 文件内，方便复制与分发。

示例段落标题

中文排版建议适度增大行高以提升阅读体验。对于英文内容，适当增加字距可提升标题的识别度。

列表示例

• 衬线标题 + 无衬线正文（经典报纸风格）
• 统一无衬线（现代界面常用）
• 等宽标题 + 无衬线正文（品牌化效果）

字体是内容的衣裳。合理的配对能让信息表达更加清晰、专业且有亲和力。

内联代码示例：font-family: system-ui, Segoe UI, sans-serif;

表单示例

次级标题

小字文本示例：用于辅助说明与标注。

最小层级标题

英文示例：Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.