关于 apply-typography-scale
用于建立清晰文字层级的设计技能，适合设计师为营销页面和应用界面制定字体规范。它提供字体大小、字重、行高和行长的规则，并评估排版尺度。
主要功能
- 01制定手工设计的字号层级
- 02规范字号单位与字重
- 03按字号调整行高
- 04评估行长和排版层级
适用场景
- 01为营销页面建立标题与正文样式
- 02为密集应用界面设定字号层级
- 03检查正文行长与行高是否易读
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/apply-typography-scale确认已加载。
详细介绍
技能：应用字体排印比例
用途
使用精心设计的字号、字重和颜色，创建清晰的字体层级。
核心规则
- 精心设计，而非数学计算 — 避免使用带小数像素的模块化比例
- 使用 px 或 rem，绝不使用 em — 防止问题层层叠加
- 至少相差 25% — 16px → 20px（25%），而非 16px → 18px（12.5%）
- 只用两档字重 — 400/500 为常规，600/700 为粗体
- 界面字体不得低于 400 — 小字号下太难阅读
推荐比例
营销页面
Hero: 48-60px, weight 700, line-height 1.1
H1: 36-40px, weight 700, line-height 1.2
H2: 28-32px, weight 600, line-height 1.3
Body: 16-18px, weight 400, line-height 1.6
Small: 14px, weight 400, line-height 1.6
Caption: 12px, weight 400, line-height 1.5
应用/高密度界面
H1: 30-36px, weight 700
H2: 24px, weight 600
H3: 20px, weight 600
H4: 16px, weight 600
Body: 14-16px, weight 400
Small: 12-13px, weight 400
行高规则
与字号成反比：
- 小号文本（12-14px）：1.6-1.7（需要更多辅助来找到下一行）
- 正文（16px）：1.5-1.6
- 大号标题（30px 及以上）：1-1.2（所需辅助较少）
行长
- 最佳范围：每行 45-75 个字符
- 最大宽度：段落为 20-35em
- 宽段落：将行高提高到 1.8-2.0
判断标准
通过
- 比例使用少量精心选择的字号，各层级之间有明显差异
- 字体层级结合字号、字重、行高和颜色
- 正文在营销、应用和内容场景中都保持易读
- 行长和行高适合阅读场景
不通过
- 比例依赖细微的字号增量，无法形成层级
- 界面文本的字重过轻
- 长文文本行过宽或过于拥挤
- 在嵌套元素中使用
em会导致尺寸不可预测地层层叠加
常见问题模式
| 问题 | 示例 | 修正方法 |
|---|---|---|
| Em 单位 | 父元素为 1.25em，子元素为 0.875em = 17.5px | 使用 px 或 rem |
| 微小步进 | 16px、18px、20px | 16px、20px、28px |
| 字重 300 | 纤细的正文字体 | 最低为 400 |
| 行过长 | 100 个以上字符 | 限制为 35em |
| 行高统一 | 全部为 1.5 | 根据字号调整 |
示例
请参阅 examples/typography-scale/，了解比例的实现方式。
参考资料
references/hand-crafted-scales.mdreferences/avoid-em-units.mdreferences/line-height-proportion.md
评论
支持 Markdown