한글 페어링 · 큐레이션

JS 동까비+코트라 볼드

두 한글 폰트의 큐레이션·점수화 페어링. 어울리는 영문 폰트, 권장 사이즈, 색상 팔레트, 산업 톤까지 한 페이지에서.

평가 케이스: 2개
평균 점수: 42점
관련 페어: 6개

A:JS 동까비· 제작 정스튜디오|B:코트라 볼드· 제작 코트라

→ 각 폰트 종합 가이드: JS 동까비 가이드·코트라 볼드 가이드

평가 결과 · 2개 케이스

제목·본문 컨텍스트별 페어 분석

점수, 어울리는 영문 폰트, 권장 크기, 색상 팔레트를 케이스별로.

42제목 코트라 볼드 · 본문 JS 동까비

코트라 볼드A=제목용ⓘ 미리보기는 프리텐다드

제작코트라상업 무료다운로드

+JS 동까비B=본문용ⓘ 미리보기는 프리텐다드

제작정스튜디오상업 무료

우리의 새로운 시작을 함께 축하해주세요.

JS 동까비는 display 폰트로 본문 가독성이 낮다. 긴 문장 읽기에 부적합하며, 제목과 본문 간 명확한 기능 분담이 불가능하다.

분위기: 코트라 볼드의 세리프 우아함과 JS 동까비의 캐주얼한 손글씨체가 톤 충돌을 일으킨다. 공식성과 친근함이 혼재되어 일관된 분위기 형성이 어렵다.
대비·계층: 무게(700 vs 400)와 스타일(세리프 vs 손글씨)의 대비는 충분하나, 둘 다 display 특성으로 인해 정보 위계가 모호하다. 본문용 텍스트 폰트 부재가 핵심 약점.
추천 용도: 포스터·이벤트 플라이어 (짧은 카피만 사용)브랜드 로고·헤더 (제목만 노출)편집 디자인 (매우 제한적 활용)

어울리는 영문 폰트

제목Playfair DisplayEB GaramondManrope

본문Source Sans ProInter

코트라 볼드의 세리프 우아함을 살리려면 Playfair Display 같은 고전 디스플레이 세리프를, 본문은 중성적 산세리프(Source Sans Pro, Inter)로 보완해야 한다.

권장 사이즈 (한국어 기준)

48~64px

28~36px

본문

16~18px

line-height

1.6

어울리는 색상

#2c2416

#d4a574

#f9f6f1

어울리는 산업 톤

공공기관 신뢰성라이프스타일 매거진

42제목 JS 동까비 · 본문 코트라 볼드

JS 동까비A=제목용ⓘ 미리보기는 프리텐다드

제작정스튜디오상업 무료

+코트라 볼드B=본문용ⓘ 미리보기는 프리텐다드

제작코트라상업 무료다운로드

따뜻한 감정과 무거운 격식이 어울리지 않습니다.

제목용 동까비(display, 400)는 충분히 눈에 띄지만, 본문으로 지정된 KOTRA Bold(700 weight)는 너무 무거워 긴 텍스트 읽기에 부담스럽다. 본문 폰트로는 부적절한 무게 설정이다.

분위기: JS 동까비의 부드럽고 친근한 곡선미와 KOTRA Bold의 무거운 세리프 구조가 톤 충돌을 일으킨다. 동까비는 캐주얼·따뜻함을 지향하지만, 700 weight 세리프는 공식·격식적 인상을 강하게 드러낸다.
대비·계층: 두 폰트 모두 display 분류이고 무게 차이(400 vs 700)만으로는 명확한 위계 구분이 어렵다. 세리프 vs 산세리프 구조 차이가 있으나 시각적 통일성을 해친다.
추천 용도: 포스터·배너 (두 폰트 모두 display용이나 조화 부족)제목+본문 조합 (본문 역할로 KOTRA Bold는 부적절)

어울리는 영문 폰트

제목ManropePlus Jakarta SansGeist

본문InterSource Sans Pro

JS 동까비의 부드러운 곡선성과 어울리려면 현대적이고 따뜻한 산세리프(Manrope, Plus Jakarta Sans)가 적합하다. 본문은 가독성 높은 중립 산세리프(Inter, Source Sans Pro)를 권장하며, KOTRA Bold 대신 가벼운 세리프나 산세리프 정규체 사용을 강력히 권고한다.

권장 사이즈 (한국어 기준)

48~56px

28~32px

본문

14~16px

line-height

1.6

어울리는 색상

#2d2d2d

#d4a574

#f9f7f4

어울리는 산업 톤

캐주얼 라이프스타일 (동까비 기준)공공기관·B2B (KOTRA Bold 기준 - 충돌)

구현 코드 · CSS

즉시 적용 가능한 CSS 코드

폰트의 공식 CDN을 자동 매핑. 그대로 복사해서 프로젝트에 붙여 넣으세요.

/* JS 동까비 또는 코트라 볼드의 공식 CDN이 없어 Pretendard로 fallback 처리 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css');

/* 제목 */
h1, h2, h3 {
  font-family: 'Pretendard Variable', sans-serif;
}

/* 본문 */
body, p {
  font-family: 'Pretendard Variable', sans-serif;
}