웹 랜딩 폰트 조합은 두 조건이 겹치는 자리에서 갈립니다. 히어로 영역 4056px에서 자간이 벌어지지 않는 제목용 획, 그리고 1618px 본문에서 자소가 뭉치지 않는 UI 고딕입니다. 핀테크·SaaS·테크 서비스는 이 두 축에 더해 웹 임베딩이 가능한 라이선스가 필요합니다. 아래 9쌍은 designnews DB에서 context='heading', 점수 78 이상, 산업 톤이 핀테크·SaaS·테크·스타트업·B2B에 걸린 조합만 추린 결과입니다.
선정 조건과 측정 축
제목 폰트는 굵기 축이 400과 700 사이에서 명확히 벌어지는지, 한글 음절 지원이 full인지 partial인지 봅니다. partial 폰트는 히어로 카피를 미리 입력해 결자(缺字) 여부를 확인해야 합니다. 본문 폰트는 100~900 구간이 넓을수록 UI 위계를 유연하게 짭니다. 라이선스 축에서는 "웹임베드 free"가 공통 조건이고, 수정 가능 여부가 다르면 로고·커스텀 자소 작업에서 제약이 생깁니다.
추천 사이즈는 쌍마다 h1·h2·본문·행간 값을 그대로 둡니다. 반응형 축소 시 모바일에서 히어로를 32~36px로 내리는 경우가 흔한데, 그때 제목 폰트의 500 굵기가 400처럼 보이는지 미리 확인해 둡니다.
핀테크·SaaS 톤에서 왜 고딕끼리 묶는가
제목에 세리프를 쓰면 본문 16px UI 라벨과 톤이 분리됩니다. 핀테크·B2B SaaS 랜딩은 "신뢰·정확·속도" 세 축이 겹치는 자리라, 제목과 본문 모두 산세리프로 묶고 굵기와 자폭 차이로 위계를 만듭니다. 아래 9쌍은 그 범위 안에서 톤 태그가 다른 조합을 섞었습니다.
IBM 플렉스 산스 KR + 에스코어 드림
제목 쪽 IBM 플렉스 산스 KR은 IBM이 만든 5굵기 패밀리로 100·300·400·500·700을 씁니다. 히어로 44px에서 700을 쓰면 자폭이 넓고 ㅇ·ㅎ의 속공간이 크게 열려 숫자와 영문이 섞여도 밀도가 유지됩니다. 본문의 에스코어 드림은 100부터 900까지 9굵기라 UI 위계를 3단 이상으로 짤 때 폭이 넓습니다. designnews 페어링 점수 86입니다. 두 폰트 모두 웹 임베드 free지만 에스코어 드림은 수정 불가 축이 걸려 있어 자소를 손대 로고로 쓰는 작업에는 못 넣습니다. 본문 전용으로만 다룹니다. 함께 쓸 영문 폰트는 IBM Plex Sans, Inter, Geist입니다. 추천 사이즈는 h1 4048px, h2 2430px, 본문 16~18px, 행간 1.65입니다. IBM 플렉스 산스 KR+에스코어 드림 조합 보기.
나눔스퀘어 네오 + 본고딕
나눔스퀘어 네오는 네이버가 300·400·700·800·900 다섯 굵기로 공개한 산세리프입니다. 900 획이 두껍지만 사각 프레임이 유지돼 히어로 48px에서 글자 사이가 들뜨지 않습니다. 본문의 본고딕은 어도비·구글이 만든 6굵기(100·300·400·500·700·900) 범용 고딕입니다. 자소 설계가 조형적으로 중립이라 네오의 각진 제목 아래에서 본문이 튀지 않습니다. designnews 페어링 점수 86, 톤 태그는 B2B SaaS 신뢰·핀테크 모던·공공기관 안정입니다. 네오는 출처표기 권장 축이 있어 랜딩 푸터에 폰트 출처를 한 줄 넣어두는 쪽이 안전합니다. 함께 쓸 영문 폰트는 Inter, Manrope, Geist입니다. h1 4052px, h2 2430px, 본문 16~18px에 행간 1.65를 권합니다. 나눔스퀘어 네오+본고딕 조합 보기.
수트 + Asta Sans
수트는 윤병선이 설계한 9굵기(100900) 산세리프입니다. 한글 음절이 partial 축이라 히어로 카피에 쓰는 어휘를 먼저 입력해 결자가 없는지 봅니다. 획이 가늘어도 자폭이 넓어 5056px 히어로에서 가로가 꽉 찹니다. 본문의 Asta Sans는 42dot이 공개한 6굵기(300800) 고딕으로 한글 음절 full입니다. 400 자소 뼈대가 수트와 비슷해 제목·본문의 톤 차이가 굵기와 크기에서만 생깁니다. designnews 페어링 점수 86, 톤 태그는 모빌리티 테크·B2B SaaS·핀테크 모던입니다. 두 폰트 모두 상업·수정·재배포·웹 임베드 free입니다. 함께 쓸 영문 폰트는 Inter, Geist, Manrope. h1 4052px, h2 2430px, 본문 1617px에 행간 1.65를 권합니다. 수트+Asta Sans 조합 보기.
고딕 A1 + 나눔스퀘어 네오
고딕 A1은 한양정보통신이 만든 9굵기 산세리프, 한글 음절 full입니다. 100 Thin 획이 균일해 부제·캡션 위계를 얇게 깔 수 있고, 700900을 히어로에 쓰면 꼭짓점이 또렷합니다. 본문의 나눔스퀘어 네오는 400 자폭이 좁은 편이라 1617px UI 라벨에서 가로 공간을 아낍니다. designnews 페어링 점수 82, 톤 태그는 B2B SaaS 모던·핀테크 신뢰·테크 스타트업 깔끔입니다. 네오의 출처표기 권장 축만 유의합니다. 함께 쓸 영문 폰트는 Inter, Manrope, Geist입니다. 사이즈는 제목 h1 4052px, 소제목 h2 2430px, 본문 16~17px, 행간 1.65로 잡습니다. 고딕 A1+나눔스퀘어 네오 조합 보기.
노토 산스 KR + Asta Sans
노토 산스 KR은 구글·어도비 공동 작업, 6굵기(100·300·400·500·700·900), 한글 음절 full입니다. 히어로 44px에서 700을 올리면 자소 폭이 넓어 공간을 많이 쓰는 대신 밀도가 안정됩니다. 본문의 Asta Sans는 400·500 자소 균형이 노토 400보다 살짝 좁아, 제목과 본문의 자폭 차이가 결을 만듭니다. designnews 페어링 점수 82, 톤 태그는 B2B SaaS·모빌리티 테크·핀테크 모던입니다. 두 폰트 모두 웹 임베드 free, 수정 가능입니다. 함께 쓸 영문 폰트는 Inter, Manrope, Geist. 추천 사이즈는 h1 4048px, h2 2430px, 본문 16~17px, 행간 1.65입니다. 노토 산스 KR+Asta Sans 조합 보기.
본고딕 + Asta Sans
제목에 본고딕을 쓰고 본문에 Asta Sans를 쓰는 조합은 자소 뼈대가 비슷한 두 고딕을 굵기 차이로만 분리하는 설계입니다. 본고딕 700900은 가로획과 세로획 대비가 작아 50px 히어로에서 획이 뭉치지 않습니다. Asta Sans 400은 본고딕 400보다 자폭이 약간 좁아 본문 16px에서 한 줄에 글자가 더 들어갑니다. designnews 페어링 점수 82, 톤 태그는 B2B SaaS·모빌리티 테크·핀테크 모던·스타트업 신뢰입니다. 두 폰트 모두 수정 가능·재배포 가능·웹 임베드 free입니다. 함께 쓸 영문 폰트는 Inter, IBM Plex Sans, Manrope. 추천 사이즈는 h1 4052px, h2 2430px, 본문 1617px, 행간 1.65. 본고딕+Asta Sans 조합 보기.
스포카 한 산스 네오 + 노토 산스 KR
스포카 한 산스 네오는 스포카가 만든 5굵기(100·300·400·500·700) 산세리프, 한글 음절 partial입니다. 자폭이 좁고 획 끝이 평평해 3644px 히어로에서 선이 날렵합니다. partial 축이라 서비스 용어·숫자 섞인 캐치프레이즈를 미리 조판해 결자를 확인합니다. 본문의 노토 산스 KR은 자폭이 넓어 두 폰트 사이에 가로 폭의 결이 생깁니다. designnews 페어링 점수 82, 톤 태그는 B2B SaaS·핀테크 모던·테크 스타트업입니다. 함께 쓸 영문 폰트는 Inter, Manrope, Geist. 추천 사이즈는 h1 3644px, h2 2428px, 본문 1617px, 행간 1.6입니다. 행간이 다른 쌍보다 짧은 편이라 긴 본문 블록에서는 1.65로 올려 쓰는 쪽이 낫습니다. 스포카 한 산스 네오+노토 산스 KR 조합 보기.
카페24 아네모네 + 노토 산스 KR
카페24 아네모네는 카페24가 공개한 2굵기(300·400) 산세리프입니다. 굵기 축이 좁아 자체 위계를 못 만들기 때문에 히어로 하나에만 올리고, 소제목부터는 본문 폰트의 굵기로 갑니다. 400이 다른 고딕 500 수준으로 또렷해 히어로 4452px에서 획이 선명합니다. 본문의 노토 산스 KR이 6굵기를 가져 아네모네 2굵기의 부족분을 메웁니다. designnews 페어링 점수 86, 톤 태그는 스타트업 임팩트·B2B SaaS·핀테크 모던입니다. 한글 음절 partial이므로 결자 확인이 전제입니다. 함께 쓸 영문 폰트는 Manrope, Plus Jakarta Sans, Geist입니다. 사이즈는 제목 h1 4052px, 소제목 h2 2430px, 본문 1618px, 행간 1.65로 잡습니다. 카페24 아네모네+노토 산스 KR 조합 보기.
스터닝 산스 + 노토 산스 KR
스터닝 산스는 스터닝이 만든 1굵기(700) 디스플레이, 한글 음절 partial입니다. 굵기 축이 하나뿐이라 히어로 4456px 자리에만 올립니다. 자폭이 넓고 세로획이 두꺼워 랜딩 상단에서 임팩트가 먼저 읽힙니다. 본문은 노토 산스 KR로 받칩니다. designnews 페어링 점수 86, 톤 태그는 스타트업 임팩트·핀테크 모던·B2B SaaS입니다. 스터닝 산스는 라이선스 축이 미검증(license_type=commercial_free)으로 분류돼 상업·수정·재배포·웹 임베드 가부를 축별로 단정하기 어렵습니다. 서비스에 투입하기 전에 배포처 원문을 확인합니다. 노토 산스 KR은 축이 모두 열려 있어 웹 임베드에 걸림이 없습니다. 함께 쓸 영문 폰트는 Manrope, Plus Jakarta Sans, Geist. 추천 사이즈는 h1 4456px, h2 2630px, 본문 1618px, 행간 1.65입니다. 스터닝 산스+노토 산스 KR 조합 보기.
상황별 어떤 쌍을 고를까
핀테크 대시보드처럼 숫자·영문 비중이 큰 랜딩이면 IBM 플렉스 산스 KR + 에스코어 드림입니다. 영문 쪽이 라틴 패밀리와 뼈대를 공유해 숫자 조판이 흔들리지 않습니다. 공공·금융 혼합 톤이면 나눔스퀘어 네오 + 본고딕. 두 폰트 모두 한글 음절 full이라 결자 리스크가 없습니다. 모빌리티·테크 스타트업 톤이면 수트 + Asta Sans, 혹은 본고딕 + Asta Sans. Asta Sans 본문은 300~800 여섯 굵기라 UI 상태별 라벨을 넉넉히 분리합니다.
임팩트가 필요한 캠페인 랜딩이면 카페24 아네모네 + 노토 산스 KR, 혹은 스터닝 산스 + 노토 산스 KR입니다. 두 제목 폰트 모두 굵기 축이 좁거나 하나뿐이라 히어로 외 영역은 본문 폰트의 굵기 축에 맡깁니다. 반대로 서비스 전반이 길고 UI 위계가 많다면 고딕 A1 + 나눔스퀘어 네오처럼 9굵기 패밀리를 제목에 두는 쪽이 낫습니다.
라이선스 축을 체크하는 짧은 체크리스트
웹 임베드 가능 여부는 모든 쌍에서 free로 열려 있습니다. 수정 가능 축은 로고·커스텀 자소에 영향을 줍니다. 에스코어 드림은 수정 불가라 자소 변형을 요구하는 작업에 투입하지 않습니다. 출처표기 권장 축이 있는 나눔스퀘어 네오는 푸터·크레딧 영역에 폰트 출처를 명시해 둡니다. 스터닝 산스는 축별 가부가 미검증 상태이므로 배포처 원문 확인이 선행 조건입니다. 그 외 상표 등록·독점 사용·특정 매체 허용 여부는 배포처 원문에서 다시 확인합니다.