한글 페어링 · 큐레이션

비트로 프라이드+JS 동까비

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

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

A:비트로 프라이드· 제작 비트로|B:JS 동까비· 제작 정스튜디오

→ 각 폰트 종합 가이드: 비트로 프라이드 가이드·JS 동까비 가이드

평가 결과 · 2개 케이스

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

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

42제목 비트로 프라이드 · 본문 JS 동까비

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

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

+JS 동까비A=본문용ⓘ 미리보기는 프리텐다드

제작정스튜디오상업 무료

우리는 새로운 디자인을 시작합니다.

본문 역할에 디스플레이 폰트(JS 동까비)를 사용하면 긴 텍스트 가독성이 급격히 떨어진다. 비트로 프라이드도 제목용 디스플레이 폰트로서 본문과의 계층 구분이 불명확하다.

분위기: 두 디스플레이 폰트 모두 강한 개성을 지녔으나, JS 동까비의 둥근 친근함과 비트로 프라이드의 기하학적 모더니티가 충돌하여 일관된 톤을 형성하기 어렵다.
대비·계층: 두 폰트 모두 weight 400으로 동일하고 display 분류로 겹쳐, 제목과 본문 간 시각적 무게 대비가 거의 없다. 정보 위계 설정이 불가능하다.
추천 용도: 짧은 슬로건·포스터 (둘 다 디스플레이용이므로 제목만 필요한 경우)브랜드 로고타입 (개성 강한 폰트 조합으로 특수 용도)이벤트 배너 (극도로 제한된 텍스트량)

어울리는 영문 폰트

제목ManropePlus Jakarta SansGeist

본문InterSource Sans Pro

디스플레이 폰트 페어링이므로 영문도 강한 개성의 display 산세리프(Manrope, Geist)로 통일하거나, 본문이 필요하면 중성적 sans-serif(Inter, Source Sans Pro)로 구분하는 것이 권장된다.

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

48~72px

32~48px

본문

본문용 폰트 부재로 권장 불가px

line-height

1.3

어울리는 색상

#1a1a1a

#ff6b35

#f5f1e8

어울리는 산업 톤

스타트업 임팩트문화·예술 이벤트

42제목 JS 동까비 · 본문 비트로 프라이드

JS 동까비A=제목용ⓘ 미리보기는 프리텐다드

제작정스튜디오상업 무료

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

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

우리는 더 나은 내일을 함께 만듭니다

두 폰트 모두 display 폰트로 분류되어 긴 본문 텍스트에는 부적합하다. 제목과 본문 역할 분담이 명확하지 않아 정보 위계 구성에 제약이 있다.

분위기: JS 동까비의 친근하고 캐주얼한 분위기와 Bitro Pride의 기하학적·모던한 톤이 충돌하여 일관된 브랜드 정체성을 형성하기 어렵다. 두 폰트 모두 display 용도로 설계되어 본문 가독성이 부족하다.
대비·계층: 두 폰트 모두 400 weight이고 display 특성이 강해 무게감 대비가 약하다. 시각적 위계를 만들기 위해서는 한쪽을 더 가벼운 산세리프 본문 폰트로 교체하는 것이 필수적이다.
추천 용도: 짧은 카피·슬로건 (10자 이내)포스터·배너 (제목만 사용)패키징 라벨 (제목 강조)

어울리는 영문 폰트

제목ManropePlus Jakarta SansSatoshi

본문InterSource Sans Pro

두 display 폰트 페어는 본문용 산세리프가 절실하다. Inter나 Source Sans Pro 같은 중성적 산세리프가 제목의 캐주얼함과 기하학적 특성을 모두 수용할 수 있다.

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

48~64px

32~40px

본문

14~16px

line-height

1.5

어울리는 색상

#1a1a1a

#ff6b35

#f5f1ed

어울리는 산업 톤

스타트업 캐주얼라이프스타일 브랜드

구현 코드 · CSS

즉시 적용 가능한 CSS 코드

폰트의 공식 CDN을 자동 매핑. 그대로 복사해서 프로젝트에 붙여 넣으세요.

/* 비트로 프라이드 또는 JS 동까비의 공식 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;
}