한글 페어링 · 큐레이션

함초롬바탕+JS 동까비

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

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

A:함초롬바탕· 제작 한컴|B:JS 동까비· 제작 정스튜디오

→ 각 폰트 종합 가이드: 함초롬바탕 가이드·JS 동까비 가이드

평가 결과 · 2개 케이스

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

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

68제목 JS 동까비 · 본문 함초롬바탕

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

제작정스튜디오상업 무료

+함초롬바탕A=본문용ⓘ 미리보기는 프리텐다드

제작한컴비상업 무료다운로드

오래된 책장 사이로 봄볕이 스며든다

함초롬바탕은 한글 본문 가독성이 우수해 긴 글에 적합하며, JS 동까비는 강조 어휘나 짧은 헤드라인에서 시선을 빠르게 잡아줍니다.

분위기: 함초롬바탕의 단정한 출판 정서가 JS 동까비의 장난기 있는 디스플레이 인상과 만나 차분한 본문 위에 발랄한 강조점을 얹는 구성입니다.
대비·계층: 정통 명조 본문과 손글씨 풍 디스플레이의 구조적 차이가 커서 위계 구분은 명확하나, 톤 차이가 커 균형 잡힌 사용이 필요합니다.
추천 용도: 에세이·수필 본문에 감성 헤드라인 강조어린이·교육 도서 본문 조판문화 매거진 칼럼브랜드 스토리텔링 페이지

어울리는 영문 폰트

제목FrauncesCaveatPlayfair Display

본문Source SerifEB Garamond

본문 명조에는 Source Serif·EB Garamond가 함초롬바탕의 클래식한 인상과 자연스럽게 맞물리고, 제목 디스플레이에는 Fraunces·Caveat가 동까비의 유희적 톤을 보완합니다.

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

36~44px

22~26px

본문

16~18px

line-height

1.7

어울리는 색상

#2d2a26

#c97b4a

#f5efe6

어울리는 산업 톤

출판 에세이교육 따뜻라이프스타일 매거진

38제목 함초롬바탕 · 본문 JS 동까비

함초롬바탕A=제목용ⓘ 미리보기는 프리텐다드

제작한컴비상업 무료다운로드

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

제작정스튜디오상업 무료

오래된 이야기, 새롭게 만나다

함초롬바탕은 제목에서 안정적이지만, JS 동까비는 디스플레이 폰트라 긴 본문 가독성에 부적합합니다.

분위기: 함초롬바탕의 단정한 명조 인상과 JS 동까비의 장난기 가득한 디스플레이 톤이 부딪혀 일관된 분위기 형성이 어렵습니다.
대비·계층: 세리프 제목과 캐주얼 디스플레이 본문의 형태 대비는 강하지만, 위계라기보다 톤 충돌로 읽혀 정보 구조가 흐트러집니다.
추천 용도: 어린이 도서 표지·본문 실험전통과 캐주얼을 결합한 캠페인 포스터이벤트 안내 카드팝업 굿즈 라벨

어울리는 영문 폰트

제목EB GaramondSource SerifPlayfair DisplayLora

본문FrauncesRecoleta

함초롬바탕의 고전적 명조 구조에는 클래식 세리프 라틴이 결을 맞춰주고, 본문이 디스플레이 성격이라 라틴도 캐릭터가 있는 세리프가 톤을 보존합니다.

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

36~44px

24~28px

본문

17~19px

line-height

1.7

어울리는 색상

#2b2118

#c2693a

#f4ece0

어울리는 산업 톤

문화·출판 전통라이프스타일 매거진F&B 친근

구현 코드 · 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;
}