SuperAPI AI 工具集

typography

设计与创作

查看项目

更新于 10-15 18:37

技能介绍

用途:为界面排版提供系统化指导,让文字可读、层次清晰、视觉精炼。资料给出的输出分为「字体系统推荐」和「排版审计」两种格式。字体系统推荐包含 Scale(基础字号、比例、理由)、Hierarchy 表格(层级、字号、字重、行高、字距、用途)、Fonts(主字体、副字体、等宽字体及理由)与可用的 CSS/Tailwind 实现;排版审计包含 Issues 表格(元素、问题、建议)与 Quick Wins 清单。

主要能力与核心原则:四大基础——正文字号最低 16px,次要文字绝对下限 14px;正文行高 1.5–1.7,标题 1.1–1.3;行长 45–75 字符(66 理想),可用 max-w-prose(约 65ch);字体需匹配内容与语境。层次通过字号、字重、颜色、大小写的对比建立。克制原则:最多 1–2 个字族,实践上 3–4 级标题,坚持字号阶梯,留白。

字号与间距:列出 Minor Second 1.067 至 Golden Ratio 1.618 等模块比例,并给出 Minor Third @16px 的实用阶梯(--text-xs 12px 至 --text-5xl 48px)。偏离场景包括营销大标题、密集数据界面、移动端基准略大(17–18px)。字距方面:全大写必加 tracking(+0.05em 到 +0.1em),大标题收紧(-0.01em 到 -0.02em),小字(<14px)加宽。段落间距 1em 到 1.5em,区块间距为段落的 2–3 倍。

字体与实现:提供系统字体栈与安全 Web 字体建议(如 Inter、Source Serif 4、JetBrains Mono、Fraunces),配对原则为衬线配无衬线、匹配 x-height、确认字重可用。现代 CSS 部分包含 text-wrap: balance 与 pretty、clamp() 流式字号、单行与多行截断、深色模式下调字重与字体平滑、避免纯白配纯黑。细节涵盖弯引号、连字符/短破折号/长破折号、以及 tabular-nums、oldstyle-nums、slashed zero 等数字特性。

参考文件:masters.md、variable-fonts.md、font-loading.md、opentype-features.md、fluid-typography.md、tailwind-integration.md、internationalization.md。

适用场景:设定字号阶梯、选字体、审计排版、做 Tailwind 排版集成、处理 RTL/CJK/双向文本等国际化与无障碍(对比度 4.5:1 起、7:1 更佳)问题。

限制:资料为设计指导与代码片段,未提供安装命令、收费或价格信息,这些暂未提供。