한글 페어링 · 큐레이션

카페24 써라운드+코트라 볼드

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

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

A:카페24 써라운드· 제작 카페24|B:코트라 볼드· 제작 코트라

→ 각 폰트 종합 가이드: 카페24 써라운드 가이드·코트라 볼드 가이드

평가 결과 · 2개 케이스

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

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

62제목 코트라 볼드 · 본문 카페24 써라운드

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

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

+카페24 써라운드B=본문용

제작카페24상업 무료다운로드

세계로 향하는 우리의 도전

코트라 볼드는 헤드라인에서 묵직한 존재감을 주며 가독성이 좋고, 카페24 써라운드는 둥근 형태로 본문 길이의 글에서 부드러운 읽기 경험을 제공합니다.

분위기: 코트라 볼드의 격식 있는 세리프 인상과 카페24 써라운드의 둥글고 친근한 산세리프가 톤의 결을 다소 다르게 가져갑니다. 전통적 권위감과 캐주얼한 친밀함이 공존하는 혼합형 분위기입니다.
대비·계층: 세리프 제목 vs 라운드 산세리프 본문의 구조적 대비는 명확하지만, 분위기 톤 차이가 커서 정보 위계보다는 스타일 충돌로 보일 수 있어 컬러·여백 조율이 필요합니다.
추천 용도: 공공기관 브랜드 캠페인 페이지F&B 친근 매거진형 콘텐츠지역 문화 행사 포스터교육 기관 안내 브로슈어

어울리는 영문 폰트

제목Playfair DisplayEB GaramondSource SerifIBM Plex Serif

본문ManropePlus Jakarta SansSource Sans Pro

코트라 볼드의 클래식한 세리프 골격과 매칭되는 영문 세리프로 격을 유지하고, 본문은 라운드 산세리프와 톤이 맞는 친근한 산세리프로 결을 통일합니다.

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

36~44px

22~26px

본문

16~18px

line-height

1.65

어울리는 색상

#1f3a5f

#c89b3c

#f5efe6

어울리는 산업 톤

공공기관 신뢰F&B 친근교육 따뜻

42제목 카페24 써라운드 · 본문 코트라 볼드

카페24 써라운드A=제목용

제작카페24상업 무료다운로드

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

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

오늘의 작은 즐거움을 발견하세요

써라운드는 제목용으로 충분한 임팩트를 주지만, 코트라 볼드는 700 단일 웨이트의 디스플레이 세리프라 긴 본문에는 부적합합니다.

분위기: 카페24 써라운드의 둥글고 친근한 인상과 코트라 볼드의 강건한 세리프 디스플레이가 충돌해 톤이 일관되지 않습니다.
대비·계층: sans 제목과 serif 본문이라는 구조적 대비는 있으나, 본문 폰트가 700 굵기뿐이라 위계가 평면적으로 눌립니다.
추천 용도: 이벤트 배너 헤드라인프로모션 포스터캠페인 키비주얼전시 안내 그래픽

어울리는 영문 폰트

제목Plus Jakarta SansManropeSatoshiGeist

본문Source SerifLora

써라운드의 둥근 곡선미에는 부드러운 지오메트릭 산세리프가 어울리고, 코트라 볼드의 묵직한 세리프는 안정된 세리프 본문체와 합성하면 인상이 정돈됩니다.

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

40~52px

24~30px

본문

16~18px

line-height

1.7

어울리는 색상

#e8552c

#f6c453

#fdf6ec

어울리는 산업 톤

F&B 친근이커머스 프로모션라이프스타일 캠페인

구현 코드 · CSS

즉시 적용 가능한 CSS 코드

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

@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Cafe24Ssurround/subsets/Cafe24Ssurround-dynamic-subset.css');

/* 제목 */
h1, h2, h3 {
  font-family: 'Cafe24 Ssurround', sans-serif;
}

/* 본문 */
body, p {
  font-family: 'Pretendard Variable', sans-serif;
}