SuperAPI AI 工具集

modular-scale-typography

设计与创作

查看项目

更新于 10-15 17:25

技能介绍

用途:当需要定义字号或字体 token、或觉得排版尺寸随意时使用。核心公式为 size(n)=base×ratio^n,从基准字号按单一比例生成所有尺寸。可选比例及观感:1.067(极紧,密集仪表盘)、1.125(细微,长文阅读)、1.200(均衡,多数 UI)、1.250(层级清晰,营销/落地页)、1.333(强对比,展示/主视觉)、1.414(戏剧化,作品集/品牌)、1.500(非常戏剧化,慎用);默认推荐 1.25。

用法:以 base=16px、ratio=1.25 生成 -2 至 +6 级(约 10/13/16/20/25/31/39/49/61px),取整为整数像素或 rem 均可,并给出 CSS 自定义属性与 Tailwind fontSize 配置示例,保留原样。若品牌线上已有字体,可用 get_typography 从真实 DOM 读取字号、字重与行高,反推比例后再规整化(dembrandt 引擎为可选)。

细节与限制:正文基准最低 16px,14px 仅限少量次级 UI 文本,低于 14px 不用。小字号应控制在约 1% 页面以内,仅限时间戳、说明、表元数据等扫读角色。行距、行长与字号联动,正文建议每行 45–75 字符;正文保持字距 0,大写标签至多 0.04em。深色背景文字上调一档字重;等宽仅用于代码、ID、数字表格,勿加全大写。会变动或成列的数字使用 tabular-nums。标题用 text-wrap: balance,段落用 pretty,但 balance 浏览器限制约六到十行,不可用于正文;不要用 <br> 手动断行,用不换行空格绑定单位与随后的词。同一视图内字号不超过四级(标题、正文、标签、元数据),标题层级多用 H1–H3,出现 H4–H6 视为复杂度过高的信号。文本放不下时按缩短文本、降一级、改父布局的顺序处理,截断标识符而非解释性句子。各部分具体参数和命令均以资料原文为准,其他实现细节暂未提供。