디자인 / 타이포그래피
Type Scale Generator (CSS 및 Tailwind용 모듈러 스케일)
기본 글꼴 크기와 1.25 또는 황금비 같은 비율로 모듈러 글자 크기 스케일을 생성합니다. 사용자 텍스트로 모든 단계를 미리 보고, 크기를 rem 또는 px 단위의 CSS 사용자 지정 속성이나 Tailwind fontSize 설정으로 복사할 수 있습니다.
Type Scale Generator (CSS 및 Tailwind용 모듈러 스케일): 각 크기는 단계마다 기본 크기에 비율을 한 번씩 곱해 계산합니다. 예를 들어 16 px와 장3도 비율인 1.25를 사용하면 위쪽 단계는 20, 25, 31.25, 39.06, 48.83 px이고 아래쪽 단계는 12.8과 10.24 px입니다. 크기는 px와 rem 단위로 표시되며, xs부터 4xl까지 Tailwind의 텍스트 크기 이름과 같은 방식으로 지정됩니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
:root {
--step-5: 3.0518rem;
--step-4: 2.4414rem;
--step-3: 1.9531rem;
--step-2: 1.5625rem;
--step-1: 1.25rem;
--step-0: 1rem;
--step--1: 0.8rem;
--step--2: 0.64rem;
}각 단계의 크기는 바로 아래 단계에 비율을 곱해 계산합니다. 기본 크기가 16 px이고 비율이 1.25이면 위쪽 크기는 20, 25, 31.25 px이고 아래쪽 크기는 12.8, 10.24 px입니다. 1.125와 같은 작은 비율은 요소가 조밀한 인터페이스에 적합하고, 1.5와 같은 큰 비율은 제목에 더 강한 대비를 줍니다. rem 값은 브라우저의 기본 루트 크기가 16 px라고 가정합니다.
비율 이름의 유래
이름은 음악의 음정 간격에서 유래했습니다. 완전5도는 3 : 2의 주파수 비율이므로 1.5를 기반으로 만든 글자 크기 스케일은 완전5도 간격의 음처럼 같은 비율로 커집니다. Tim Brown의 모듈식 스케일이 이 개념을 웹에 널리 알렸습니다.
황금비 1.618을 사용하면 변화 폭이 매우 커집니다. 자세한 내용은 황금비 계산기에서 확인할 수 있습니다.
반올림
브라우저는 소수점 픽셀 크기도 렌더링하므로 31.25 px를 그대로 사용해도 괜찮습니다. 디자인 시스템에 정수 픽셀이 필요하다면 각 단계를 반올림하고 rem 값은 소수점 네 자리까지 유지하십시오. 이 도구도 같은 방식으로 처리합니다. 다른 값은 px to rem 변환기로 변환할 수 있습니다.
사용 방법
- 기본 크기를 입력하고 비율을 선택합니다.
- 위아래로 표시할 단계 수를 설정하고 사용자 텍스트로 미리 봅니다.
- CSS 변수를 복사하거나 Tailwind 설정을 복사합니다.
개인정보 보호 및 제한사항
모든 작업은 브라우저에서 실행됩니다.
관련 도구
자주 묻는 질문
어떤 비율을 사용해야 하나요?
텍스트가 많고 화면이 작은 인터페이스에는 1.125 또는 1.2처럼 완만한 비율이 적합합니다. 편집 페이지와 랜딩 페이지에서는 더 강한 제목을 위해 1.333부터 1.618까지 사용할 수 있습니다.
왜 rem을 사용하나요?
rem 크기는 독자의 브라우저 글꼴 크기 설정을 따르므로, 더 큰 글자가 필요한 사람에게 텍스트가 함께 커집니다. 변환은 기본 16 px 루트 글꼴 크기를 기준으로 합니다.
크기를 유동적으로 만들 수 있나요?
예. 단계마다 원하는 가장 작은 크기와 가장 큰 크기를 정한 다음 CSS clamp 생성기를 사용해 clamp() 표현식으로 변환하면 됩니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요