픽셀/REM 스케일 빌더

수학적 비율을 기반으로 조화로운 타이포그래피 스케일을 생성합니다.

스케일 미리보기
48.83px
3.052rem
The quick brown fox
39.06px
2.441rem
The quick brown fox
31.25px
1.953rem
The quick brown fox
25px
1.563rem
The quick brown fox
20px
1.25rem
The quick brown fox
16px
1rem
The quick brown fox
12.80px
0.8rem
The quick brown fox
10.24px
0.64rem
The quick brown fox
:root {
  --text-xs: 0.64rem; /* 10.24px */
  --text-sm: 0.8rem; /* 12.80px */
  --text-base: 1rem; /* 16px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.563rem; /* 25px */
  --text-3xl: 1.953rem; /* 31.25px */
  --text-4xl: 2.441rem; /* 39.06px */
  --text-5xl: 3.052rem; /* 48.83px */
}

타이포그래피 스케일 빌더 활용법

음악적 비율(Musical Ratios)을 바탕으로 웹 디자인에 일관된 폰트 크기 위계를 만드는 노하우를 제공합니다.

타이포그래피 스케일이란?

수학적으로 비례하는 일련의 폰트 크기 모음을 뜻합니다. 제목부터 본문, 캡션에 이르기까지 일관된 비율로 폰트 크기를 설정하면, UI 전반에 시각적 리듬과 조화가 생깁니다. 머테리얼 디자인(Material Design)과 같은 대형 디자인 시스템에서 필수적으로 채택하는 방식입니다.

비율(Ratio) 선택하기

- **Minor Second (1.067), Major Second (1.125)**: 크기 대비가 크지 않아 빽빽한 데이터 테이블이나 관리자 대시보드(Admin)에 어울립니다. - **Major Third (1.250), Perfect Fourth (1.333)**: 블로그, 랜딩 페이지 같이 제목과 본문의 구분이 명확해야 하는 일반적인 웹사이트에 가장 좋습니다. - **Perfect Fifth (1.500), Golden Ratio (1.618)**: 크고 웅장한 히어로(Hero) 섹션이나 잡지 형식의 디자인에 적합합니다.

CSS 변수로 구축하기

결과물로 출력되는 `--text-base`, `--text-lg` 등의 CSS 변수 형식을 복사하여 프로젝트의 `:root` 최상단에 붙여넣으세요. 개발 중에 폰트 사이즈를 일일이 px로 고민할 필요 없이, 시스템화된 클래스만 사용하면 디자인의 완성도가 높아집니다.