line-height过小会导致行间粘连、文字截断，应使用无单位值（如1.5）并按中英文分别设1.4–1.7/1.3–1.5；letter-spacing中文慎用负值，英文可微增0.02em–0.05em；交互元素需保障44px触控高度。
line-height 设置太小会导致行间粘连，别用像素值硬编码
行高过小是网页可读性崩塌的常见原因，尤其在多段落正文里，line-height: 1.2 看似紧凑，实则让相邻行文字视觉上“挤在一起”，眼睛需要额外努力分辨基线。更糟的是用 line-height: 20px 这类绝对单位——当用户缩放字体或切换系统字号时，行高不会同比例变化，直接导致文字截断或重叠。
推荐做法：
- 优先使用无单位数值（如
line-height: 1.5），它基于当前元素的font-size计算，天然响应式 - 正文段落建议范围：中文 1.4–1.7，英文可略低（1.3–1.5），标题可更低（1.1–1.3）但需配合足够字重和间距
- 避免在
body或全局选择器里设过低的默认值，比如line-height: 1是反模式
letter-spacing 不是“让字更好看”的万能开关，中文慎用负值
letter-spacing 对中英文影响逻辑完全不同。英文单词依赖字母间隙识别词形，适当增加（letter-spacing: 0.05em）能提升长段落扫读效率；但中文是方块字系统，每个字已自带空白感，强行加间隙（尤其正值）会让文本显得松散、断句困难，负值则极易造成字形粘连（如“处理”变“处埋”）。
实用边界：
- 中文标题可微调：
letter-spacing: -0.02em有时增强紧凑感，但必须在真实设备上逐字检查是否粘连 - 英文正文或代码类文本，
letter-spacing: 0.02em–0.05em较安全；大写全称（如HTML）可略增至0.1em提升辨识度 - 绝对不要对
p、div等通用容器设全局letter-spacing，它会污染所有子元素，包括数字、标点、图标
line-height 和 letter-spacing 联动时，优先保证行高，再微调字距
二者叠加影响视觉节奏，但行高是基础结构，字距是细节修饰。如果先调大 letter-spacing 再发现行间拥挤，往往得回头改 line-height，白费功夫。
调试顺序建议：
- 先固定字号（
font-size）和行高（line-height），确保段落呼吸感充足 - 再针对特定元素（如
h2、.tag）单独加letter-spacing，且始终用em或无单位值，避免脱离上下文 - 在深色背景、小字号、高倍屏（如 Retina）下双重验证——这些场景会放大字距不当的问题
移动端要注意 line-height 的最小可触控高度陷阱
很多团队只关注视觉，忽略一个硬性交互约束：iOS 和 Android 都要求可点击/可聚焦元素的最小高度约 44px。如果一段文字设置了 font-size: 14px + line-height: 1.2，实际行高仅 16.8px，远低于触控安全区。用户点行内链接时容易误触、漏触。
解决方案很直接：
- 对含交互的文本容器（如
a、button），用min-height或padding拓展可触区域，而不是靠拉大line-height—— 后者会破坏段落一致性 - 例如：
a { font-size: 14px; line-height: 1.4; padding: 12px 0; }，既保阅读节奏，又满足触控 - 切忌用
line-height: 44px强撑高度，这会让单行文本垂直居中异常，多行时更灾难
真正卡住可读性的，往往不是参数本身，而是把 line-height 当成排版终点、把 letter-spacing 当成风格开关——它们得在字号、字体族、段宽、背景对比度构成的完整链路里被校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
