원하는 기본 크기와 비율(1.125~1.618)로 모듈형 타이포그래피 스케일을 생성하고, CSS 커스텀 속성이나 Tailwind 설정으로 복사하세요.
| 단계 | px | rem | em | 줄 간격 | 미리보기 |
|---|
모듈러 스케일은 단계가 올라갈 때마다 기준값에 비율을 곱하고, 내려갈 때마다 나눕니다. 0단계는 기준값이며, 1단계 = 기준값 × 비율, −1단계 = 기준값 ÷ 비율 순으로 계산됩니다.
권장 줄 간격은 크기가 커질수록 낮아집니다: 본문 1.6, 제목 1.4, 디스플레이 크기 1.1 — `1.7 − 0.1 × stepAbove` 공식으로 계산하며 [1.05, 1.7] 범위로 제한됩니다.
A modular scale multiplies one base size by a fixed ratio for each step up and divides for each step down. This generator produces ten steps, from −5 to +4, using size = base × ratio^step, so at the default 16 px base and 1.2 ratio, step +1 is 19.20 px and step −1 is 13.33 px. Each row also reports rem (px ÷ 16), em (px ÷ base), and a suggested line-height of 1.7 − 0.1 × (step + 5), clamped between 1.05 and 1.7.
The ratio dropdown is the real design decision. Minor second 1.067 and Major second 1.125 give tight, dense scales suited to dashboards and data-heavy interfaces. Minor third 1.2, the default, and Major third 1.25 suit most websites. Perfect fourth 1.333, Augmented fourth 1.414, Perfect fifth 1.5 and Golden ratio 1.618 open up fast and work best for editorial or landing pages. Base size accepts 8 to 32 px, and the CSS variable prefix defaults to --fs.
Two caveats are worth knowing before you paste the export. The rem column always divides by 16, so if you change the root font size in your own stylesheet the exported rem values will no longer match the pixel figures shown. And the step names are offset from the arithmetic: the ten tokens run xs, sm, base, md, lg, xl, 2xl, 3xl, 4xl and 5xl across steps −5 to +4, which places step 0 — the size you actually typed — under the name xl rather than base.
1.2, the minor third, is the default and the safest for general web work. Go tighter with 1.125 for information-dense interfaces where many sizes must coexist. Reach for 1.5 or the 1.618 golden ratio only when you have few sizes and want dramatic headline contrast.
Yes. The Copy Tailwind fontSize block button puts a ready-made fontSize object on your clipboard, each entry pairing a rem value with its calculated lineHeight. The Copy CSS custom properties button instead emits a :root block using whatever variable prefix you have set.
It falls as size grows, using 1.7 − 0.1 × (step + 5) clamped into a 1.05 to 1.7 range. The smallest step receives 1.7 and the largest steps bottom out at 1.05. Treat it as a starting point and adjust once you know your real line length.
rem always divides the pixel size by 16, the browser default root size, while em divides by whichever base you entered. With a 16 px base the two columns are identical; set the base to 18 and they diverge at every step of the scale.
You cannot from this tool, which always outputs the same fixed ten steps from −5 to +4. To extend the range, multiply the largest value by the ratio again yourself, or lower the base size and shift which portion of the scale you use.
Pixels to cm / Inches Converter (Print DPI)
Convert pixel dimensions to physical print size at any DPI/PPI, with bleed and safe-zone helpers.
Color Converter — HEX, RGB, HSL, OKLCH & Contrast
Convert any color between HEX, RGB, HSL, HWB, OKLCH and LCH, with WCAG contrast checking against any background.
Aspect Ratio Resizer (Image, Video, Social)
Resize any dimensions while keeping aspect ratio, with presets for Instagram, TikTok, YouTube and cinema formats.
Font Size Converter (pt, px, rem, em, %)
Convert font sizes between pt, px, rem, em and % for web and print typography.
