Bold가 예뻐 보여서?
폰트 굵기, 이제는 ‘근거’로 선택하자
디자인을 하다 보면 폰트는 자주 바꾸지만, ‘굵기(Font Weight)’는 습관적으로 고르게 되는 경우가 많다.
Thin은 감성 있어 보여서, Bold는 강렬해 보여서. 그렇게 선택한 웨이트는 얼핏 보기엔 문제 없어 보일지 몰라도, 실제 사용자에게 어떤 영향을 주는지는 잘 모르고 넘어가는 경우가 대부분이다.
하지만 폰트 굵기는 단순한 스타일 요소가 아니다.
가독성, 정보전달력, 시선 유도, 접근성까지 직접적인 영향을 준다.
그러니 이제부터는 이렇게 질문해야 한다.
“왜 이 텍스트는 Regular가 아니라 Bold여야 하죠?”
폰트 굵기는 숫자다
폰트 웨이트는 보통 CSS 기준으로 100부터 900까지 100단위로 구분된다.
100은 가장 얇은 Thin, 900은 가장 두꺼운 Black.
실제 디자인에서 자주 쓰이는 구간은 대개 400~700 사이다.
400은 Regular, 본문에 가장 많이 쓰인다.
500은 Medium, 약한 강조나 작은 UI에 자주 쓰인다.
600은 Semi-Bold, 버튼이나 부제목에서 흔히 보인다.
700은 Bold, 제목이나 CTA 같은 강한 시선 유도용이다.
100~300은 감성적이고 미니멀한 인상을 주지만, 작은 크기나 모바일에서는 읽기 어려울 수 있다.
800~900은 브랜딩이나 로고 등 극단적 강조용에 쓰이지만, 일반 UI에서는 과한 경우가 많다.
느낌 말고, 연구로 설명해보자
2003년 Bernard의 가독성 실험
Regular(400)와 Semi-Bold(600)가 인식 속도와 피로도 측면에서 가장 좋은 결과를 보였다.
얇은 웨이트(100~300)는 특히 작은 사이즈에서 식별이 어렵고,
Bold(700 이상)는 오히려 글자 간 구분이 떨어져 인지 시간이 길어졌다.
2001년 Dyson의 시선 추적 실험에 따르면, 적절한 굵기(Regular~Medium)는 시선 이동 효율을 높였다.
반면 Thin이나 Black 같은 극단적 웨이트는 시선을 잡아끄는 대신 시각적 피로를 유발했다.
Google Fonts의 UX 연구
Regular는 본문용으로 가장 안정적이고, 300 이하는 모바일에서 인식률이 급격히 떨어졌다.
Bold는 강조엔 효과적이지만, 본문에서는 오히려 시야를 분산시키는 결과를 만들었다.
WebAIM의 접근성 가이드라인
시각장애나 노안 사용자는 Regular보다 굵은 Semi-Bold 이상을 선호하며,
얇은 글자는 명도 대비 기준을 넘기지 못해 접근성 기준 위반이 될 수 있다고 경고한다.
상황에 따라 달라져야 한다
본문 텍스트는 Regular(400)가 기본이다.
가장 무난하고 피로도가 낮다.
작은 UI 요소(예: 태그, 라벨, 네비게이션 텍스트)는 Medium(500) 이상이 적합하다.
Regular는 작은 사이즈에서 지나치게 연하게 보인다.
버튼, CTA는 Semi-Bold(600) 이상이 권장된다.
클릭 가능한 대상이라는 인식을 주기 위해서는 시각적 강조가 필수다.
제목, 섹션 헤더는 Bold(700)를 쓰는 경우가 많지만,
본문과 충분히 대비만 확보된다면 꼭 700까지 갈 필요는 없다.
600 정도로도 시선을 충분히 유도할 수 있다.
브랜딩 요소나 로고는 100 혹은 900 같은 극단적 웨이트가 어울리는 영역이다.
다만, 실질적인 콘텐츠 영역에서는 잘 쓰이지 않는다.
접근성을 고려한다면 Regular 이상, 가능하면 Semi-Bold 이상을 기본값으로 삼는 것이 좋다.
얇은 글자는 화면에서 보이지 않거나, 고령 사용자에게는 아예 인식되지 않을 수 있다.
실무에서 주의할 점
첫째, 폰트마다 지원하는 굵기 범위가 다르다.
Pretendard는 45종 웨이트와 가변 폰트를 지원하지만, 어떤 폰트는 400/700만 제공되기도 한다.
쓰고 싶은 굵기가 실제로 존재하는지 반드시 확인하자.
둘째, 웹 페이지에 여러 굵기를 불러오면 로딩 속도가 느려진다.
보통 본문(400), 제목(600 또는 700), 버튼(500600) 정도면 충분하다.
필요한 23개만 불러오는 것이 성능상 유리하다.
셋째, 제목과 본문 모두 Bold를 쓰면 아무것도 강조되지 않는다.
정보의 계층 구조를 만들기 위해선 굵기의 대비가 필요하다.
넷째, 모바일에서는 얇은 웨이트에 특히 주의해야 한다.
해상도가 낮은 환경에서는 픽셀이 깨지거나, 글자가 흐릿하게 보일 수 있다.
결론: 굵기도 전략이다
디자인은 감각만으로 설계되지 않는다.
폰트 굵기 하나에도 사용자 경험은 분명히 달라진다.
어떤 버튼은 굵기 때문에 클릭되고, 어떤 본문은 굵기 덕분에 끝까지 읽힌다.
앞으로는 이렇게 물어보자.
- 이 글자는 왜 Bold인가?
- 이 본문은 왜 Regular인가?
그 질문에 답할 수 있다면,
당신은 이미 타이포그래피로 말할 줄 아는 디자이너다.
더 많은 인사이트를 얻고 싶다면, 렛플을 확인해보세요
� https://bit.ly/4nGsEFC
