タイポグラフィスケール生成
基準フォントサイズと調和の取れた数学的レシオを用いて、美しい文字サイズ階層を素早く設計・エクスポートできます。
スケール設定
基準フォントサイズ
px
スケール比率
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.