한글 페어링 · 큐레이션

코트라 볼드+본고딕

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

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

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

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

평가 결과 · 2개 케이스

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

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

78제목 코트라 볼드 · 본문 본고딕

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

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

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

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

본문은 차분히, 제목은 단단하게.

본고딕은 다양한 웨이트와 균일한 자폭 덕분에 긴 글에 매우 적합하며, 코트라 볼드는 굵은 획과 또렷한 세리프로 첫눈에 강한 시선을 끕니다.

분위기: 본고딕의 중립적이고 균형 잡힌 인상이 본문을 안정적으로 받쳐주고, 코트라 볼드의 단단한 디스플레이 세리프가 제목에서 신뢰감 있는 무게감을 부여합니다.
대비·계층: 산세리프 본문과 볼드 세리프 제목의 분류 대비가 명확해 정보 위계가 자연스럽게 형성되며, 웨이트 차이도 충분합니다.
추천 용도: 공공기관 리포트 본문기업 IR·연차보고서B2B 백서·아티클정책 브로슈어교육 콘텐츠 장문

어울리는 영문 폰트

제목Source SerifIBM Plex SerifMerriweatherPlayfair Display

본문Source Sans ProIBM Plex SansInter

본고딕은 Source Sans와 동일 패밀리 구조라 합성이 자연스럽고, 코트라 볼드의 디스플레이 세리프는 Source Serif·IBM Plex Serif 계열과 무게감·세리프 구조에서 호응합니다.

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

36~44px

22~26px

본문

16~18px

line-height

1.65

어울리는 색상

#1a2b3c

#c8a96a

#f5f3ee

어울리는 산업 톤

공공기관 신뢰B2B SaaS 차분교육 출판리포트 매거진

58제목 본고딕 · 본문 코트라 볼드

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

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

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

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

균형 잡힌 글자, 단단한 메시지를 전합니다

본고딕은 다양한 웨이트로 제목 위계 조절이 자유롭지만, 본문에 디스플레이성 볼드 세리프인 코트라 볼드를 쓰면 긴 문장 가독성이 크게 떨어집니다.

분위기: 본고딕의 차분하고 균형 잡힌 모던 산세리프 인상에 코트라 볼드의 강한 디스플레이 세리프가 만나 톤이 다소 어긋날 수 있습니다. 본고딕이 제목일 때 본문이 지나치게 강해 위계가 역전될 위험이 있습니다.
대비·계층: 산세리프 vs 세리프 대비는 명확하지만 본문이 700 단일 웨이트의 디스플레이라 제목보다 무게감이 강해, 본고딕 제목은 800~900 웨이트로 올려야 위계가 살아납니다.
추천 용도: 공공 캠페인 포스터전시 인포그래픽 제목 영역단문 슬로건 카드뉴스행사 배너리포트 표지

어울리는 영문 폰트

제목InterIBM Plex SansHelvetica NeueManrope

본문Source Sans ProIBM Plex Sans

본고딕은 어도비·구글이 함께 만든 범용 산세리프라 동일 계열의 기하·휴머니스트 라틴과 합성하면 글자 폭과 x-height가 자연스럽게 맞물립니다.

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

40~52px

26~30px

본문

17~19px

line-height

1.7

어울리는 색상

#1f2937

#c0392b

#f4f1ea

어울리는 산업 톤

공공기관 신뢰전시·문화 캠페인B2B 리포트

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