한글 페어링 · 큐레이션

함초롬바탕+코트라 희망

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

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

A:함초롬바탕· 제작 한컴|B:코트라 희망· 제작 코트라

→ 각 폰트 종합 가이드: 함초롬바탕 가이드·코트라 희망 가이드

평가 결과 · 2개 케이스

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

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

68제목 함초롬바탕 · 본문 코트라 희망

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

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

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

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

오래된 문장 속에 깃든 마음을 다시 펼치다

함초롬바탕은 획 대비가 명확해 큰 사이즈 제목에서 또렷하게 읽히고, 코트라 희망은 부드러운 곡선 덕에 중간 길이 본문까지 무난한 가독성을 보입니다.

분위기: 함초롬바탕의 단정한 명조 인상이 제목을 이끌고, 코트라 희망의 따뜻한 세리프가 본문에서 차분히 받쳐주어 정적이고 진중한 톤을 형성합니다.
대비·계층: 두 폰트 모두 세리프 계열이라 형태 대비가 약하므로 weight(700 vs 400)와 사이즈 차이로 위계를 분명히 잡아야 합니다.
추천 용도: 문화·예술 기관 인쇄물에세이·문예 단행본 표지와 본문공공기관 연차보고서박물관·전시 도록

어울리는 영문 폰트

제목EB GaramondPlayfair DisplaySource Serif

본문LoraMerriweather

함초롬바탕의 고전적 명조 인상에는 클래식 세리프 라틴이 어울리고, 본문은 x-height가 안정적인 Lora·Merriweather가 코트라 희망과 자연스럽게 어우러집니다.

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

40~48px

24~28px

본문

16~18px

line-height

1.7

어울리는 색상

#2b2a28

#a67b4a

#f5efe6

어울리는 산업 톤

문화예술 진중출판 매거진공공기관 신뢰

68제목 코트라 희망 · 본문 함초롬바탕

코트라 희망B=제목용ⓘ 미리보기는 프리텐다드

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

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

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

오래된 책장을 넘기며 마음을 가다듬는다

함초롬바탕은 한글 본문에 최적화된 균형 잡힌 세리프로 긴 글 가독성이 우수하며, 코트라 희망은 제목 크기에서 부드러운 인상으로 시선을 끕니다.

분위기: 함초롬바탕의 단정하고 차분한 본문 톤 위에 코트라 희망의 서정적이고 인문적인 제목이 얹혀 따뜻한 출판 분위기를 만듭니다.
대비·계층: 둘 다 세리프 계열이라 형태 대비는 약하지만, 함초롬바탕의 정통적 골격과 코트라 희망의 부드러운 곡선이 사이즈 차이로 위계를 확보합니다.
추천 용도: 문학·인문 단행본에세이 매거진 본문전시 도록교육 교재공공 문화 간행물

어울리는 영문 폰트

제목EB GaramondLoraPlayfair Display

본문Source SerifMerriweather

두 한글 폰트 모두 세리프 계열이라 영문도 세리프로 통일해 인문적 톤을 유지합니다. 본문은 x-height가 균형 잡힌 Source Serif·Merriweather가 함초롬바탕과 어울립니다.

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

32~40px

22~26px

본문

16~18px

line-height

1.7

어울리는 색상

#3a2f25

#a07856

#f5efe6

어울리는 산업 톤

출판 인문문화예술 매거진공공기관 신뢰교육 따뜻

구현 코드 · CSS

즉시 적용 가능한 CSS 코드

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

/* 함초롬바탕 또는 코트라 희망의 공식 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;
}