Variable Font Motion可变字体动效
One typeface, animated — weight and width moving on scroll or hover.一款字体,动起来——字重和字宽随滚动或悬停变化。
Where it is in its life它走到哪一步了
Still climbing, not yet default. The Are.na reference board is active (1232 blocks). A real window before it’s everywhere.还在上升,尚未成为默认。Are.na 参考板活跃(1232 块)。真正铺开之前还有一个窗口。
Weekly watchlist每周看板live实时
Ship it, don’t just see it不止看见,直接拿走
Copy the working snippet, or grab the palette and type as tokens for your project — CSS variables, Tailwind, or W3C design tokens. All free.复制能跑的代码片段,或把配色和字体作为 tokens 拿进项目——CSS 变量、Tailwind、W3C design tokens。全部免费。
<h1 class="vf">Motion</h1>
<style>
@import url("https://fonts.googleapis.com/css2?family=Syne:[email protected]&display=swap");
.vf{font-family:"Syne",sans-serif;font-size:72px;cursor:pointer;
font-variation-settings:"wght" 400;transition:font-variation-settings .4s ease}
.vf:hover{font-variation-settings:"wght" 800}
</style>What it is, and why now是什么,为什么现在
Variable-font motion animates a single font’s axes — weight, width, slant — so type feels alive without swapping assets. It’s the most performant way to add kinetic type.可变字体动效让单一字体的轴——字重、字宽、倾斜——动起来,不换素材就让字"活"。这是加动态字最省性能的做法。
When to reach for it什么时候用它
Use for用在
- Animated brand marks
- Web intros
- Interactive headlines
- 品牌动态标识
- 网页开场
- 交互式标题
Avoid for别用
- Performance-sensitive contexts
- Old-browser support
- 性能敏感场景
- 需兼容老浏览器
Colour, with roles配色 · 带角色
Type pairing字体搭配
Body — Inter.正文 — Inter。 Keeps captions and UI legible underneath it.让下面的说明和 UI 保持清晰可读。
Both open-source (Google Fonts), free for commercial use. Pairing + embed code in the Pro assets.均为开源(Google Fonts)、可商用。搭配与嵌入代码在 Pro 素材里。
It’s a material, not a filter是材质,不是滤镜
Keep the animation range small and the trigger clear — hover or scroll. Ease it, don’t linear-interpolate. One variable font, one moment; the restraint is what makes it feel designed rather than gimmicky.动画幅度保持小、触发保持清楚——悬停或滚动。做缓动,别线性插值。一款可变字、一个瞬间;正是这份克制让它显得是设计而非噱头。
Sources, not screenshots是来源,不是截图
Curated links to where this actually lives and gets documented — live boards for reference, editorial for pitch language, galleries to gauge saturation. We link out and credit rather than re-host anyone’s work.精选链接,指向这个方向真正活着、被记录的地方——实时参考板、给提案话术的编辑内容、判断饱和度的画廊。我们只链接并署名,不搬运任何人的作品。
A recipe配方
- Animate one variable font’s weight/width
- trigger on hover or scroll
- keep the range small
- one spot only.
- 一个可变字体做 weight/width 动画
- hover 或滚动触发
- 幅度别太大
- 一处即可。
It’s all free全部免费
Every guide, the live timing, palettes and example images — all free. Get the weekly “what’s rising” email so you never miss a move.每份指南、实时时机、配色和范例图——全都免费。订阅每周“什么在涨”邮件,不错过任何动向。