Hallmark Hero 标题长度与字号钳制关系：4 档自动降档规则完整指南

Hallmark Hero 标题长度与字号钳制关系：4 档自动降档规则完整指南

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark

Hallmark是一个面向 Claude Code、Cursor 和 Codex 的 Anti-AI-slop 设计技能（design skill），它会拒绝一切"一眼 AI 味"的默认审美。而在它的排版规则体系里，最实用的一条就是Hero 标题长度与字号的钳制关系：AI 写出的 Hero 大标题会先数清字符数，再按 4 个档位自动选择字号上限，超长标题自动降档——这正是 Hallmark 生成的页面看起来"不像模板"的关键细节之一。

为什么字号要跟着标题长度走？

在 AI 生成的页面里，一条 100 字符的标题配 display 级超大字号，是最可靠的 AI 破绽（AI tell）之一。它会在 1280–1440px 的视口里挤成一团，换行后又读起来像"戏剧感"而非"分量感"。

Hallmark 的解法不是让你手动调字号，而是把这条规则写进了技能规则集：AI 在构建 Hero 时，先统计渲染出的h1字符数，再对照档位表选字号上限。这条规则叠加在任何主题自己的--text-displayclamp 之上，相当于给字号加了一道"长度阀门"。

规则原文位于 typography.md 的 "Hero headline sizing" 一节，并在 SKILL.md 的 Build 步骤中被列为强制项。

4 档自动降档规则速查表

Hallmark 把 Hero 标题分成4 个长度档位，每档对应一个字号上限：

可以看到，降档是渐进的：从完整 display 字号 → display-s → text-4xl，档位越靠后，字号越小、行高越紧。50 字符是整条规则的中轴线——Hallmark 默认推荐你写的标题就落在 21–50 字符这个"甜点区"。

以 Tally（SaaS 示例）这类标准商业页面为例，Hero 标题正好落在甜点区，字号停在--text-display档，既不显小气也不溢出：

激进展示主题：> 50 字符再降一档

Brutal、Riso、Manifesto 这几类"激进展示型"主题的--text-display被钳制在 6.5–9rem——这个天花板只适用于 ≤ 50 字符的短句。标题一旦超过 50 字符，这些主题会自动路由到--text-display-s，整体再降一档。

也就是说，激进主题实际上是双重钳制：主题自己钳一次，长度规则再钳一次。这解释了为什么 Hallmark 的短标题示例敢把字号推到 7rem（单词且 ≤ 12ch 的特例上限），而长标题永远温顺得多：

字号令牌：clamp 背后的真实数值

降档的目标令牌定义在 Hallmark 官网的 tokens.css 中，采用 CSSclamp()实现"最小值 + 视口弹性 + 最大值"的响应式钳制：

--text-display: clamp(3.0rem, 5.5vw + 1.0rem, 5.75rem); /* 上限约 92px */ --text-display-s: clamp(2rem, 3vw + 1rem, 3rem); /* 降档档，上限 48px */

降档的幅度是实实在在的：从 display 到 display-s，上限直接从 ~92px 掉到 48px，降幅接近一半。而 typography 规则同时规定 display 字号不得超过 5.5rem（88px）——超过这个值，标题在桌面视口里只会自我挤压。

最佳实践：从源头控制长度

与其让标题撞线后被动降档，Hallmark 更推荐一开始就写短：

• 自己撰写标题（非用户提供的文案）时，目标≤ 7 个词、≤ 50 字符；
• 用祈使句或名词短语开头，永远不要用动名词（-ing）开头；
• 标题 > 50 字符时，优先考虑拆成 eyebrow + headline 两行结构，而不是硬塞进一个大字号里；
• 整页最多使用 5 种字号——需要更多层级时用字重和颜色，而不是再加一个尺寸。

Wayfare 这类旅行页面的 Hero 就是按这套规则产出的结果：标题长度受控、字号稳在甜点档，视觉重心落在氛围而非文字堆叠上：

规则出处：相关文件路径一览

小结

Hallmark 的 Hero 标题钳制关系可以浓缩成一句话：数清字符，对号入座，超长自动降档。≤ 20 字符放开用、21–50 字符是默认甜点区、51–90 字符封顶 display-s、超过 90 字符直接重写——再叠加激进主题的 50 字符二次钳制，保证任何输出都不会出现"超大字号 + 长标题"的 AI 招牌破绽。掌握了这条规则，你写 brief 时就能反过来指导 AI 生成更克制的标题了 🎯

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark