한글 페어링 · 큐레이션

카페24 써라운드+본고딕

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

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

A:카페24 써라운드· 제작 카페24|B:본고딕· 제작 어도비·구글

→ 각 폰트 종합 가이드: 카페24 써라운드 가이드·본고딕 가이드

평가 결과 · 2개 케이스

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

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

84제목 카페24 써라운드 · 본문 본고딕

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

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

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

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

오늘의 작은 행복을 한 잔에 담았어요

써라운드는 굵은 웨이트에서 또렷한 실루엣으로 시선을 끌고, 본고딕은 7단계 웨이트와 균형 잡힌 자형으로 긴 글에서도 안정적인 가독성을 제공합니다.

분위기: 카페24 써라운드의 둥글고 친근한 인상이 본고딕의 중립적이고 정제된 본문 톤과 만나 따뜻하면서도 신뢰감 있는 분위기를 형성합니다.
대비·계층: 라운드형 디스플레이 제목과 기하학적 산세리프 본문의 형태 대비, 그리고 써라운드 700과 본고딕 400의 웨이트 차이로 위계가 또렷하게 잡힙니다.
추천 용도: F&B 브랜드 랜딩 페이지라이프스타일 커머스 상세페이지캠페인 배너·이벤트 페이지교육·키즈 콘텐츠 UISNS 카드뉴스 헤드라인

어울리는 영문 폰트

제목Plus Jakarta SansManropeSatoshiGeist

본문InterIBM Plex Sans

써라운드의 둥근 곡선미는 Plus Jakarta·Manrope의 부드러운 곡선과 잘 어우러지고, 본고딕은 Inter·IBM Plex Sans의 중립적 구조와 합성 글꼴로 자연스럽게 정렬됩니다.

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

40~52px

24~30px

본문

16~17px

line-height

1.65

어울리는 색상

#f26d4d

#ffd166

#fff8ef

어울리는 산업 톤

F&B 친근라이프스타일 캐주얼이커머스 따뜻교육 친화

62제목 본고딕 · 본문 카페24 써라운드

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

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

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

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

오늘의 작은 행복을 전합니다

본고딕은 다양한 웨이트로 또렷한 제목 가독성을 확보하며, 써라운드는 본문에 쓰기엔 캐릭터가 강한 편이라 짧은 문단·캡션 위주가 적합합니다.

분위기: 본고딕의 정제되고 중립적인 제목 인상이 카페24 써라운드의 둥글고 친근한 본문 톤과 만나, 신뢰감과 다정함이 공존하는 분위기를 만듭니다.
대비·계층: 본고딕 Bold·Black과 써라운드 Regular의 무게 대비는 명확하지만, 써라운드 특유의 둥근 인상이 본고딕의 기하학적 톤과 형태적으로 살짝 어긋날 수 있습니다.
추천 용도: 브랜드 캠페인 랜딩이커머스 상세페이지F&B 메뉴/패키지SNS 카드뉴스프로모션 배너

어울리는 영문 폰트

제목InterManropeGeistIBM Plex Sans

본문Plus Jakarta SansSource Sans Pro

본고딕의 중립적·기하학적 골격에는 Inter·Geist 같은 모던 산세리프가 자연스럽고, 본문 써라운드의 친근함은 살짝 둥근 인상의 Jakarta Sans가 보완합니다.

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

36~44px

22~26px

본문

15~17px

line-height

1.6

어울리는 색상

#1f2937

#f97316

#fff7ed

어울리는 산업 톤

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;
}