타이포그래피 스케일 생성기
기본 글꼴 크기와 수학적 비율을 바탕으로 웹 UI 디자인을 위한 일관된 폰트 크기 계층을 빠르게 생성하세요.
스케일 설정
기준 폰트 크기
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.