Press⌘+Kto search
IP: 获取中...
为效率而生, Just tools.goodssoft.com
字体比例系统 - 和谐的字体层级
一款专业的在线字体比例系统生成工具。基于音乐音阶生成和谐的字体大小层级，支持多种经典比例（大三度、黄金比例等）。一键生成CSS变量，纯本地计算，数据安全隐私。
Small
10px
小号文字
Caption
13px
正文说明文字
Body
16px
这是正文内容
H3
20px
三级标题文字
H2
25px
二级标题内容
H1
31px
页面大标题
Display
39px
特大展示文字
CSS变量
:root {
--font-small: 10px; /* Small */
--font-caption: 13px; /* Caption */
--font-body: 16px; /* Body */
--font-h3: 20px; /* H3 */
--font-h2: 25px; /* H2 */
--font-h1: 31px; /* H1 */
--font-display: 39px; /* Display */
}# 什么是 Typography Scale？
Typography Scale（字体比例系统）是一组基于数学比例的字体大小层级。 它源自音乐中的音阶概念，通过固定的比例关系生成一系列和谐的字体大小。 使用字体比例系统可以让页面的排版更加和谐统一，提升整体设计质感。
# 常用的字体比例
- 大三度 (1.250): 温和的缩放比例，适合大多数设计场景
- 小三度 (1.200): 更细微的缩放，适合保守的设计风格
- 完全四度 (1.333): 经典的排版比例，可读性极佳
- 完全五度 (1.500): 较大的缩放，适合标题层级明显的设计
- 黄金比例 (1.618): 自然的审美比例，视觉效果最美观
- 八度 (2.000): 强烈的缩放对比，适合现代简约设计
# 如何使用字体比例系统
- 选择一个基准字号（通常是正文字号，如16px）
- 选择合适的比例类型（黄金比例、大三度等）
- 系统会自动生成一系列和谐的字体大小
- 将生成的CSS变量复制到项目中使用
# 常见问题 (FAQ)
应该选择哪种比例？
完全四度（1.333）是最常用的选择，它在可读性和层级感之间取得了很好的平衡。 如果需要更明显的层级差异，可以选择黄金比例（1.618）。 对于保守的设计风格，可以选择大三度（1.250）或小三度（1.200）。
基准字号应该设置为多少？
通常将正文的字号作为基准。对于Web设计，16px是最常见的选择， 因为它是大多数浏览器的默认字号。如果你的设计需要更大或更小的正文， 可以相应调整基准字号。
如何在项目中使用CSS变量？
将生成的CSS变量复制到你的样式表中，然后使用var()函数引用它们。 例如：font-size: var(--font-h1); 这样可以确保整个项目的字体大小保持一致的层级关系。