文本比例尺

根据基准字号和比例生成完整类型层级,输出CSS变量,方便集成到设计系统。

关于 文本比例尺

文本比例尺(Typography Scale)是设计系统中的核心组件,通过数学比例生成协调的字号层级。本工具基于选定比例(如黄金比例1.618、完全五度1.5等)和基准字号,自动生成从微字号到大标题的完整字号体系。

常用比例

  • 小二度 1.125:层级差异小,适合内容密集型网站。
  • 大三度 1.25:平衡的差异,最常用的比例。
  • 完全四度 1.333:明显的层级,适合内容型网站。
  • 完全五度 1.5:强烈的对比,适合视觉型设计。
  • 黄金比例 1.618:符合美学的对比,杂志风格。

层级组成

完整的类型层级通常包含:Display(超大标题)、H1-H6(六级标题)、Body(正文)、Caption(说明)、Small(小字)、Micro(微字号)。每级字号根据比例从基准字号向上向下计算。