한글 페어링 · 큐레이션

비트로 프라이드+본고딕

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

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

A:비트로 프라이드· 제작 비트로|B:본고딕· 제작 어도비·구글

→ 각 폰트 종합 가이드: 비트로 프라이드 가이드·본고딕 가이드

평가 결과 · 2개 케이스

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

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

78제목 비트로 프라이드 · 본문 본고딕

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

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

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

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

오늘의 작은 발견이 내일의 취향이 됩니다

본고딕은 다양한 웨이트와 균형 잡힌 자폭으로 긴 본문 읽기에 매우 적합하며, 비트로 프라이드는 디스플레이 특성상 제목에서만 짧게 사용할 때 시선을 강하게 끈다.

분위기: 본고딕의 차분하고 중립적인 본문이 비트로 프라이드의 개성 강한 제목을 안정적으로 받쳐주며, 정제된 베이스 위에 임팩트 있는 헤드라인이 얹히는 톤을 만든다.
대비·계층: 기하학적이고 정제된 본고딕과 장식성·개성이 두드러지는 비트로 프라이드 간 인상 대비가 명확해 정보 위계가 또렷하게 형성된다.
추천 용도: 라이프스타일 매거진 본문 레이아웃이벤트·캠페인 랜딩 페이지브랜드 룩북 카탈로그F&B 메뉴북 본문+헤드전시·문화 행사 포스터의 서브 카피

어울리는 영문 폰트

제목Playfair DisplaySatoshiManrope

본문Source Sans ProInter

본문은 본고딕과 구조가 유사한 Source Sans·Inter로 자연스러운 합성이 가능하고, 제목은 비트로 프라이드의 장식성과 호응하는 Playfair나 개성 있는 Satoshi/Manrope가 어울린다.

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

36~44px

22~26px

본문

16~18px

line-height

1.65

어울리는 색상

#1a1a1a

#c8654b

#f5efe6

어울리는 산업 톤

라이프스타일 매거진F&B 친근문화·전시 감성

58제목 본고딕 · 본문 비트로 프라이드

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

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

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

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

오늘, 당신의 무드를 새로 고쳐보세요

본고딕은 다양한 웨이트로 명확한 제목 위계를 만들기에 충분히 가독성이 좋고, 비트로 프라이드는 본문이라기보다 짧은 강조 문장에서 시선을 끄는 역할에 적합합니다.

분위기: 본고딕의 중립적이고 깔끔한 산세리프 인상이 비트로 프라이드의 굵고 개성 강한 디스플레이 톤을 단단히 받쳐줍니다. 다만 본문에 디스플레이를 쓰는 구성이라 일반 본문보다는 짧은 카피·강조 영역에 한정됩니다.
대비·계층: 중립 산세리프(본고딕) vs 캐릭터 강한 디스플레이(비트로 프라이드)의 인상 대비가 뚜렷하여 제목-강조 카피 사이의 위계가 명확히 살아납니다.
추천 용도: 브랜드 캠페인 키비주얼이벤트 포스터 헤드라인패션·라이프스타일 매거진 표지팝업스토어 사이니지프로모션 랜딩페이지 메인 카피

어울리는 영문 폰트

제목InterHelvetica NeueIBM Plex SansManrope

본문Source Sans ProInter

본고딕은 어도비·구글이 제작한 표준 산세리프이므로 동일 계열의 중립적 라틴 산세리프와 자연스럽게 합성됩니다. 비트로 프라이드의 강한 캐릭터는 본문보다는 강조 카피로 사용해 라틴은 본고딕 쪽 기준으로 맞추는 편이 안정적입니다.

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

40~52px

24~30px

본문

17~20px

line-height

1.7

어울리는 색상

#1a1a1a

#ff5a36

#f5efe6

어울리는 산업 톤

라이프스타일 매거진이커머스 캠페인F&B 친근스타트업 임팩트

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