카드뉴스 폰트 조합 추천 가이드와 타이포그래피 계층 수식

2026년 7월 23일

카드뉴스나 썸네일, 웹 포스터를 만들 때 제목 폰트와 본문 폰트를 어떻게 짝지어야 할지 고민되는 경우가 많습니다. 서로 어울리지 않는 두 서체를 나란히 쓰면 가독성과 완성도가 함께 떨어지지만, 검증된 조합 몇 가지와 크기 비율을 정하는 규칙만 알아도 결과가 달라집니다. 이 글은 무료 상업용 한글/영문 폰트 조합과 제목·본문 크기 비율(모듈러 스케일)을 정하는 방법을 정리합니다.

요약 ① 카드뉴스 한 장에는 제목용 서체 1개, 본문용 서체 1개로 최대 2종류만 쓰는 것이 가독성 유지의 기본 원칙입니다. ② 제목 크기는 본문 크기에 1.25, 1.414, 1.618 중 하나의 배율을 곱해 정하면 계층이 분명해집니다. ③ 나눔명조 Bold+Pretendard Regular, Pretendard Black+Pretendard Regular, Gmarket Sans Black+Apple SD Gothic Neo Medium 조합은 도구에 프리셋으로 준비되어 있습니다.

폰트 조합이 카드뉴스 완성도를 좌우하는 이유

카드뉴스나 썸네일 완성도의 상당 부분은 제목 폰트(Heading Font)와 본문 폰트(Body Font)의 조합에서 갈립니다. 서로 어울리지 않는 폰트를 고르면 타이틀과 본문 사이 가독성 균형이 무너져 무성의한 인상을 주지만, 굵은 제목용 고딕 서체와 가독성이 좋은 본문 서체를 세트로 맞추면 안정된 분위기를 낼 수 있습니다.

문제는 폰트 종류가 워낙 많고, 상업적으로 사용 가능한 무료 폰트인지 하나하나 저작권 조건을 확인하는 절차도 따로 필요하다는 점입니다. 매번 처음부터 대조하는 대신, 검증된 조합과 크기 비율 규칙을 기준으로 삼으면 시행착오를 줄일 수 있습니다.

제목·본문 크기 비율과 폰트 조합을 직접 정하는 방법

제목 폰트 크기는 본문 폰트 크기에 배율을 곱해서 정합니다. 배율로는 보통 1.25, 1.414(2의 제곱근), 1.618(황금비) 중 하나를 사용하며, 계층을 여러 단계로 나눌 때는 이 배율을 단계 수만큼 거듭 곱합니다. 예를 들어 본문 크기가 16px이고 한 단계 위 계층에 배율 1.618을 적용하면 제목 크기는 16 × 1.618 ≈ 25.9px가 됩니다.

실무에서 자주 쓰이는 무료 상업용 폰트 조합

클래식 에디토리얼 콤보 (나눔명조 Bold + Pretendard Regular): 인문학, 에세이, 뷰티/브랜드 카드뉴스처럼 우아하고 차분한 분위기에 어울립니다.
모던 비즈니스 콤보 (Pretendard Black + Pretendard Regular): IT·SaaS, 뉴스레터, 정보성 카드뉴스에 적합한 조합입니다.
하이 임팩트 콤보 (Gmarket Sans Black + Apple SD Gothic Neo Medium): 프로모션 할인 행사, 유튜브 썸네일, 이벤트 배너처럼 시선을 확 끌어야 할 때 적합합니다.
레트로 클래식 콤보 (Courier New/Georgia Bold + 나눔명조 Regular): 감성적인 스토리텔링, 옛 감성이 필요한 카드뉴스에 어울립니다.

이 배율 계산과 조합을 코드로 직접 확인해보고 싶다면, 구글 폰트(Google Fonts) API를 동적으로 불러와 미리보기를 렌더링하는 방식을 쓸 수 있습니다.

function loadFontPairing(headingFont, bodyFont) {
  const headingClean = headingFont.replace(/ /g, '+');
  const bodyClean = bodyFont.replace(/ /g, '+');
  const linkId = 'dynamic-google-fonts';

  let linkEl = document.getElementById(linkId);
  if (!linkEl) {
    linkEl = document.createElement('link');
    linkEl.id = linkId;
    linkEl.rel = 'stylesheet';
    document.head.appendChild(linkEl);
  }

  // Google Fonts API 다중 서체 로드
  linkEl.href = 'https://fonts.googleapis.com/css2?family=' + headingClean + ':wght@700;900&family=' + bodyClean + ':wght@400;500&display=swap';

  // CSS 변수 갱신
  document.documentElement.style.setProperty('--heading-font', headingFont);
  document.documentElement.style.setProperty('--body-font', bodyFont);
}

이 코드는 폰트 이름만 바꾸면 조합을 계속 바꿔볼 수 있지만, 매번 코드를 실행하고 결과를 눈으로 대조하는 과정이 필요합니다. 검증된 조합을 바로 대조하고 1:1 카드 캔버스 위에서 결과를 확인하려면, 저희 도구로 확인하기.

카드뉴스용 무료 폰트 조합 추천 가이드

검증된 카드뉴스 전용 한글/영문 폰트 조합 세트를 선택하고 1:1 카드 대지 위에서 실시간 가독성과 시각적 조화를 비교해 보세요.

폰트 굵기와 개수 규칙

항목	권장 값	이유
카드 한 장의 서체 종류	최대 2가지 (제목 1 + 본문 1)	3가지 이상 섞이면 시각적 혼란이 커짐
제목 폰트 굵기(Weight)	700~~900 (Bold~~Black)	본문과 굵기 대비를 크게 벌려 시선을 끔
본문 폰트 굵기(Weight)	400~~500 (Regular~~Medium)	긴 문장을 읽을 때 눈의 피로를 줄임

정리

카드 한 장의 서체는 제목용 1개, 본문용 1개, 최대 2가지로 제한하는 것이 기본 원칙입니다.
제목 크기는 본문 크기에 1.25, 1.414, 1.618 중 하나의 배율을 곱해 정하면 계층이 분명해집니다.
제목은 굵기 700~~900(Bold~~Black), 본문은 400~~500(Regular~~Medium)으로 대비를 주면 시선이 제목으로 먼저 갑니다.
나눔명조 Bold+Pretendard Regular, Pretendard Black+Pretendard Regular, Gmarket Sans Black+Apple SD Gothic Neo Medium은 도구에 프리셋으로 준비된 조합입니다.

카드뉴스용 무료 폰트 조합 추천 가이드

검증된 카드뉴스 전용 한글/영문 폰트 조합 세트를 선택하고 1:1 카드 대지 위에서 실시간 가독성과 시각적 조화를 비교해 보세요.

📖 실제 사용자들이 겪는 현실적인 사연과 트러블

실무 현장과 일상에서 관련 작업을 진행하다 보면 예상치 못한 수많은 문제에 직면하게 됩니다. 다음은 실제 사용자들이 가장 빈번하게 겪는 대표적인 실패 사례들입니다.

사연 1: 장식용 서체의 남용으로 인한 독자 이탈

스타트업 마케터 J씨는 6장짜리 카드뉴스를 제작하면서 장마다 다른 5가지의 화려한 캘리그라피와 고딕 폰트를 섞어 사용했습니다. 그 결과, 독자들이 심각한 시각적 피로를 느껴 3번째 슬라이드에서 이탈률이 무려 85%에 달하는 처참한 결과를 얻었습니다. 폰트의 통일성이 깨지면 콘텐츠의 신뢰도까지 함께 추락한다는 것을 보여줍니다.

사연 2: 시각적 위계(Visual Hierarchy)의 역전

콘텐츠 크리에이터 K씨는 섬세하고 얇은 세리프(명조) 서체를 제목으로, 아주 두꺼운 울트라 볼드(Ultra-Bold) 산세리프(고딕) 서체를 본문으로 배치했습니다. 그 결과 독자의 시선이 핵심 메시지인 헤드라인보다 부차적인 설명 텍스트에 먼저 쏠려, 정보 전달의 우선순위가 완전히 붕괴되는 경험을 했습니다.

사연 3: 상업용 라이선스 위반으로 인한 법적 분쟁

프리랜서 디자이너 L씨는 클라이언트의 상업용 캠페인에 예쁜 커스텀 폰트를 무단으로 사용했다가 라이선스 검증을 소홀히 한 대가로 저작권 침해 내용증명과 함께 2,000,000원의 합의금을 요구받았습니다. 상업용 무료(OFL) 폰트가 아닌 서체를 비즈니스 홍보물에 사용할 때 발생하는 가장 치명적인 사고입니다.

🔬 핵심 기술 메커니즘 — 모듈러 스케일과 폰트 해부학

문제가 발생하는 근본적인 기술적 배경을 이해하면 어떤 상황에서도 당황하지 않고 올바른 해결책을 도출할 수 있습니다.

모듈러 스케일 타이포그래피 수학 (Modular Scale)

글씨 크기를 임의로 정하는 대신, 수학적 비율에 따라 폰트 크기를 배율로 키우는 방식입니다. 수식은 다음과 같습니다. $S_n = S_0 \times r^n$ 여기서 $S_0$는 기본 본문 크기(예: 16px), $r$은 조화로운 배율(Ratio)을 의미합니다.

단3도 (Minor Third, 1.200) / 장3도 (Major Third, 1.250): 공간이 좁은 모바일 카드뉴스에 적합합니다.
증4도 (Augmented Fourth, 1.414 / $sqrt{2}$): 제목과 본문 사이의 안정적이고 균형 잡힌 대비를 만듭니다.
황금비 (Golden Ratio, 1.618 / $phi$): 시선을 확 끄는 임팩트 있는 에디토리얼 헤드라인에 사용됩니다.

서체 해부학(Typeface Anatomy)과 페어링 조화

두 폰트를 조합할 때는 **x-하이트(x-height, 소문자 x의 높이)**가 비슷한 서체를 고르는 것이 유리합니다. 또한 획 두께가 일정한 단선적인 고딕(Monoline Sans)과 획 대비(Stroke Contrast)가 강한 명조(Serif)를 조합하면 서로 보완적인 훌륭한 대비를 이룹니다.

폰트 굵기(Weight) 대비의 원칙

제목과 본문 폰트 굵기는 최소 3단계 이상의 차이(Delta)를 두어야 합니다. 예를 들어, 제목에 Bold(700)나 Black(900)을 썼다면 본문에는 Regular(400)나 Medium(500)을 사용하여 확실한 무게감 차이를 만들어야 시각적 위계가 성립됩니다.

상업용 폰트 라이선스(License)의 이해

OFL (SIL Open Font License): 폰트를 수정, 상업적 사용, 앱 내 임베딩(Embedding) 등 거의 모든 용도에 무료로 사용 가능한 가장 안전한 라이선스입니다. (예: Google Fonts)
일반 무료(Freeware) 폰트는 비상업적 용도에만 한정되거나 인쇄물(Print)은 허용하되 CI/BI 로고나 2차 저작물 제작은 금지하는 경우가 많아 눈누(Noonnu) 등에서 제공하는 라이선스 범위를 반드시 확인해야 합니다.

📊 8가지 검증된 한글/영문 상업용 무료 폰트 조합표

목적에 따라 최적화된 폰트 조합과 모듈러 스케일을 적용해 보세요. 아래의 폰트들은 모두 상업적 이용이 가능한 무료 서체들입니다.

제목 폰트 (Heading)	본문 폰트 (Body)	권장 배율 (Ratio)	타겟 분위기 (Mood)	라이선스 및 특징
Pretendard Black	Pretendard Regular	1.414	IT/테크, SaaS	완벽한 x-height 일치, 단일 폰트 패밀리
나눔명조 Bold	Pretendard Regular	1.618	에세이, 리뷰	클래식한 우아함, 획 대비를 통한 가독성
Gmarket Sans Bold	Noto Sans KR Medium	1.618	프로모션, 커머스	강렬한 인상, 이벤트 배너 최적화
Paperlogy Black	Pretendard Medium	1.414	정보성, 인포그래픽	정제된 레이아웃, 신뢰감 주는 디자인
Black Han Sans	KoPub Dotum	1.618	유튜브 썸네일, B급 감성	극도의 두께감, 짧고 굵은 카피에 적합
잘난체 (Jalnan)	Apple SD Gothic Neo	1.414	라이프스타일, 예능	캐주얼하고 둥근 획, 친근한 분위기
Montserrat Bold	Pretendard Regular	1.250	영문 혼용 비즈니스	글로벌 스탠다드, 기하학적 산세리프
Playfair Display	나눔스퀘어 (Nanum Square)	1.618	뷰티, 패션 룩북	영문 제목의 고급스러움과 한글 본문의 조화

⚠️ 흔히 저지르는 치명적인 폰트 조합 실수 5가지

수많은 디자인 초보자들이 무심코 반복하는 대표적인 실수 패턴들을 사전에 점검하여 시각적 혼란을 줄일 수 있습니다.

너무 많은 폰트 패밀리 사용: 카드 한 장에 3가지 이상의 폰트를 섞어 쓰면 시각적인 소음이 발생합니다. 최대 2개로 제한하세요.
애매한 굵기(Weight) 대비: 제목은 Medium(500), 본문도 Medium(500)으로 설정하면 제목이 돋보이지 않아 위계가 무너집니다.
극단적인 x-하이트 불일치: 영문 폰트와 한글 폰트를 혼용할 때 시각적 중심선(x-height)이 맞지 않으면 텍스트가 들쭉날쭉하게 보입니다.
다중 줄 제목의 좁은 행간(Line-height): 두 줄 이상의 제목에 본문용 행간을 그대로 쓰면 글자가 답답하게 뭉쳐 보입니다.

💡 완벽한 타이포그래피를 위한 5단계 실전 워크플로우

1단계 (분위기 및 장르 결정): 카드뉴스의 목적(정보 전달, 감성적 스토리, 프로모션 판매 등)을 파악하여 디자인 무드를 설정합니다.
2단계 (검증된 2-Font 페어링 선택): 위 표를 참고하여 OFL 등 상업용 무료 라이선스가 확인된 폰트 조합을 선택합니다.
3단계 (모듈러 스케일 계산): 본문 크기를 정한 후, 타겟 무드에 맞춰 1.414(안정감) 또는 1.618(임팩트) 배율을 곱해 제목 폰트 크기를 결정합니다.
4단계 (행간 및 자간 튜닝): 제목의 행간(Line-height)은 1.35, 본문의 행간은 1.55 정도로 설정하여 숨통을 트여줍니다.
5단계 (모바일 실기기 가독성 검증): 완성된 시안을 스마트폰의 작은 화면에서 띄워보고 본문이 잘 읽히는지, 텍스트가 뭉개지지 않는지 최종 확인합니다.

🔍 전문가가 공개하는 폰트 페어링 팁 7선

수년간의 실무 노하우와 타이포그래피 분석을 바탕으로 도출된 핵심 팁입니다.

가장 안전한 방법은 '슈퍼 패밀리' 활용: 어떤 조합이 좋을지 모르겠다면 Pretendard Black과 Regular처럼 굵기(Weight) 베리에이션이 다양한 단일 폰트 패밀리를 사용하는 것이 가장 실패 확률이 낮습니다.
대형 한글 제목에는 마이너스 자간(-0.03em) 적용: 한글 폰트는 기본적으로 글자 사이 공간이 넓어, 크기를 키울 경우 '-0.03em'~'-0.05em' 정도로 자간(Tracking)을 좁혀주면 밀도감 있고 단단해 보입니다.
본문과 제목의 x-하이트(x-height) 시각적 일치: 두 폰트를 나란히 배치했을 때 소문자의 높이가 비슷하게 맞아떨어져야 자연스럽게 읽힙니다.
한글 완성형 글립(Glyph) 수 확인: 2,350자만 지원하는 폰트는 '뾱', '쀍' 같은 글자가 깨질 수 있습니다. 11,172자를 모두 지원하는 폰트를 본문에 사용하세요.
최적의 가독성을 위한 글줄 길이(Line Length) 제한: 한 줄에 들어가는 한글이 25~35자를 넘어가면 다음 줄로 시선을 이동하기 어려워지므로 여백을 충분히 두세요.
배경색 대비(Contrast) 테스트: 텍스트와 배경색의 명암비가 부족하면 저시력자는 물론이고 야외 스마트폰 환경에서도 글씨를 읽을 수 없습니다.
웹 폰트 렌더링 도구 적극 활용: 무거운 폰트 파일을 일일이 설치하기 전에, 폰트 페어링 미리보기 웹 도구를 활용하여 조합을 빠르게 시뮬레이션 하세요.

🎯 최종 결정 트리: 어떤 폰트 조합과 배율을 선택해야 할까?

콘텐츠의 장르와 목적에 따라 최선의 선택을 즉시 내릴 수 있는 결정 가이드라인입니다.

SaaS/Tech/IT 정보 전달 ➔ Pretendard Duo (Black + Regular) + 배율 1.414 (신뢰감, 가독성 극대화)
라이프스타일/에세이/인문학 ➔ 나눔명조 Bold + Pretendard Regular + 배율 1.250 (차분함, 몰입도 높은 호흡)
커머스 할인/이벤트 프로모션 ➔ Gmarket Sans + Noto Sans KR + 배율 1.618 (시선 집중, 강렬한 후킹)
컬처/뷰티/패션 룩북 ➔ Playfair Display + 나눔스퀘어 + 배율 1.618 (우아하고 트렌디한 감각)

📑 핵심 용어 사전 및 치트시트 (Terminology)

실무 작업을 진행할 때 반드시 숙지해 두어야 할 타이포그래피 필수 용어입니다.

모듈러 스케일(Modular Scale): 수학적 비율(1.25, 1.414, 1.618 등)을 곱하여 조화로운 타이포그래피 크기 단계를 생성하는 시스템.
폰트 페어링(Font Pairing): 제목과 본문 등 서로 다른 역할의 서체를 시각적으로 조화롭게 조합하는 디자인 기법.
x-하이트(x-height): 알파벳 소문자 x를 기준으로 한 글자의 뼈대 높이. 가독성에 큰 영향을 미침.
획 대비(Stroke Contrast): 글씨 획의 가장 두꺼운 부분과 가장 얇은 부분의 두께 차이.
OFL(Open Font License): 누구나 자유롭게 수정, 배포, 상업적으로 이용할 수 있는 개방형 폰트 라이선스.
자간(Tracking): 단어와 문장 전체의 글자 사이 간격.
행간(Leading): 윗줄의 텍스트 하단과 아랫줄 텍스트 하단 사이의 수직 간격(Line-height).

자주 묻는 질문

Q1. 상업용 폰트인지 법적으로 안전하게 확인하는 방법은 무엇인가요?

가장 안전한 방법은 Google Fonts나 눈누(Noonnu) 같은 플랫폼에서 'OFL(Open Font License)' 명시 여부를 확인하는 것입니다. 만약 라이선스 문서(EULA)가 복잡하게 얽혀 있다면 피하는 것이 좋으며, 출처가 불분명한 폰트 파일(.ttf, .otf)은 절대로 다운로드하여 비즈니스에 사용하지 마세요.

Q2. 한글 폰트를 적용했는데 일부 글자가 'ㅁ'이나 빈칸으로 깨져서 나옵니다. 왜 그런가요?

해당 폰트가 한글 11,172자를 모두 디자인하지 않고, 자주 쓰는 2,350자(KS X 1001 표준)만 제작했기 때문입니다. '갉', '뾱'과 같이 드물게 쓰이는 조합형 글자가 깨진다면, 전체 글립(Glyph)을 지원하는 Noto Sans KR이나 Pretendard로 대체하여 해결해야 합니다.

Q3. 인스타그램 카드뉴스 10장짜리 슬라이드에 가장 적합한 기본 폰트 크기는 얼마인가요?

모바일 인스타그램 앱(가로 1080px 기준)에서 가독성을 잃지 않으려면 본문 크기를 최소 32px~~40px 사이로 설정하는 것이 좋습니다. 여기에 1.414 배율의 모듈러 스케일을 적용하면 소제목은 약 45px~~56px, 메인 헤드라인은 64px~80px 정도로 설정되어 시각적 균형과 가독성을 모두 확보할 수 있습니다.