✏️ 타이포 도구 모음

✏️ 타이포 도구 — 글을 어떻게 보이게 할까

타이포그래피는 "무엇을 말하느냐"만큼 "어떻게 보이느냐"를 결정합니다. 같은 문장이라도 폰트·자간·행간·정렬 하나로 신뢰감과 가독성이 갈리죠. PXLTool 타이포 카테고리는 폰트 미리보기·짝짓기, 한글 폰트 비교, Lorem Ipsum 생성, CSS 텍스트 효과(그림자·그라데이션·글리치), 유니코드 특수 폰트, em/rem/px 단위 변환까지 — 웹 타이포그래피 작업 전반을 다룹니다.

📐 추천 워크플로 (브랜드 타이포 시스템)

1. 분위기 결정 — 산세리프(모던·미니멀), 세리프(클래식·신뢰), 슬랩(임팩트), 디스플레이(개성) 중 브랜드와 맞는 분류 선택.
2. 한글 폰트 선택 — 한글 폰트 비교로 Pretendard(만능), 나눔(범용), 본명조(고급), G마켓산스(친근) 등 비교. 가변 폰트 Pretendard Variable이 2026년 표준.
3. 영문 폰트 짝짓기 — 폰트 페어링으로 한·영 혼용 시 자연스러운 조합 찾기. Inter + Pretendard 조합이 대표적.
4. 타입 스케일 — em·rem·px 변환으로 1.25배수(Major Third) 스케일 구축: 12/14/16/18/24/32/48px.
5. 자간·행간 — 자간 계산기로 본문 -1%, 제목 -3%~0% 권장. 행간은 본문 1.6, 제목 1.2.
6. CSS 효과 — 그라데이션 텍스트·텍스트 그림자로 강조 요소 디자인.
7. 가독성 검토 — 모바일에서 16px 이하 금지(iOS 자동 줌). 한 줄 50~75자 표준.

💡 타이포 실전 팁

• 가변 폰트(Variable Font)를 쓰세요. Pretendard Variable·Inter Variable 하나면 100~900 모든 굵기 사용 가능. 파일 1개로 끝나서 로딩 빠릅니다.
• 한 페이지에 폰트 2개까지. 제목용·본문용 두 가지면 충분. 3개 넘으면 "디자인 안 된 페이지" 느낌. 제목과 본문이 같은 폰트의 다른 굵기여도 OK.
• 한·영 혼용은 폰트 매칭 신경 쓰세요. 한글 폰트와 영문 폰트의 x-height·획 두께가 비슷해야 자연스러움. Pretendard + Inter, 본명조 + Source Serif 같은 검증된 조합 사용.
• 본문은 16px 이상. 모바일에서 16px 미만이면 iOS 입력 폼 클릭 시 자동 확대. 본문 17~18px이 안전.
• Lorem Ipsum 대신 한글 더미 텍스트. 한국어 사이트 시안에 라틴어 더미 넣으면 자간·행간 검증이 안 됩니다. 한글 Lorem을 사용하세요.

📖 타이포 관련 PXLTool 블로그 글

• 가변 폰트 2026: 한 파일로 100가지 굵기 — Variable Font 도입 가이드
• 블로그 제목 공식 7가지 — CTR 2배 만드는 제목 패턴
• 1인 디자인 시스템 만들기 — 색·폰트·간격 3개로 시작

🙋 자주 묻는 질문

🗂 다른 카테고리