한글 페어링 · 큐레이션

함초롬바탕+한컴 말랑말랑

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

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

A:함초롬바탕· 제작 한컴|B:한컴 말랑말랑· 제작 한컴

→ 각 폰트 종합 가이드: 함초롬바탕 가이드·한컴 말랑말랑 가이드

평가 결과 · 2개 케이스

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

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

74제목 함초롬바탕 · 본문 한컴 말랑말랑

함초롬바탕A=제목용ⓘ 미리보기는 프리텐다드

제작한컴비상업 무료다운로드

+한컴 말랑말랑B=본문용ⓘ 미리보기는 프리텐다드

제작한컴상업 무료다운로드

오래된 책장 속, 따뜻한 이야기를 펼치다

함초롬바탕은 명확한 세리프 구조로 제목의 권위를 만들고, 말랑말랑은 둥근 종결부 덕에 본문이 친근하게 읽힙니다.

분위기: 함초롬바탕의 정제된 고전미가 제목을 단단히 잡아주고, 말랑말랑의 둥글고 부드러운 본문이 따뜻하게 풀어내는 조합입니다.
대비·계층: 세리프 제목 vs 라운드 산세리프 본문의 구조 대비가 뚜렷하고, Bold 활용 시 위계가 충분히 살아납니다.
추천 용도: 어린이·교육 도서라이프스타일 매거진공공기관 홍보물에세이·문학 출판패밀리 브랜드 웹사이트

어울리는 영문 폰트

제목EB GaramondLoraSource SerifMerriweather

본문NunitoManropeSource Sans Pro

함초롬바탕의 고전 세리프 인상에는 Garamond·Lora 계열이 자연스럽고, 말랑말랑의 둥근 본문에는 Nunito·Manrope 같은 라운드 산세리프가 톤을 맞춰줍니다.

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

36~44px

24~28px

본문

16~17px

line-height

1.7

어울리는 색상

#3d2b1f

#c97b4a

#f5efe6

어울리는 산업 톤

교육 따뜻라이프스타일 매거진출판 정서적공공기관 친근

68제목 한컴 말랑말랑 · 본문 함초롬바탕

한컴 말랑말랑B=제목용ⓘ 미리보기는 프리텐다드

제작한컴상업 무료다운로드

+함초롬바탕A=본문용ⓘ 미리보기는 프리텐다드

제작한컴비상업 무료다운로드

오늘도 작은 이야기가 마음에 머뭅니다

함초롬바탕은 자형이 정돈되어 긴 본문 읽기에 매우 안정적이며, 말랑말랑은 곡선 형태로 짧은 제목에서 시선을 부드럽게 끌어옵니다.

분위기: 함초롬바탕의 단정하고 고전적인 본문 톤 위에 한컴 말랑말랑의 둥글고 친근한 제목이 얹혀, 격식과 다정함이 공존하는 분위기를 만듭니다.
대비·계층: 세리프 본문과 둥근 산세리프 제목의 구조적 대비는 명확하지만, 말랑말랑 특유의 부드러운 인상이 본문의 격식과 다소 톤 어긋남을 만들 수 있어 위계는 weight로 보강해야 합니다.
추천 용도: 어린이·교육 도서 본문따뜻한 톤의 에세이 출판물공공기관 안내 책자가족 친화 브랜드 브로슈어

어울리는 영문 폰트

제목QuicksandNunitoManrope

본문LoraSource Serif

본문 함초롬바탕에는 클래식한 세리프 Lora·Source Serif가 골격을 맞추고, 제목 말랑말랑에는 둥근 터미널을 가진 Quicksand·Nunito가 곡선 인상을 자연스럽게 잇습니다.

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

32~40px

22~26px

본문

16~18px

line-height

1.7

어울리는 색상

#3d3a35

#d98c6b

#f5efe6

어울리는 산업 톤

교육 따뜻출판 에세이공공기관 친근가족 라이프스타일

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