타입 스케일 생성기
이 페이지는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
설정
타입 스케일 미리보기
코드 출력
기본 폰트 크기와 수학적 비율을 설정하면 일관된 타이포그래피 스케일과 CSS 변수·Tailwind 설정 코드를 즉시 생성합니다.
활용하기
한글 본문에 맞는 타이포그래피 비율
타입 스케일은 제목·본문·캡션의 크기를 일정한 수학적 비율(황금비·Perfect Fourth 등)로 정해 화면 전체의 위계를 정돈하는 방법입니다. 한국 웹 디자인에서는 본문 가독성을 위해 보통 16px 안팎을 기준 크기로 잡고, 거기에 비율을 곱해 제목 단계를 만듭니다. 일관된 비율을 쓰면 페이지마다 글자 크기를 임의로 정하는 혼란을 줄일 수 있습니다.
다만 한글은 라틴 알파벳보다 글자가 사각형에 가깝고 획이 복잡해, 같은 픽셀 크기라도 더 빽빽해 보입니다. 그래서 영문 기준 스케일을 그대로 쓰기보다 행간(line-height)을 1.6~1.8 정도로 넉넉히 주고 본문 크기를 약간 키우는 것이 읽기 편합니다. 생성된 스케일은 CSS 변수로 정의해 두면 반응형에서 단계별로 조정하기 쉽고, 디자인 시스템의 토큰으로 재사용할 수 있습니다.
자주 묻는 질문
타입 스케일(Type Scale)이란?
황금비(1.618)와 Perfect Fourth(1.333)는 어떻게 다른가요?
rem 단위를 사용해야 하는 이유는?
생성된 코드를 Tailwind CSS에서 어떻게 사용하나요?
기본 폰트 크기를 16px이 아닌 다른 값으로 설정하면 어떻게 되나요?
출판·디자인에서 자주 쓰는 폰트 크기 비율은 무엇인가요?
이미 정해진 폰트 크기 체계가 있는데 타입 스케일이 필요한 이유는?
JSON 포매터 사용법: API 응답 데이터를 깔끔하게 정리하는 방법
JSON 포매터(JSON Formatter)로 압축된 JSON을 보기 좋게 정리하고, JSON 유효성 검사 및 데이터 구조를 분석하는 방법을 소개합니다.
29분 읽기관련
관련 도구
읽을거리
관련 글
JWT 완벽 가이드: 구조·클레임·서명 알고리즘 총정리
JWT(JSON Web Token)의 Header·Payload·Signature 구조부터 HS256 vs RS256 비교, 보안 취약점까지 실무 중심으로 정리합니다.
21분 읽기CSS box-shadow 완벽 가이드: 문법부터 실전 예시까지
CSS box-shadow 문법, offset·blur·spread·inset 옵션, 레이어드 쉐도우까지 실무 예시와 함께 정리했습니다. 박스 쉐도우 생성기로 코드를 즉시 추출하세요.
17분 읽기CSV ↔ JSON 변환 가이드: 엑셀을 API로 바꾸는 법
CSV·JSON 형식 차이, 상호 변환 방법, 한글 인코딩(EUC-KR vs UTF-8) 문제, 쉼표·줄바꿈 이스케이프, 대용량 처리, JSON Lines까지 실무 노하우를 정리합니다.
29분 읽기