排版字阶生成器
基于经典数学比例与基准字号，为现代 Web UI 设计系统快速生成层级严密、视觉平衡的字体大小规范。
字阶参数设置
基准字号 (Base Size)
px
递进比例 (Ratio)
Minor Second
Subtle, minimal contrastMajor Second
Classic, gentle progressionMinor Third
Well-balanced, popular choiceMajor Third
Strong hierarchyPerfect Fourth
Dramatic, bold differenceAugmented Fourth
Very dramaticPerfect Fifth
Striking contrastGolden Ratio
Naturally pleasing自定义比例
Enter to override preset
单位
字阶层级预览 — 1.250
The quick brown fox
3.8147rem(61px)The quick brown fox
3.0518rem(49px)The quick brown fox
2.4414rem(39px)The quick brown fox
1.9531rem(31px)The quick brown fox
1.5625rem(25px)The quick brown fox
1.25rem(20px)The quick brown fox
1rem(16px)The quick brown fox
0.8rem(13px)The quick brown fox
0.64rem(10px)Export Code
:root {
/* Typography Scale
* Base: 16px
* Ratio: 1.25 (Major Third)
*/
--font-size-xs: 0.64rem;
--font-size-sm: 0.8rem;
--font-size-base: 1rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5625rem;
--font-size-2xl: 1.9531rem;
--font-size-3xl: 2.4414rem;
--font-size-4xl: 3.0518rem;
--font-size-5xl: 3.8147rem;
}
/* Usage Example */
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.heading-1 { font-size: var(--font-size-5xl); }Understanding Type Scales
What is a Modular Scale?
A modular type scale is a sequence of font sizes derived by multiplying a base size by a consistent ratio. This creates harmonious relationships between text sizes, similar to the intervals in music.
For example, with a base of 16px and ratio of 1.25 (Major Third), the sequence would be: 12.8px → 16px → 20px → 25px → 31.25px, each step exactly 1.25× the previous.
Choosing a Ratio
Smaller ratios (1.067–1.2) create subtle differences, ideal for information-dense UIs like dashboards or documentation.
Medium ratios (1.25–1.333) offer balanced hierarchy, perfect for blogs, landing pages, and marketing sites.
Larger ratios (1.414–1.618) create dramatic contrast, best for posters, presentations, and bold editorial designs.