한글 페어링 · 큐레이션

비트로 프라이드+코트라 희망

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

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

A:비트로 프라이드· 제작 비트로|B:코트라 희망· 제작 코트라

→ 각 폰트 종합 가이드: 비트로 프라이드 가이드·코트라 희망 가이드

평가 결과 · 2개 케이스

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

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

64제목 비트로 프라이드 · 본문 코트라 희망

비트로 프라이드B=제목용ⓘ 미리보기는 프리텐다드

제작비트로상업 무료다운로드

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

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

오늘도 작은 희망 하나를 건넵니다

코트라 희망은 부드러운 곡선과 명확한 자소 구조로 중간 분량의 본문에 무리가 없으며, 비트로 프라이드는 제목에서 시선을 즉시 사로잡습니다.

분위기: 코트라 희망의 따뜻하고 인간적인 세리프가 본문을 차분히 이끌고, 비트로 프라이드의 개성 강한 디스플레이가 제목에서 활기를 더합니다.
대비·계층: 세리프 본문과 디스플레이 제목의 카테고리 대비가 뚜렷해 위계가 명확하지만, 두 폰트 모두 400 weight라 사이즈 차이로 위계를 보강해야 합니다.
추천 용도: 캠페인 랜딩페이지브랜드 스토리 매거진사회공헌 리포트문화 행사 포스터에세이형 콘텐츠

어울리는 영문 폰트

제목Playfair DisplaySatoshiPlus Jakarta Sans

본문Source SerifLora

본문 세리프 코트라 희망에는 인간적 세리프 라틴을 매칭해 톤을 잇고, 제목 비트로 프라이드에는 표현력 있는 디스플레이 라틴으로 개성을 살립니다.

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

36~44px

22~26px

본문

16~18px

line-height

1.7

어울리는 색상

#2b2a28

#d97742

#f5efe6

어울리는 산업 톤

사회공헌 따뜻라이프스타일 매거진문화예술 캠페인

42제목 코트라 희망 · 본문 비트로 프라이드

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

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

+비트로 프라이드B=본문용ⓘ 미리보기는 프리텐다드

제작비트로상업 무료다운로드

희망은 작은 글씨에서 시작됩니다

제목의 코트라 희망은 부드럽고 인간적인 인상으로 헤드라인 가독성은 양호하나, 본문에 배치된 비트로 프라이드는 장문 읽기에 부적합합니다.

분위기: 코트라 희망의 따뜻한 세리프 인상과 비트로 프라이드의 강한 디스플레이 개성이 톤 충돌을 일으킵니다. 본문에 디스플레이 폰트를 두는 구조 자체가 균형을 무너뜨립니다.
대비·계층: 세리프 vs 디스플레이라는 구조적 대비는 존재하지만, 본문 역할에 디스플레이를 두면 위계가 역전되어 정보 흐름이 어색해집니다.
추천 용도: 희망·공익 캠페인 메인 비주얼사회공헌 리포트 표지전시 포스터 헤드라인단발성 행사 키비주얼

어울리는 영문 폰트

제목Source SerifEB GaramondLoraMerriweather

본문IBM Plex SansSource Sans Pro

코트라 희망의 인간적 세리프 인상을 살리려면 부드러운 곡선의 클래식 세리프가 자연스럽고, 본문은 중성적 산세리프로 안정감을 보완합니다.

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

40~52px

24~30px

본문

16~18px

line-height

1.7

어울리는 색상

#2b3a55

#d4a373

#f6f1ea

어울리는 산업 톤

공공기관 신뢰사회공헌 따뜻공익 캠페인

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