合理设置 line-height 与 font-size 的比例可提升文本可读性:中文正文推荐 1.5~1.8 倍,小字号或英文用 1.8~2,大标题用 1.2~1.4,优先使用无单位数值以保证响应式适配,并根据字体特性微调。

在css中,line-height(行高)和font-size(字体大小)的搭配直接影响文本的可读性和视觉舒适度。合理的组合能让文字排版更清晰、美观。
理解 line-height 与 font-size 的关系
font-size 决定文字本身的大小,而 line-height 控制行与行之间的垂直间距。两者共同决定段落的“密度”:
- line-height 太小:文字上下贴得太近,容易串行,阅读困难
- line-height 太大:段落松散,影响阅读连贯性
- 合适的比例:让文字呼吸自然,提升整体阅读体验
常见搭配建议
以下是一些实用的搭配原则,适用于大多数网页正文场景:
- 中文正文推荐 line-height 为 font-size 的 1.5~1.8 倍。例如 font-size: 16px 时,line-height 设置为 1.6(即 25.6px)较舒适
- 英文或小字号文本(如12px~14px),可适当提高到 1.8~2,避免字母重叠(如 “g”, “y” 下伸部分)
- 标题类大字号(如30px以上),line-height 可接近 1.2~1.4,避免行距过大显得松散
使用无单位数值更灵活
推荐用无单位数字设置 line-height,比如:
立即学习“前端免费学习笔记(深入)”;
line-height: 1.6;
这样 line-height 会基于当前 font-size 计算,响应式设计中更稳定。若写成像素值(如 line-height: 24px),在不同字号下可能不协调。
注意字体本身的特性
不同字体的“字身”高度和默认行高不同。例如:
- 思源黑体、苹方等现代中文字体自带较好行距,可适当降低 line-height
- 某些衬线字体或英文衬线体(如 Georgia)本身占位高,需预留更多空间
实际项目中建议结合预览调整,以视觉效果为准。
基本上就这些,掌握比例原则,再根据具体字体和内容微调,就能实现舒适的文本排版。