여러분 폰트마다 제작물의 인상이 달라진다는 느낌을 받으신적이 있으신가요?
이제부터 저작물의 내용이나 인상에 따라 폰트 선택할 수 있는 기준을 정할 수 있게 정리 해보았습니다.
1. 웹사이트 분위기를 결정하는 4가지 폰트 종류
명조체 / 세리프
특징 : 글자의 획 끝에 삐져나온 장식이 있습니다.
용도 : 신문, 책, 논문, 등 긴 문장의 쓰입니다. 즉 본문에 많이 쓰입니다.
느낌 : 전통적, 권위적, 안정적, 세련된 느낌을 줍니다.
고딕체 / 산세리프
특징 : 글자 끝에 장식선이 없고 획의 굵기가 일정하며 직선적형태를 가지고 있습니다.
용도 : 타이틀, 중간 제목, 그래픽 작업, 웹디자인 등 사용됩니다.
느낌 : 현대적, 심플함, 가독성이 높습니다.
스크립트 / 손글씨체
특징 : 펜, 붓 등으로 직접 쓴 듯한 필기체 및 손글씨 형태입니다.
용도 : 웨딩, 브랜드, 감성적인 로고 및 타이틀에 쓰입니다.
느낌 : 친숙함, 창의적, 우아함, 개성적 느낌을냅니다.
디스플레이 / 장식체
특징 : 가독성보다는 시각적 효과가 큽니다.
용도 : 포스터 제목, 이벤트 배너, 패키지 디자인 등
느낌 : 독특함, 화려함, 콘셉트 느낌을 냅니다.
2. 서비스의 목적에 따른 폰트 매칭 전략
앞서 폰트의 4가지 종류를 알아보았습니다.
그렇다면 내 웹사이트에는 어떤 폰트를 골라야 유저가 나가지 않고 오래 머무를까요?
정답은 ‘내 서비스가 유저에게 주어야 하는 핵심 감정’에 맞춰 폰트를 선택하는 것입니다.
내 목적에 맞는 3가지 실전 폰트 매칭 전략을 알려드립니다.
1) 신뢰와 권위가 필요한 서비스 – 명조체
금융, 법률, 의료, 혹은 고가의 프리미엄 제품을 판매하는 웹사이트라면 유저에게 가장 먼저 ‘신뢰감’을 주어야 합니다.
진중하고 전문적인 느낌을 주는 명조체를 활용하는 것이 좋습니다.
- 적용 팁: 사이트 전체를 명조체로 쓰면 눈이 피로할 수 있으므로, 메인 배너의 큰 카피나 핵심 타이틀에만 명조체를 사용해 묵직한 신뢰감을 주고, 본문은 읽기 편한 고딕체를 쓰는 조합을 추천합니다.
2) 트랜디한 IT 및 테크 서비스 – 고딕체
스타트업, SaaS(소프트웨어 서비스), 테크 블로그, 혹은 젊은 층을 타겟으로 하는 플랫폼이라면 “스마트”와 “트렌디”를 전달해야 합니다.
깔끔하고 군더더기 없는 고딕체가 좋습니다.
- 적용 팁: 현대적인 느낌을 극대화하고 싶다면 자간(글자 사이 간격)을 기본보다 미세하게 줄이고, 서체의 굵기(Weight) 대비를 확실하게 주어
화면이 지루하지 않게 구성해 보세요. 유저가 정보를 직관적으로 인지해 체류시간이 늘어납니다.
3) 감성 커머스 및 이벤트 페이지 – 스크립트
패션, 뷰티, 인테리어 등 감성을 자극해야 하는 커머스나 단기 이벤트 랜딩 페이지라면 유저의 ‘시선을 3초 안에 사로잡는 것’이 최우선 과제입니다.
- 적용 팁: 가독성이 다소 떨어지는 손글씨체나 장식체는 본문에 절대 쓰면 안 됩니다. 대신, 메인 화면의 포인트가 되는 단 한 줄의 키워드나
시그니처 로고 영역에만 제한적으로 사용하여 브랜드의 독창적인 개성을 뇌리에 각인시켜야 합니다.
우리 사이트는 깔끔해 보이고 싶어서 고딕을 썼는데 왜 아마추어 같지? 라는 생각이 든다면, 폰트 종류의 문제가 아니라
폰트의 크기가 행간 규칙이 깨졌기 때문일 확률이 높습니다.
3. 유저를 끝까지 읽게 만드는 폰트 가독성 세팅 법칙
내 서비스에 맞는 완벽한 폰트를 골랐더라도, 글자 크기가 제멋대로이거나 빽빽하게 붙어있다면 유저는 피로감을 느끼게 되어 사이트에서 나가게 됩니다.
웹사이트의 체류시간을 물리적으로 늘리는 3가지 가독성 핵심 세팅 값을 공개합니다.
1) 시선의 흐름을 만드는 크기의 위계 구조
유저는 웹사이트의 모든 글을 정독하지 않고 훑어봅니다. 따라서 중요도에 따라 크기 차이를 확실하게 두어 시선이 자연스럽게 흐르도록 해주어야 합니다.
- 타이틀(H1~H3): 유저의 시선을 확 잡아줄 수 있도록 24px ~ 40px 이상의 큰 크기의 두꺼운 두께를 사용합니다.
- 본문(body): 읽는 데 편안해야 합니다. PC와 모바일 모두 가장 안정적인 14~20px 사이를 추천합니다.
2) 숨통을 틔워주는 행간(Line-height)의 마법
줄과 줄 사이의 간격인 ‘행간’은 체류시간에 가장 결정적인 영향을 미칩니다. 행간이 너무 좁으면 다음 줄을 찾기 어려워 유저가 읽기 어려워 합니다.
- 황금 비율: 본문 크기의 1.5~1.8배로 행간을 지정하는 것이 웹에서 가장 눈이 편안한 비율입니다.
(예 – 본문 16px 행간 24px)
3) 완선도를 결정하는 자간(Letter-spacing) 디테일
글자와 글자 사이의 간격인 ‘자간’은 폰트 전체의 인상을 바꿉니다.
- 웹사이트의 폰트 크기가 커질수록(타이틀용) 자간을 미세하게 좁혀주어야 글자가 퍼져 보이지 않고 꽉 찬 단단한 인상을 줍니다.
한글 자간 : “기본 보다 살짝 좁게”
- 타이틀(크고 두꺼운 글씨) : – 2 ~ – 3%
- 글씨가 커질수록 글자 사이의 여백이 도드라져 보입니다. 자간을 좁혀주어야 눈에 꽉차게 들어와 가독성이 높아집니다.
- 본문 (일반 읽기용 글씨): -0.5 ~ -1%
- 아주 미세하게만 좁혀줍니다. 너무 붙으면 글자가 뭉쳐 보이고, 안 줄이면 벙벙해 보입니다.
영문 자간 : “크기에 따라 다르게”
- 타이틀(대문자 강조): +2 ~ +5%
- 영문 메뉴나 타이틀을 전체 대문자(UPPERCASE)로 쓸 때는 자간을 오히려 넓혀주면 뉴욕 타임즈 같은 고급스럽고 세련된 인상을 줍니다.
- 본문(일반 문장): 0%
- 영문 본문은 자간을 줄이면 알파벳끼리 겹쳐 보여서 가독성이 최악이 됩니다. 웬만하면 0을 그대로 사용합니다.
4. 디자이너 없이 바로 쓰는 웹사이트 무료 폰트 TOP 3
이론과 세팅법을 알았어도 막상 수많은 폰트 중에서 내 웹사이트에 적용할 서체를 고르는 것은 쉽지 않습니다.
라이선스 걱정 없이 상업적으로 이용 가능하며, 웹 가독성이 검증된 ‘치트키 무료 폰트’ 3가지를 추천합니다.
1) 대한민국 웹 표준의 정석 : 프리텐다드(Pretendard)
현재 국내 수많은 IT 기업과 스타트업 랜딩 페이지에서 가장 사랑 받는 고딕체입니다.
애플의 시스템 폰트와 본문 가독성이 가장 유사하게 설계되었습니다.
- 추천 이유: 한글, 영문, 숫자가 혼용되어도 글자 간 밸런스가 완벽합니다. 자간이나 행간을 크게 건드리지 않아도 기본적으로 프로 수준의 깔끔함을 보여줍니다.
- 추천 용도: 스타트업, IT 서비스, 커뮤니티, 블로그 등 모든 웹사이트의 본문 및 타이틀
2) 묵직한 신뢰감을 주는 명조 : 리디바탕(Ridi Batang)
전자책 플랫폼 리디(RIDI)에서 모바일과 웹 화면에서 가장 잘 읽히도록 만든 명조체 입니다.
- 추천 이유: 전통적인 명조체는 웹 화면에서 획이 깨지거나 눈이 피로하기 쉬운데, 리디 바탕은 화면 전용으로 설계되어 가독성이 매우 뛰어납니다.
- 추천 용도: 금융, 법률, 뉴스레터, 브랜딩 스토리가 중요한 뷰티/패션 웹사이트의 타이틀 카피
3) 트랜디하고 세련된 인상 : 프리텐다드와 명조의 믹스
만약 평범한 고딕체가 지루하다면, 타이틀에는 ‘조선일보명조’나 ‘나눔명조’ 같은 얇고 세련된 세리프 폰트를 크게 배치하고, 본문에는 ‘프리텐다드’를 매칭해 보세요.
- 추천 이유: 해외 사이트에서 가장 많이 쓰는 조합으로 고급스러운 타이포그래피를 재현할 수 있습니다.
매출을 바꾸는 디테일, 폰트
웹 사이트의 체류시간을 늘리는 것은 거창한 마케팅 기술이 아닙니다.
유저가 내 페이지에 랜딩한 순간 느끼는 ‘눈의 편안함’과 ‘시각적 신뢰감’이라는 한 끗 차이의 디테일에서 시작됩니다.
아무리 좋은 상품과 글이 있어도 폰트가 깨지거나 자간∙행간이 빽빽해 읽기 불편하다면 유저는 이탈합니다.
반대로 내 서비스의 목적에 맞는 올바른 폰트를 고르고,
오늘 배운 가독성 법칙을 적용한다면 유저는 자연스럽게 스크롤을 끝까지 내리게 될 것입니다.
지금 운영 중인 랜딩 페이지나 블로그가 있다면 오늘 알려드린 자간 설정 하나부터 당장 적용해 보세요.