홈페이지를 만들 때 폰트를 대충 정하는 경우가 많습니다. "기본 폰트 그냥 쓰면 되지 않나요?"라는 질문도 많이 받습니다. 시스템 기본 폰트도 나쁘지 않지만, 브랜드에 맞는 웹폰트를 제대로 적용하면 홈페이지 전체의 완성도가 눈에 띄게 달라집니다. 특히 한글 홈페이지에서 폰트 선택은 디자인 퀄리티에 큰 영향을 줍니다.

01

폰트가 브랜드 감성을 만드는 방식

세리프 vs 산세리프

폰트는 크게 세리프(획 끝에 장식이 있는 서체)와 산세리프(획 끝이 깔끔한 서체)로 나뉩니다. 세리프 계열은 권위, 전통, 고급스러움의 느낌을 줍니다. 법률 사무소, 고급 브랜드, 문학·출판 관련 홈페이지에 어울립니다. 산세리프 계열은 현대적, 깔끔함, 기술적인 느낌을 줍니다. IT 서비스, 스타트업, 미니멀 브랜드에 잘 맞습니다.

02

추천 한글 웹폰트

Pretendard
홈페이지 제작의 모든 것
현재 가장 많이 쓰이는 한글 웹폰트. 가독성이 뛰어나고 굵기(weight) 선택지가 많아 제목부터 본문까지 하나로 커버 가능합니다.
무료산세리프범용
Noto Sans KR
홈페이지 제작의 모든 것
구글이 만든 오픈소스 한글 폰트. Google Fonts에서 바로 불러올 수 있어 편리합니다. 안정적이고 가독성이 좋아 정보 중심 홈페이지에 적합합니다.
무료구글폰트안정적
Noto Serif KR
홈페이지 제작의 모든 것
구글의 한글 세리프 폰트. 전통적이고 신뢰감 있는 느낌을 줍니다. 법률·의료·문화 관련 홈페이지나 고급스러운 감성이 필요할 때 잘 어울립니다.
무료세리프고급감
나눔스퀘어 Neo
홈페이지 제작의 모든 것
네이버가 배포하는 한글 폰트. 각진 형태로 또렷한 느낌을 줍니다. 네이버 클라우드 CDN으로 빠르게 로딩되어 국내 서비스에 최적화되어 있습니다.
무료산세리프또렷함
03

폰트 조합 원칙

제목과 본문은 다른 폰트를 써도 된다

제목(H1, H2)에는 개성 있는 세리프 폰트, 본문에는 가독성 좋은 산세리프 폰트를 조합하면 세련된 인상을 줍니다. 이 블로그에서 제목에 DM Serif Display, 본문에 시스템 산세리프를 쓰는 것처럼요. 단, 폰트는 최대 2~3가지를 넘지 않도록 하세요.

폰트 굵기(weight)로 위계를 만든다

같은 폰트라도 굵기를 다르게 쓰면 정보 위계가 생깁니다. 제목은 Bold(700), 소제목은 Medium(500), 본문은 Regular(400)나 Light(300)처럼 굵기로 중요도를 구분하면 읽기 편한 홈페이지가 됩니다. 여러 폰트를 섞는 것보다 하나의 폰트를 굵기로 활용하는 것이 통일감이 있습니다.

웹폰트는 로딩 속도에 영향을 줍니다. 폰트 파일이 클수록 홈페이지가 느려집니다. 폰트는 실제 사용하는 굵기(weight)만 불러오세요. 예를 들어 Pretendard를 쓴다면 300, 400, 500, 700 중에서 실제 쓰는 굵기만 import하면 로딩 속도를 줄일 수 있습니다. Google Fonts에서도 필요한 굵기만 선택해서 불러올 수 있습니다.

04

업종별 폰트 방향성