한글 페어링 · 큐레이션

코트라 희망+본고딕

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

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

A:코트라 희망· 제작 코트라|B:본고딕· 제작 어도비·구글

→ 각 폰트 종합 가이드: 코트라 희망 가이드·본고딕 가이드

평가 결과 · 2개 케이스

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

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

82제목 코트라 희망 · 본문 본고딕

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

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

+본고딕B=본문용ⓘ 미리보기는 프리텐다드

제작어도비·구글상업 무료다운로드

희망은 우리가 함께 그리는 내일입니다

본고딕은 다양한 웨이트와 균형 잡힌 자소 구조로 긴 본문에 최적이며, 코트라 희망은 부드러운 곡선으로 첫인상이 따뜻하게 다가옵니다.

분위기: 코트라 희망의 따뜻하고 인간적인 세리프가 제목을 부드럽게 이끌고, 본고딕의 정제된 산세리프가 본문에 차분한 신뢰감을 더합니다.
대비·계층: 세리프 제목과 산세리프 본문이라는 분류 대비가 명확한 위계를 만들고, 본고딕의 풍부한 웨이트 폭이 보조 계층을 유연하게 보강합니다.
추천 용도: 공공기관 캠페인 페이지사회적 가치 리포트교육·문화 매거진비영리 브랜드 웹사이트정책 홍보 출판물

어울리는 영문 폰트

제목Source SerifEB GaramondLoraMerriweather

본문Source Sans ProIBM Plex SansInter

코트라 희망의 부드러운 세리프는 인간적 곡선을 가진 Source Serif·Lora와 잘 어울리고, 본고딕은 동일 패밀리인 Source Sans Pro와 구조적 일관성이 뛰어납니다.

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

36~44px

24~28px

본문

16~17px

line-height

1.7

어울리는 색상

#2c4a3e

#c89b6c

#f5efe6

어울리는 산업 톤

공공기관 신뢰사회적 가치 캠페인교육 따뜻비영리 브랜딩

78제목 본고딕 · 본문 코트라 희망

본고딕B=제목용ⓘ 미리보기는 프리텐다드

제작어도비·구글상업 무료다운로드

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

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

희망은 작은 일상에서 자라난다

코트라 희망은 부드러운 곡선과 안정적인 자형으로 긴 본문 가독성이 양호하며, 본고딕은 다양한 웨이트로 제목 위계를 명확히 잡아줍니다.

분위기: 코트라 희망의 따뜻하고 정감 있는 세리프가 본문을 이끌고, 본고딕의 명료한 산세리프가 제목에서 구조적 안정감을 더해 인간적이면서도 신뢰감 있는 톤을 만듭니다.
대비·계층: 세리프 본문과 산세리프 제목의 분류 대비가 뚜렷하고, 본고딕 700~900 웨이트를 활용하면 굵기 대비도 충분히 확보됩니다.
추천 용도: 공공기관 리포트교육 콘텐츠사회적 가치 캠페인 페이지정책 브로슈어비영리 단체 웹사이트

어울리는 영문 폰트

제목InterIBM Plex SansManrope

본문Source SerifLora

제목 본고딕은 어도비 Source 계열과 구조가 정렬되어 합성 시 자연스럽고, 본문 코트라 희망은 차분한 인문 세리프 Source Serif·Lora와 정서적 결이 맞습니다.

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

32~40px

22~26px

본문

16~18px

line-height

1.7

어울리는 색상

#2c3e50

#c89b6c

#f7f3ec

어울리는 산업 톤

공공기관 신뢰교육 따뜻비영리 사회적 가치

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