加 letter-spacing 可缓解标题字间距过紧,推荐 1–2px 或 0.05em;em 适配响应式,px 更直观;中文 16px–24px 标题慎超 2px,需配合 font-weight、line-height 等协同优化。

项目标题字间距太紧,直接加 letter-spacing 就能快速缓解,但要注意单位和适用范围,避免过度拉伸影响美观。
用 px 或 em 设一个合适的正向值
默认 letter-spacing 为 normal(通常接近 0),标题字挨得太近时,加 1–2px 或 0.05em 往往就足够。比如:
h1 { letter-spacing: 1px; }<br>h2 { letter-spacing: 0.06em; }
em 值会随字体大小缩放,更适合响应式场景;px 更直观可控,适合固定字号的标题。
避免在小字号或中文字体上设过大值
中文排版对字间距更敏感,尤其在 16px–24px 区间,letter-spacing 超过 2px 容易显得松散断裂。建议:
立即学习“前端免费学习笔记(深入)”;
- 16px 标题:0.5px–1.2px 较稳妥
- 带粗体或圆角字体时,可略减 spacing(视觉上已显“开”)
- 慎用负值(如 -0.5px),除非是特定设计风格,否则易降低可读性
配合 font-weight 和 line-height 一起微调
单靠 letter-spacing 不一定治本。如果标题仍显拥挤,可同步检查:
- 是否用了过重的 font-weight(如 900),加重了视觉密度?适当降到 700 可能更清爽
- line-height 是否太小?标题行高至少设为 1.2–1.4,留出呼吸感
- 必要时加 text-rendering: optimizeLegibility(尤其 safari 中文渲染)
基本上就这些——不复杂但容易忽略。