시작하기

Typography Matcher는 Google Fonts 98선 + Noonnu 인기 한글 폰트 100선을 큐레이션하고, 카테고리 대비 + 무드 매칭 알고리즘으로 어울리는 제목-본문 조합을 추천해주는 무료 웹 도구예요. 영문/국제 폰트는 Google Fonts에서, 한글 폰트는 Noonnu(눈누)에서 가져옵니다.

• 총 198개 — Google Fonts 98 + Noonnu 100
• 5개 카테고리 (Serif / Sans-serif / Display / Handwriting / Monospace)
• 다크 모드, 잠금 추천, 라이브 미리보기
• 폰트별 @import URL 또는 @font-face 스니펫 복사 / 라이선스 페이지 바로가기

빠른 시작

1. 제목 폰트 선택 — 좌측 패널의 "제목 폰트" 피커를 클릭해서 폰트를 고르면 가운데 미리보기에 큰 글씨로 표시돼요.
2. 본문 폰트 선택 — "본문 폰트" 피커에서 본문용 폰트를 골라요.
3. ✨ 자동 추천 클릭 — 가운데 아래 버튼을 누르면 오른쪽에 어울리는 페어 9개가 추천돼요.
4. 추천 카드 클릭 — 마음에 드는 페어를 클릭하면 제목/본문이 자동 적용되고 미리보기가 갱신돼요.
5. 🔗 라이선스 링크 — 패널 헤더의 🔗 버튼으로 @import URL을 복사하거나 Google Fonts / Noonnu 라이선스 페이지로 이동할 수 있어요.

인터페이스

세 개의 주요 영역으로 나뉘어요:

① 상단 바

• 로고 + 타이틀 (좌측)
• 한/영 토글, 🎲 랜덤, ⇄ 스왑, ❓ 매뉴얼, 🌙 테마 (우측)

② 좌측 컨트롤 패널

• 제목 / 본문 폰트 피커
• 크기 · 굵기 · 자간 슬라이더 (제목/본문 각각)
• 샘플 텍스트 입력

③ 가운데 미리보기 + 우측 추천

• 위: 메타 정보 (폰트명, 카테고리, 페어 점수)
• 가운데: 실시간 타이포그래피 미리보기
• 아래: ✨ 자동 추천 버튼
• 우측: 추천 카드 그리드 (9개)

폰트 피커

버튼을 클릭하면 카테고리별 그룹으로 정렬된 폰트 목록이 떠요. 각 옵션이 자기 폰트로 이름이 표시돼서 어떤 폰트인지 한눈에 알 수 있어요.

카테고리

• Serif — 명조, 격식. Playfair Display, Merriweather, Lora, Noto Serif KR, Nanum Myeongjo 등
• Sans-serif — 고딕, 깔끔. Inter, Roboto, Montserrat, Noto Sans KR, Nanum Gothic 등
• Display — 임팩트, 헤드라인. Bebas Neue, Oswald, Black Han Sans, Do Hyeon 등
• Handwriting — 따뜻함, 캐주얼. Caveat, Dancing Script, Nanum Brush Script 등
• Monospace — 코드, 에디토리얼. JetBrains Mono, Fira Code, Nanum Gothic Coding 등

한/영 필터 (상단 우측)

• 전체 — 98개 모두
• 한글 — 한글 지원 폰트 23개 (Noto Sans KR, Nanum Gothic, IBM Plex Sans KR 등)
• 영문 — 영문 중심 폰트 75개 (Inter, Playfair Display, Bebas Neue 등)

필터를 바꾸면 드롭다운과 추천 결과가 함께 갱신돼요. 현재 선택한 폰트가 새 스크립트를 지원하지 않으면 자동으로 그 스크립트의 기본 폰트로 교체됩니다.

사용법

• 열기 — 피커 버튼 클릭
• 닫기 — 다시 클릭, ESC, 바깥 클릭
• 잠긴 슬롯 — 🔒 상태에선 피커가 비활성 (클릭 안 됨)

폰트 큐레이션 (왜 198개?)

두 폰트 소스를 합쳐서 총 198개를 제공해요.

• Google Fonts 98선 — 영문/국제 폰트 중심. Playfair Display, Inter, Roboto, Bebas Neue, JetBrains Mono 같은 검증된 디자이너 폰트.
• Noonnu 인기 100선 — 한국에서 가장 인기 있는 한글 폰트. Pretendard, Paperlogy, GmarketSans, SUIT, S-CoreDream, LeeSeoyun, KoPubDotum 등.

Google Fonts가 한글 폰트를 23개만 제공하는 반면, Noonnu는 수백 개의 한글 폰트를 보유한 한글 폰트 전문 큐레이션 사이트예요. 두 소스를 합쳐서 한/영 + 인기/클래식 폭넓게 커버합니다.

5가지 선정 기준

1. 언어 한정 — 라틴 + 한글 위주. 아랍어 / 히브리어 / 태국어 / 데바나가리 / 티벳어 등 다른 문자 체계 폰트는 제외
2. 잘 알려진 폰트 — 디자이너들 사이에서 검증된 것 위주 (Google Fonts) + Noonnu 인기순 상위 100위 (한글)
3. 카테고리 균형 — 5개 카테고리 × 라틴/한글 매트릭스에서 비어있는 칸 없이
4. 무드 다양성 — editorial / friendly / tech / classic / retro / playful 등 다양한 분위기 커버
5. 실용성 — 실제로 프로젝트에 쓸 법한 것. 너무 특수한 폰트(예: 한 weight만 있거나 너무 장식적인 것) 제외

소스별 카테고리 분포

소스 표시

상단 토글에서 전체 / Google / 눈누로 필터할 수 있어요. Picker에서 Noonnu 폰트는 N 배지가 붙어서 한눈에 구분됩니다.

스타일 조정

각 슬라이더는 제목/본문 각각 별도로 조절돼요. 폰트를 고른 뒤 미세 조정에 사용하세요.

크기

• 제목: 20 ~ 120px
• 본문: 12 ~ 32px

굵기

100 ~ 900 (10단계). Google Fonts에서 실제로 제공하는 weight만 의미 있게 적용돼요 — 예를 들어 Bebas Neue는 400만 있어서 슬라이더를 움직여도 외관은 바뀌지 않아요.

자간

-0.05em ~ 0.20em 범위. 제목은 타이트하게(음수), 본문은 약간 트게(양수) 주는 게 일반적이에요.

샘플 텍스트

한/영 토글에 따라 자동으로 그 스크립트의 예문이 들어가요. 직접 입력 가능 — 한 번 편집하면 모드 전환해도 유지돼요.

잠금과 추천

패널 헤더의 🔓 버튼으로 제목/본문 폰트를 고정할 수 있어요. 자동 추천이 잠긴 슬롯은 건드리지 않고, 나머지 슬롯만 추천해줘요.

3가지 추천 모드

추천 카드 동작

• 매 ✨ 자동 추천 클릭마다 다른 9개 표시 (셔플 + 랜덤)
• 카드 클릭 시: 잠금 안 된 슬롯만 변경, 잠긴 슬롯은 유지
• 잠긴 폰트는 카드에서 흐리게(0.45) + 🔒 표시로 구분

✨ 자동 추천 vs 🎲 랜덤

어떤 조합이 좋을지 보고 싶으면 ✨ 자동 추천, 그저 빠르게 무작위로 시도해보고 싶으면 🎲 랜덤.

🎲 랜덤 / ⇄ 스왑

• 랜덤 — 잠금 안 된 슬롯을 무작위로. 제목 잠금이면 본문만 변경
• 스왑 — 제목 ↔ 본문 교환. 잠금이 하나라도 있으면 비활성 + 플래시 메시지

폰트 코드 / 라이선스

패널 헤더의 🔗 버튼을 누르면 작은 팝오버가 떠요. 현재 선택된 폰트의 코드 복사와 라이선스 페이지로 이동할 수 있습니다. 소스(Google / Noonnu)에 따라 동작이 달라요.

📋 URL / 코드 복사

Google Fonts — CSS API의 @import URL을 클립보드로 복사:

HTML <link> 또는 CSS @import로 바로 사용 가능.

Noonnu — jsdelivr CDN은 .woff/.woff2 파일이라 @import로 못 씁니다. 대신 @font-face 스니펫을 복사:

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
  font-display: swap;
}

이걸 본인 CSS에 붙여넣고 font-family: 'Pretendard', sans-serif;로 사용.

↗ Google Fonts / ↗ Noonnu

소스에 따라 다른 페이지로 이동 — 라이선스 확인은 반드시 여기서:

• Google Fonts — 공식 specimen 페이지. 라이선스 (보통 OFL — Open Font License, 상업적 이용 가능), 모든 weight, italic, glyph 미리보기.
• Noonnu — 상세 페이지. 제작자, 라이선스, 원본 파일 정보 확인 가능. 폰트마다 라이선스가 다르니 (무료/유료/상업적 제한 등) 반드시 페이지에서 확인.

단축키 & 팁

꿀팁

• 🔒 한쪽 잠그고 자동 추천 여러 번 누르기 → 그 폰트에 어울리는 후보군 빠르게 훑기
• 한/영 토글 → 한글/영문 페어 비교에 유용
• 자간 슬라이더: 제목은 -0.02em (타이트), 본문은 0 (기본)부터 시작
• 잠긴 폰트는 추천 카드에서 🔒 표시 — 클릭해도 안 바뀌니 안전하게 비교 가능

자주 묻는 질문