DESIGN SYSTEM
流体排版Fluid Typography (clamp)
font-size: clamp(32px, 5vw + 16px, 72px)——字号随视口丝滑缩放，零断点。
效果预览
流体大标题
副标题也流体缩放
font-size: clamp(32px, 5vw + 16px, 72px)
适合用在哪
所有响应式标题。替代"每个断点写一遍字号"的老办法。
容易踩的坑
- 首选值只写纯 vw（如 5vw），用户浏览器缩放到 200% 时字号不跟着变大。
- 正文也用 clamp 且最小值低于 16px，小屏手机阅读吃力。
- 最大值设得过高，2560px 宽屏上标题超过 120px，一行只剩两三个字。
设计提示词 · Prompt
流体排版（Fluid Typography with clamp）：font-size:clamp(最小值, 首选值, 最大值)——首选值混合视口与固定值（如 4vw + 16px）保证平滑。标题层级各给一条 clamp 曲线：h1 clamp(32px, 5vw+16px, 72px)、h2 clamp(24px, 3vw+12px, 48px)。配套 line-height 反向变化（字号越大行高越紧，用 clamp(1.05, .9 + .4vw, 1.3)）。间距也可以流体化（clamp(24px, 5vw, 96px)）。工具：utopia.fyi 生成整套装配。断点仍保留给布局切换，字号交给 clamp。实测两端要都好看——最小值别小到不可读。
Fluid Typography with clamp: font-size: clamp(minimum, preferred, maximum) — the preferred value mixes viewport and fixed units (e.g. 4vw + 16px) for smooth scaling. Give each heading level its own clamp curve: h1 clamp(32px, 5vw+16px, 72px), h2 clamp(24px, 3vw+12px, 48px). Pair with line-height moving inversely (larger type, tighter leading, using clamp(1.05, .9 + .4vw, 1.3)). Spacing can be fluid too (clamp(24px, 5vw, 96px)). Tool: utopia.fyi generates a complete set. Keep breakpoints for layout changes and leave font sizes to clamp. Test both ends — don't let the minimum get so small it's unreadable.
常见搭配
同一页面里经常和「流体排版」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-fluid"> <span class="d-fluid__t1">流体大标题</span> <span class="d-fluid__t2">副标题也流体缩放</span> <span class="d-fluid__code">font-size: clamp(32px, 5vw + 16px, 72px)</span> </div>