한글 페어링 · 큐레이션

함초롬바탕+코트라 볼드

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

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

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

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

평가 결과 · 2개 케이스

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

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

82제목 코트라 볼드 · 본문 함초롬바탕

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

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

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

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

수출의 새로운 길, 함께 열어갑니다

코트라 볼드는 두꺼운 세리프로 제목에서 시선을 강하게 끌고, 함초롬바탕은 균형 잡힌 한글 본문 세리프로 긴 글에도 안정적인 가독성을 제공합니다.

분위기: 코트라 볼드의 단단하고 공적인 인상이 함초롬바탕의 단정한 본문 톤과 만나 격식과 신뢰감이 강조된 분위기를 형성합니다.
대비·계층: 굵은 디스플레이 세리프와 레귤러 본문 세리프의 웨이트·크기 대비가 분명해 제목-본문 위계가 명확합니다.
추천 용도: 연차 보고서 표지공공기관 백서·간행물기업 IR 자료출판물 챕터 페이지전시 도록 본문 조판

어울리는 영문 폰트

제목Playfair DisplayEB GaramondIBM Plex SerifSource Serif

본문MerriweatherLoraSource Serif

코트라 볼드의 강한 세리프 골격은 Playfair Display·EB Garamond 같은 클래식 세리프와 인상이 통하며, 본문은 Merriweather·Lora 등 가독성 좋은 세리프로 일관된 격조를 유지합니다.

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

40~52px

24~30px

본문

16~18px

line-height

1.7

어울리는 색상

#1a2a3a

#a8843f

#f4efe6

어울리는 산업 톤

공공기관 신뢰B2B 기업 공식 커뮤니케이션출판·문화재단금융·법무 격식

42제목 함초롬바탕 · 본문 코트라 볼드

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

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

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

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

오래된 종이 위에 새겨진 단정한 문장

함초롬바탕은 긴 본문에 적합한 정통 명조이지만, 본문 자리에 배치된 코트라 볼드 700은 굵기가 과해 장문 가독성이 떨어집니다.

분위기: 함초롬바탕의 단정한 한글 세리프와 코트라 볼드의 강렬한 디스플레이 세리프가 한 페이지에 공존하기에는 인상이 충돌합니다. 두 폰트 모두 존재감이 강해 위계 정리가 까다롭습니다.
대비·계층: 양쪽 모두 세리프 계열이고 본문이 볼드 단일 웨이트라 정보 위계 차이가 약합니다. 사이즈로만 구분해야 해 계층 설계가 제한적입니다.
추천 용도: 문화재·전통 행사 포스터 보조 카피공공기관 캠페인 헤드라인전시 도록 표제·캡션단문 위주의 브로슈어 표지

어울리는 영문 폰트

제목EB GaramondSource SerifLora

본문MerriweatherIBM Plex Serif

함초롬바탕의 고전적 세리프 인상에 맞춰 클래식한 라틴 세리프를 매칭하면 제목의 차분한 격조가 살아납니다. 굵은 디스플레이 라틴은 코트라 볼드와 충돌하므로 피했습니다.

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

36~44px

24~28px

본문

16~18px

line-height

1.7

어울리는 색상

#2b2118

#a8814b

#f3ece1

어울리는 산업 톤

공공기관 신뢰문화·예술 전통출판 클래식

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