SuperAPI AI 工具集

apply-typography-scale

设计与创作

查看项目

更新于 10-15 21:53

技能介绍

用途:为界面创建清晰、可读的排印层级,采用手工挑选的字号、字重与颜色组合,而非数学化模块化比例。

主要规则:避免带小数的模块化尺度;尺寸只用 px 或 rem,不用 em,以防嵌套时复利放大;相邻角色字号跨度至少 25%(如 16px→20px,而非 16px→18px);字重只用两档(正常 400/500,加粗 600/700);UI 文字不要低于 400。

推荐尺度:营销页 Hero 48-60px/700/行高1.1,H1 36-40px/700/1.2,H2 28-32px/600/1.3,正文16-18px/400/1.6,小字14px/400/1.6,说明12px/400/1.5。应用密集界面:H1 30-36px/700,H2 24px/600,H3 20px/600,H4 16px/600,正文14-16px/400,小字12-13px/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;微步进 16/18/20 改为 16/20/28;字重 300 改为最低 400;超 100 字符长行限制到 35em;所有字号统一 1.5 行高应改为按字号变化。

限制:资料未提供具体安装命令、平台支持、收费方式与配置参数,也仅提到参见 examples/typography-scale/ 及 references/ 下三份参考文档。