字体索引式品牌系统

大理论

大字号不是自动高级。字体成为品牌系统时，它必须同时解决识别、导航、扫描和节奏。尤其是建筑、品牌、设计机构、文化项目和作品索引型网站，字体可以成为主要界面材料，但不能牺牲菜单、列表、状态和移动端可读性。

小知识点

1. 先定义字体角色：hero statement、section index、menu item、case title、metadata、CTA，每个角色有固定字号、行高、字重和断行规则。
2. 索引型页面必须保留 information scent：项目标题、类型、年份、地点、服务或状态不能只藏在 hover 后。
3. 大字菜单要有当前状态、键盘焦点、触控尺寸和关闭路径；不能只依赖鼠标悬停。
4. 颜色越少，字级、留白、对齐和运动就越要清楚，否则页面会变成单调海报。
5. 移动端要重排 typography stack，不要简单缩小桌面巨型字；断行要人工控制，避免最长词撑破容器。
6. 如果字体参与动效，优先用 transform、clip、opacity；不要让文字在加载或滚动中长时间不可读。

设计判断

如果关闭动画后，用户仍能通过字体层级和索引找到菜单、案例、服务和 CTA，这套字体系统是健康的；如果页面只剩巨型口号、信息关系不明或移动端标题压住内容，它就是海报而非界面。

实现建议

建立 type role token：display-xl、index-title、nav-command、case-title、meta-label、action-label。用 clamp() 设定有上限的字号，用固定 grid/column 约束断行，给导航文字真实 link/button 语义和 focus-visible。项目索引提供 hover/focus/touch 三套状态，图片预览只能辅助，不替代文字信息。

反例/风险

把导航做成不可聚焦的动画字、项目标题只在 hover 露出、所有文字都同样巨大、移动端只显示半个标题、使用 text-as-image 导致不可选不可读、首屏 loader 过长且没有跳过路径。

案例分析

Shed 获得 Awwwards Site of the Day（2026-03-23）。Awwwards 页面列出的亮点包括 Shed Case Study、Shed Menu、Shed Intro Loader、Shed Journal、Shed Index 和 Shed Testimonials；颜色记录只有一个主色 #0F00B0，技术/分类包含 Scrolling、Typography、Interaction Design、GSAP、Nuxt.js 和 DatoCMS。可学习点是：当色彩系统极简时，字体、索引、菜单和滚动结构就要承担主要品牌与导航工作。

来源链接

Awwwards Shed: https://www.awwwards.com/sites/shed