视觉层次需通过字号、字重、行高协同构建，而非单纯放大；rem适配全局层级，em用于局部继承；字号增大时须同步提升字重并调整行高，确保跨设备认知权重一致。

字号缩放不等于视觉层次

单纯把 h1 设得比 p 大一圈，用户根本分不清哪是主标题、哪是次级信息。视觉层次不是“谁大谁重要”，而是“谁在当前上下文中承担什么认知角色”。比如同一张数据看板里，.chart-title 和 .axis-label 都用 font-size，但前者需要快速锚定，后者只需可读——它们的字号差必须足够拉开认知距离，通常建议至少 1.5 倍比值（如 24px vs 16px），而不是凭感觉调。

rem 与 em 混用导致字号失控

用 em 写组件内文字，又在外层容器设了 font-size: 0.875em，结果所有子元素字号被连环缩小，.badge 字直接缩到 10px 看不清。更稳的做法是：根元素用 px 或 rem 定基准（如 :root { font-size: 16px; }），组件内部统一用 rem；仅在需要继承缩放的局部（如图标旁文字）才谨慎用 em。

• rem 基于根字号，适合全局可控的层级设定
• em 基于父级字号，适合微调或响应式缩放场景（如 button > span 随按钮尺寸变化）
• 不要在同一个组件里混用两者控制同一类文本

字体粗细没跟上字号变化

把 h2 从 20px 改成 28px，但 font-weight 还是 400，结果它看起来比没加粗的 h3 还轻——人眼对重量变化比大小更敏感。字号每提升一级，font-weight 至少加 100（如从 500 到 600），或直接用语义化值：font-weight: bold / bolder。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 避免用 font-weight: 100～300 配大字号，易显单薄
• 同一字体族中，确认有对应字重文件（比如用了 font-weight: 600 但只加载了 400 和 700，浏览器会模拟加粗，糊）
• 小屏幕下慎用过粗字重（900），可能压垮像素精度

line-height 没随字号线性调整

font-size: 14px 时设 line-height: 1.5 没问题，但放大到 32px 还用 1.5，行距就显得太紧，文字挤在一起。行高不是固定倍数，而应随字号增长缓慢收敛——大字号可用 1.2～1.3，小字号保留 1.4～1.5。

立即学习“前端免费学习笔记（深入）”；

• 别写死 line-height: 24px 这种绝对值，破坏缩放一致性
• 用无单位值（如 1.3）最安全，它始终相对于当前 font-size
• 若用 clamp() 做流体字号，line-height 也得同步用 clamp() 或 JS 动态配比，否则断点处行距突变

实际做响应式字号层次，最难的不是算数值，是保持各断点间的信息权重关系不变——h2 在桌面端比 h3 “重”两档，到了手机上还得维持这个差距，不能因为屏幕小就让它俩看起来差不多。