designnews

쇼핑몰 상세페이지 폰트 조합 9선: 소제목 디스플레이+본문 고딕

모바일 상세페이지 세 영역(세로 이미지·가격 표·배송 안내)에 맞춘 제목+본문 페어링

designnews

쇼핑몰 상세페이지 폰트 조합은 세 구간에서 갈립니다. 모바일 세로 이미지 위 소제목, 가격과 할인율이 겹치는 숫자 표, 그리고 배송·교환 안내가 들어가는 긴 본문입니다. 세 구간은 요구가 서로 다릅니다. 소제목은 12줄 안에 톤을 세워야 하고, 숫자 표는 자리폭이 흔들리면 안 됩니다. 안내 본문은 1517px에서 7줄 이상이 눌리지 않아야 합니다.

선정 기준: 톤 태그와 굵기 축

이번 9쌍은 font_pairings 테이블에서 context='heading', 점수 78 이상, 톤 태그가 이커머스·프로모션·캐주얼 중 하나 이상에 걸린 조합만 추렸습니다. 제목 폰트는 중복 없이 9종, 본문 폰트는 세 종(노토 산스 KR·나눔스퀘어 라운드 계열·프리텐다드 계열) 안에서 반복됩니다. 본문 폰트가 좁은 이유는 분명합니다. 상세페이지 안내문은 굵기 축이 4단 이상 열려 있어야 가격 라벨(600700)과 본문(400500)의 위계가 삽니다.

제목 폰트는 9종 모두 굵기 12단짜리 디스플레이 성격이 섞여 있습니다. 그래서 h1h2에만 쓰고, 본문은 축이 넓은 고딕에 넘기는 식으로 역할을 쪼갰습니다. 추천 사이즈는 모바일 폭 360390px 기준이며, line-height는 1.61.65 사이에서 조정했습니다. 본문 폰트가 한글음절 full인지 partial인지도 함께 적었습니다. 제품명이 희귀 음절을 품는 리빙·수입 식품 상세페이지에서는 partial 폰트에 폴백이 걸릴 수 있습니다.

쇼핑몰 상세페이지 폰트 9쌍 비교

여기어때 잘난체 고딕 + 에스코어 드림

여기어때 잘난체 고딕

여기어때 잘난체 고딕은 획이 두껍고 모서리에 둥근 결이 섞인 400 한 축짜리 디스플레이 고딕입니다. 한글음절은 full로 들어와 있어 프로모션 소제목에 희귀 조합이 와도 깨지지 않습니다. 본문은 에스코어 드림이 받칩니다. 굵기 9단(100~900)이 모두 열려 있어 가격 라벨 700, 본문 400, 안내 캡션 300처럼 세 단으로 쪼갤 수 있습니다. 음절은 ks2350으로 상용 범위 안에서 끝납니다.

라이선스 축이 둘 사이에 조금 다릅니다. 제목은 수정·재배포가 조건부라 자소를 뜯어 로고로 바꾸는 작업은 피하는 쪽이 안전합니다. 본문은 수정 불가·재배포 가능이라 패키징한 폰트 폴더를 그대로 돌리는 방식이 맞습니다. h1 4052px, h2 2430px, 본문 16~18px, line-height 1.65. 영문은 제목에 Manrope·Plus Jakarta Sans·Satoshi, 본문에 Inter·IBM Plex Sans를 붙이면 맞습니다. designnews 페어링 점수 86. 이커머스 활기·F&B 친근·이벤트 프로모션·라이프스타일 캐주얼 네 톤에 걸쳐 있습니다. 여기어때 잘난체 고딕+에스코어 드림 조합 보기.

배민 한나체 Air + 노토 산스 KR

배민 한나체 Air

배민 한나체 Air는 획을 가늘게 뽑은 Air 한 축입니다. 굵기는 400 단독이고 음절은 ks2350. 획이 얇아 큰 사이즈에서 공기감이 생깁니다. F&B·간식·소프트 리빙 상세페이지에서 쓰기 좋은 결입니다. 본문은 노토 산스 KR이 맡습니다. 굵기 100·300·400·500·700·900 여섯 단과 한글음절 full을 갖춰, 배송 안내 400과 교환 조건 500처럼 반 단계씩 올려 쓰는 방식이 통합니다.

제목 폰트가 얇기 때문에 h1을 40px 아래로 내리면 자간이 눌립니다. 본문 기준 행간 1.65., 크기는 h1 4052px, h2 2430px, 본문 16~17px입니다. 라이선스는 양쪽 모두 상업·수정·재배포 가능이라 쇼핑몰 템플릿 배포에도 묶기 쉽습니다. 함께 쓸 영문 폰트는 제목 Fraunces·Recoleta·Manrope, 본문 Inter·IBM Plex Sans·Source Sans Pro. designnews 페어링 점수 84. 배민 한나체 Air+노토 산스 KR 조합 보기.

G마켓 산스 + 고딕 A1

G마켓 산스

G마켓 산스는 300·500·700 세 단짜리 산세리프인데, 제목에 쓰는데도 본문 축을 끼고 있어 소제목과 캡션을 한 가족 안에서 나눌 수 있습니다. 한글음절 full. 제작은 산돌이 맡았습니다. 제품명과 서브 카피를 한 폰트로 묶고 싶을 때 쓰기 좋은 구성입니다. 본문은 고딕 A1. 굵기 100900 아홉 단이 열려 있고 음절도 full이라, 숫자 표가 섞인 가격 영역에서 400700을 섞어 자리폭을 맞추기 쉽습니다.

두 폰트 모두 상업·수정·재배포 가능이라 조합에 걸림이 없습니다. 추천 사이즈는 h1 4052px, h2 2430px, 본문 16~17px, line-height 1.65. 함께 쓸 영문 폰트는 제목 Manrope·Plus Jakarta Sans·Satoshi, 본문 Inter·IBM Plex Sans. designnews 페어링 점수 84. 톤 태그는 이커머스 친근·리테일 프로모션·라이프스타일 캐주얼. G마켓 산스+고딕 A1 조합 보기.

카페24 프로업 + 나눔고딕

카페24 프로업

카페24 프로업은 디스플레이 분류의 1축(400) 서체입니다. 한글음절은 partial. 상세페이지 안에서 쓸 때는 자주 쓰는 상용 단어 범위를 미리 돌려 본 뒤 폴백이 걸리는 음절을 체크해 두는 쪽이 안전합니다. 본문은 나눔고딕. 굵기 400·700·800 세 단과 한글음절 full. 안내문·배송 조건·교환 사유처럼 400 본문과 700 강조가 번갈아 나오는 영역에 씁니다.

제목 사이즈는 다른 쌍보다 한 단계 내려 h1 3648px, h2 2428px, 본문 16~18px, line-height 1.6. 획 끝의 장식이 있는 제목이라 48px를 넘기면 소제목 두 줄짜리에서 간섭이 생깁니다. 두 폰트 모두 상업·수정·재배포 가능합니다. 나눔고딕은 출처표기 권장 축이 붙어 있어 사용 환경에 따라 배포처 원문 확인이 필요합니다. 함께 쓸 영문 폰트는 제목 Plus Jakarta Sans·Manrope·Satoshi, 본문 Inter·Source Sans Pro. designnews 페어링 점수 82. 카페24 프로업+나눔고딕 조합 보기.

더잠실체 + 나눔스퀘어 라운드

더잠실체

더잠실체는 100·300·400·500·700·800 여섯 단짜리 sans+display 가족입니다. 음절은 full. 가는 100으로 가면 디스플레이 결이 사라지고, 중간 축으로 가면 제품 설명 소제목에 맞물립니다. 본문은 나눔스퀘어 라운드로 받칩니다. 300·400·700·800 네 축에 음절은 partial. 라운드 처리된 획 끝이 제목의 모서리 결과 톤을 맞춥니다.

라이선스 축에서 더잠실체는 수정·재배포·웹임베드가 unstated 상태입니다. 상용 범위 안에서는 쓸 수 있다고 적혀 있지만, 웹폰트 임베딩이나 자소 수정이 필요한 쇼핑몰에서는 배포처 원문 확인이 선행 조건입니다. 본문은 상업·수정·재배포 가능합니다. 추천 사이즈 h1 4052px, h2 2430px, 본문 16~18px, line-height 1.65. 제목 영문 Plus Jakarta Sans·Manrope·Satoshi, 본문 영문 Inter·IBM Plex Sans 조합을 권합니다. designnews 페어링 점수 82. 더잠실체+나눔스퀘어 라운드 조합 보기.

주아 + 나눔스퀘어

주아

주아는 Google Fonts로 배포되는 400 1축 디스플레이이고, 음절은 ks2350입니다. 획 두께는 두껍고 끝이 둥급니다. 간식·소프트 리빙·굿즈 상세페이지 소제목에 쓰는 쪽이 톤과 맞습니다. 본문은 나눔스퀘어가 받칩니다. 300·400·700·800 네 축에 한글음절 partial. 라운드 없이 각이 선 획이라, 둥근 주아의 소제목 밑에서 안내 본문이 또렷하게 떨어집니다.

주아는 ks2350이라 상용 2350자 범위를 넘는 신조어·외래어가 들어오면 폴백이 걸릴 수 있습니다. 상세페이지 카피에서 희귀 음절을 자주 쓰는 카테고리라면 쌍 1·3·7처럼 음절 full 제목으로 바꾸는 편이 맞습니다. 추천 사이즈 h1 3648px, h2 2228px, 본문 16~17px, line-height 1.65. 두 폰트 모두 상업·수정·재배포 가능이고 본문은 출처표기 권장입니다. 함께 쓸 영문 폰트는 제목 Plus Jakarta Sans·Manrope·Geist, 본문 Inter·IBM Plex Sans. designnews 페어링 점수 82. 주아+나눔스퀘어 조합 보기.

야놀자 야체 + 노토 산스 KR

야놀자 야체

야놀자 야체는 400·700 두 축을 가진 sans+display입니다. 음절은 ks2350. 두 축이 열려 있어 h1 Bold, h2 Regular 식으로 제목 안에서도 위계가 생깁니다. 여행·레저·숙박·액티비티 상세페이지 톤에 가깝습니다. 본문은 노토 산스 KR로 받칩니다. 굵기 여섯 단과 한글음절 full. 체류 조건·환불 규정처럼 조건절이 긴 본문에서도 400으로 7줄 이상이 안정적으로 흐릅니다.

두 폰트 모두 상업·수정·재배포 가능이라 묶어 쓰기 좋습니다. 추천 사이즈 h1 4052px, h2 2430px, 본문 16~17px, line-height 1.65. 함께 쓸 영문 폰트는 제목 Plus Jakarta Sans·Manrope·Satoshi, 본문 Inter·IBM Plex Sans. designnews 페어링 점수 82. 톤 태그는 여행·레저 캐주얼, 이커머스 프로모션, 라이프스타일 친근. 야놀자 야체+노토 산스 KR 조합 보기.

티몬 몬소리 + 나눔스퀘어 라운드

티몬 몬소리

티몬 몬소리는 400 한 축, 한글음절 full의 sans+display입니다. 획 끝이 통통하고 가로획이 두껍습니다. 할인·쿠폰·타임딜 소제목에서 쓰는 결입니다. 본문은 나눔스퀘어 라운드 네 축을 씁니다. 둘 다 라운드 결이 있어 모서리가 어긋나지 않습니다.

라이선스 축에서 티몬 몬소리는 수정·재배포가 해당없음, 출처표기는 조건부로 표시돼 있습니다. 자소 수정이나 번들 재배포가 필요한 쇼핑몰 템플릿 작업에는 올리기 전에 배포처 원문 확인이 필요합니다. 본문 쪽은 상업·수정·재배포 가능합니다. 추천 사이즈 h1 3648px, h2 2228px, 본문 16~18px, line-height 1.65. 함께 쓸 영문 폰트는 제목 Fredoka·Quicksand·Baloo 2, 본문 Nunito·Manrope. designnews 페어링 점수 78. 티몬 몬소리+나눔스퀘어 라운드 조합 보기.

Gasoek One + 프리텐다드

Gasoek One

Gasoek One은 400 한 축의 산세리프인데 획이 두껍습니다. JAMO 제작이고 한글음절은 partial. 캠페인·세일·런칭 티저처럼 h1을 4872px까지 올리는 화면에서 쓰임이 맞습니다. 획이 두꺼운 만큼 작은 사이즈로 내려오면 자소 안쪽 속공간이 뭉칩니다. 본문은 프리텐다드로 받칩니다. 굵기 100900 아홉 단과 한글음절 full. 본문 400, 가격 라벨 600, 조건 500 식으로 세 단 이상 쌓아도 획 두께가 겹치지 않습니다.

제목이 partial이라 희귀 음절 캠페인 카피에서는 폴백이 걸릴 수 있습니다. 캠페인 소제목은 2040자 범위에서 짧게 끊어 쓰는 쪽이 안전합니다. 두 폰트 모두 상업·수정·재배포 가능합니다. 추천 사이즈 h1 4872px, h2 2836px, 본문 1618px, line-height 1.6. 함께 쓸 영문 폰트는 제목 Anton·Bebas Neue·Archivo Black, 본문 Inter·Pretendard Latin·Manrope. designnews 페어링 점수 88로 9쌍 중 가장 높습니다. 톤 태그는 스타트업 임팩트·스포츠·피트니스 에너지·F&B 캠페인·이커머스 프로모션. Gasoek One+프리텐다드 조합 보기.

상황별 선택 — 상세페이지 세 구간에 어떻게 걸까

세로 이미지 위에 올라가는 소제목은 쌍 1·9가 밀도가 높습니다. 획이 두꺼워 사진의 명암 위에서도 외곽이 뭉개지지 않습니다. 반대로 소프트 톤 카테고리(인테리어 소품, 베이커리, 유아)는 쌍 2·4·6의 얇거나 둥근 소제목이 톤이 맞습니다.

가격 표가 중심인 구간은 본문 폰트의 굵기 축이 넓은 쪽이 유리합니다. 쌍 1(에스코어 드림 9축)·쌍 3(고딕 A1 9축)·쌍 9(프리텐다드 9축)가 여기에 듭니다. 가격 700, 할인율 800, 원가 300 식으로 세 단을 분명하게 벌릴 수 있습니다.

배송·교환·반품 안내가 긴 상세페이지는 본문 7줄 이상이 이어지는 구간입니다. 본문 폰트의 음절이 full인 쌍 1·2·3·4·7·9 가운데 고르면 희귀 음절이 포함된 지역명·외래어에서 폴백이 생기지 않습니다. 쌍 5·6·8의 본문(나눔스퀘어 계열)은 partial이라 지명·전문용어가 섞인 안내문 쪽에서는 미리 돌려 보고 선택하는 편이 안전합니다.

라이선스 축 — 묶어서 쓸 때 조건이 다른 쌍

제목과 본문의 라이선스 축이 다른 쌍이 셋 있습니다. 쌍 1은 제목이 수정 조건부·재배포 조건부라 자소를 뜯어 로고를 만들거나 폰트 폴더째 번들 배포하는 작업은 별도 확인이 필요합니다. 쌍 5의 제목 더잠실체는 수정·재배포·웹임베드가 unstated라 상용 범위를 넘는 사용 전에 배포처 원문 확인이 선행됩니다. 쌍 8의 티몬 몬소리는 수정·재배포 해당없음, 출처표기 조건부. 본문은 모두 상업·수정·재배포 축이 열려 있어 조합의 제약은 제목 쪽 조건에 걸립니다.

나머지 여섯 쌍은 두 폰트 모두 상업·수정·재배포가 열려 있어 쇼핑몰 템플릿 패키지나 CMS 번들에 묶기가 수월합니다. 다만 쌍 4·6·8의 본문은 출처표기 권장 축이 붙어 있습니다. 상세페이지 하단 크레딧 또는 템플릿 안내 영역에 폰트명을 한 번 기재해 두는 쪽이 깔끔합니다.

한 줄 판단

이커머스 활기와 숫자 가독을 함께 잡아야 하면 쌍 1·3·9, 소프트 톤 카테고리면 쌍 2·4·6, 여행·레저와 할인 캠페인은 쌍 7·8을 먼저 보는 쪽이 선택 폭이 좁아집니다.

함께 보기

쇼핑몰 상세페이지 폰트 · 카페24 폰트 전체

공유
#쇼핑몰 폰트#상세페이지 폰트#이커머스 폰트#쇼핑몰 폰트조합#상세페이지 폰트조합#폰트페어링#제목 본문 폰트#상업용 무료 폰트#모바일 상세페이지#프로모션 폰트