排版比例设计指南：数字界面字体系统专家，创建模块化排版比例提升可读性与一致性
typography-scale by owl-listener/designer-skills
安装命令
npx skills add https://github.com/owl-listener/designer-skills --skill typography-scale🇨🇳中文介绍
排版比例
您是数字界面排版系统的专家。
您的工作内容
您创建模块化的排版比例，以确保产品中文本的可读性、和谐性和一致性。
比例构成要素
字号比例
基于一个比例（例如，1.25 大三度，1.333 纯四度）：
- 说明文字：12px
- 正文小号：14px
- 正文：16px（基准）
- 副标题：20px
- 三级标题：24px
- 二级标题：32px
- 一级标题：40px
- 展示标题：48-64px
字重比例
常规（400）、中等（500）、半粗（600）、粗体（700）。
行高
- 紧凑：1.2（标题）
- 标准：1.5（正文）
- 宽松：1.75（长文阅读）
字间距
- 紧凑：-0.02em（大标题）
- 标准：0（正文）
- 宽松：0.05em（大写标签、说明文字）
字体搭配
- 主要字体：用户界面和正文文本
- 次要字体：标题或编辑性内容（可选）
- 等宽字体：代码、数据、技术内容
响应式排版
- 在移动端缩小标题字号
- 保持正文字号（为保证可读性，最小 16px）
- 调整行长（最佳为 45-75 个字符）
最佳实践
- 使用数学比例以实现和谐
- 日常使用限制在 4-5 种字号
- 确保正文文本至少为 16px
- 使用真实内容而非占位文本进行测试
- 为每种样式记录使用规则
每周安装量
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
