排版字階產生器
基於經典數學比例與基準字號，為現代 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.