标题视觉优化关键在于匹配页面结构与阅读节奏，而非盲目放大字号；应使用rem/em建立层级关系，配合字体粗细、行高及留白提升可读性与吸引力。
标题标签本身就有层级感，但默认大小在不同设备或上下文中容易显得平淡。真正提升视觉吸引力，关键不是盲目放大字号，而是让字号与页面结构、内容权重和阅读节奏匹配。
用相对单位建立标题层级关系
浏览器对 到 的默认尺寸是基于比例的（比如 h1 ≈ 2em，h2 ≈ 1.5em），直接写死像素值反而削弱这种天然逻辑。建议用 rem 或 em 统一控制：
- 在 html> 标签设基准字号：
html { font-size: 16px; }（可配合clamp()做响应式微调） - 再定义标题比例：
h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } - 这样既保持语义层级，又能在缩放或适配时自动协调，比每个标题单独写 24px/18px/16px 更易维护
避免“最大即最吸引”的误区
过大的标题（如 h1 设为 48px）常造成视觉压迫，尤其在移动端。真正抓眼球的是对比度+留白+位置，而非绝对字号：
- 主标题用 2.5–3rem 已足够醒目，重点是它上方有足够空白、下方有呼吸间距
- 副标题（h2/h3）不必比正文小太多，有时仅缩小 10%–15%，反而强化信息流连贯性
- 慎用 vw 单位（如
font-size: 5vw;），极端宽屏下可能撑满整行，破坏可读性
结合字体粗细与行高优化可读性
字号只是视觉重量的一部分。同样 24px 的文字，font-weight: 700 + line-height: 1.2 比 font-weight: 400 + line-height: 1.6 更显紧凑有力：
- 标题行高建议设为字号的 1.1–1.3 倍，避免字距松散
- 英文标题可适当加
letter-spacing: .05em提升清晰度 - 中文标题一般不需额外字间距，但避免使用过细字体（如 Light 字重）
用类名覆盖实现灵活场景化调整
统一规则之外，允许局部微调。比如导航栏里的 h2、卡片内的 h3、弹窗标题，需求各不相同：
- 定义语义化类：
.title-card { font-size: 1.3rem; font-weight: 600; } - 在 HTML 中复用：
<h3 class="title-card">配置项</h3> - 避免用内联 style 硬编码字号，否则后期改一处要遍历全站
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
