视觉层次需通过字号、字重、行高协同构建，而非单纯放大；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。
- 避免用
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 “重”两档，到了手机上还得维持这个差距，不能因为屏幕小就让它俩看起来差不多。