Bold만 쓰면 강조가 된다고요? font-weight 위계를 다시 잡아야 할 때

슬라이드를 완성하고 나서 뭔가 아쉬운 느낌, 다들 한 번쯤 받아봤을 거예요. 중요한 단어에 Bold 넣고, 소제목도 Bold 넣고, 심지어 제목도 Bold인데 — 화면 전체에서 아무것도 '먼저' 눈에 들어오지 않는 그 상태. 폰트를 바꿔봐도 개선이 없어서 결국 색상을 건드리게 되는 패턴이요.

이게 Bold의 한계가 아니에요. Bold만으로는 강조가 안 된다는 걸 설계 단계에서 이미 놓친 거예요.

"Bold = 강조"라는 통념이 언제 무너지나

Bold가 강조로 느껴지는 건 Bold이기 때문이 아니에요. 주변 텍스트보다 눈에 띄게 두꺼울 때, 그 차이가 강조로 읽히는 거예요.

본문을 Regular(400)로 쓰고 핵심 단어에 Bold(700)를 넣으면 weight 차이가 300 단계입니다. 시선이 자연스럽게 그 단어로 먼저 가요. 그런데 소제목도 Bold, 본문도 Medium, 강조 단어도 Bold면? 어디를 먼저 봐야 하는지 판단 기준 자체가 없어져요. 타이포그래피에서 말하는 "강조가 넘쳐나면 강조가 없는 것과 같다" — 바로 이 상황이에요.

weight 대비가 특별한 이유는 추가 공간을 전혀 안 쓴다는 거예요. 크기, 색상, 자간으로도 위계를 만들 수 있지만, 그건 레이아웃 자체를 건드리게 됩니다. weight는 같은 크기·같은 색상의 텍스트 안에서도 400과 700의 차이를 즉각적으로 전달해요.

CSS 기준으로 font-weight는 100(Thin)부터 900(Black)까지 100 단위로 정의되고, 400이 Regular, 700이 Bold입니다. 가변 폰트(variable font)는 1~1000 사이 임의 값도 허용해요. 강조 효과를 실제로 만들려면 인접 레벨 간 최소 200~300 단계 이상의 차이가 필요하다는 게 실무에서 자주 쓰이는 기준입니다.

그런데 한글 폰트가 지원하는 단계가 폰트마다 다릅니다

라틴 폰트에 비해 한글은 획이 복잡해서 굵기를 세밀하게 나누기가 어려웠어요. 그래서 오래된 한글 폰트 중엔 Regular·Bold 2단계만 지원하는 경우가 많았죠. 그런데 최근 오픈소스 한글 폰트는 달라졌어요.

프리텐다드가 9단계를 지원하는 건 한글 폰트 중에서 꽤 이례적이에요. 덕분에 400(본문)→600(소제목)→800(대제목)처럼 같은 폰트 패밀리 안에서 세밀한 3단 위계를 깔끔하게 잡을 수 있어요.

반면 나눔고딕처럼 400·700 두 단계뿐인 폰트는 소제목과 대제목을 weight만으로 나누기가 어려워요. 크기나 색상 같은 다른 대비 수단을 함께 써야 하는 거죠. 어떤 폰트가 실제로 어떤 weight를 지원하는지는 폰트비에서 미리보기로 직접 확인해볼 수 있어요. 선택 전에 weight를 바꿔가며 렌더링 차이를 눈으로 보는 게 제일 확실해요.

여기서 한 가지 함정이 더 있어요. 폰트가 해당 weight 파일을 아예 갖고 있지 않을 때 어떻게 되느냐인데 — 브라우저가 그냥 400 파일을 기반으로 굵기를 임의 생성해버려요. 이게 faux bold입니다. 이 경우 획 두께가 균일하게 늘어나지 않아서 글자가 뭉개져 보이고, CSS에서는 `font-weight: 600`으로 설정했으니 효과가 있겠거니 착각하게 됩니다. 폰트를 결정하기 전에 필요한 weight 단계를 실제로 지원하는지 확인하는 게 먼저예요.

Bold가 강조를 잃는 세 가지 경로

작업물에서 반복해서 나오는 패턴이 딱 세 가지 있는데, 각각 무너지는 방식이 달라요.

전부 Bold — 강조할 수단을 스스로 없애버리는 경우

전부 Bold, 또는 전부 Regular. 언뜻 깔끔해 보이지만 독자는 구조를 파악하는 데 크기와 위치에만 의존하게 돼요. 텍스트가 많아질수록 피로도가 누적되고, 스크롤하면서 섹션 경계가 직관적으로 잡히지 않는 느낌이 생기죠.

프레젠테이션에서 모든 텍스트를 Bold로 밀어버리는 패턴이 특히 많아요. 슬라이드 전체가 Bold면, 정작 강조가 필요한 순간에 쓸 수단이 없어지는 거예요.

본문이 너무 굵어서 강조가 가짜가 되는 경우

"강조한 것 같은데 별로 눈에 안 띈다"는 피드백을 자주 받는다면 이 패턴 먼저 의심해보세요. 본문을 Medium(500)이나 SemiBold(600)로 설정해두고 강조 단어에 Bold(700)를 넣으면, 차이가 100~200 단계에 불과해서 강조가 있는 것도 같고 없는 것도 같은 어중간한 상태가 됩니다. 모바일처럼 해상도 조건이 까다로운 환경에선 차이가 거의 안 느껴지기도 해요. 본문 weight를 400(Regular)으로 내려야 강조 단어의 700이 비로소 살아납니다.

위계가 뒤집혀서 어디부터 읽어야 할지 모르게 되는 경우

"본문을 잘 읽히게 하려고" Bold를 쓰고, 소제목은 가볍게 Light로 처리하면 어떻게 될까요? 시각적 위계가 뒤집혀요. 소제목보다 본문이 먼저 눈에 들어오고, 독자는 어디서부터 읽어야 할지 화면 전체를 훑어야 하는 상황이 됩니다.

Bold가 "더 잘 읽힌다"는 건 짧은 제목이나 강조 단어에 한정된 이야기예요. 긴 본문에 Bold를 쓰면 오히려 눈이 쉽게 피로해집니다. 본문 가독성은 굵기가 아니라 적절한 크기·행간·자간으로 확보하는 거예요.

그럼 weight 위계를 어떻게 설계하나

아래는 웹·앱·문서 디자인에서 자주 쓰이는 weight 배분 기준이에요. 절대 공식은 아니지만, 대비 관계를 처음 설계할 때 출발점으로 쓰기 좋아요.

웹/앱 UI (프리텐다드 기준)

핵심은 인접한 레벨 간 차이를 최소 200 단계 이상으로 유지하는 거예요. 400→600→800의 3단이 가장 깔끔하고, 소제목 단계를 하나 더 나누고 싶으면 500(Medium)을 끼워 넣어 4단으로 확장할 수 있어요.

weight 종류는 한 디자인 안에서 세 가지 이내로 제한하는 게 좋아요. 너무 많이 쓰면 대비가 의미를 잃어요. 인라인 강조가 추가로 필요하면 색상 대비를 더하거나 소제목과 같은 600~700을 쓰는 방식이 깔끔합니다.

크기와 weight를 함께 바꾸면 대비가 두 배로 느껴지기도 해요. 소제목은 크기도 크고 weight도 높으니까 대비가 이중으로 작동하고, 캡션처럼 크기를 줄이면서 weight도 낮추면(300·400) 중요도가 낮다는 신호를 두 가지로 동시에 전달할 수 있어요.

한글과 라틴 문자는 같은 font-weight 값이라도 체감이 달라요. 한글은 획이 복잡해서 같은 값에서도 더 두껍게 보이는 경향이 있고, 특히 700 이상에서 글자가 뭉쳐 보일 수 있어요. 본문에 Regular를 썼는데도 한글이 무거워 보인다면 Light(300)가 오히려 편한 경우도 있으니, 실제 텍스트로 렌더링을 먼저 확인해보는 게 좋아요. 🖋️

weight 배분 점검 목록

설계를 끝내고 최종 확인할 때 아래 항목을 순서대로 체크해보세요. 놓치는 게 확실히 줄어요.

• 본문 weight는 400(Regular) 이하인가?
• 소제목과 본문의 weight 차이가 200 이상인가? 대제목과 소제목도 마찬가지.
• 인라인 강조 단어의 weight가 본문보다 최소 200 높은가?
• 전체 디자인에서 사용 중인 weight 종류가 4가지 이하인가?
• 사용 중인 폰트가 필요한 weight 단계를 실제로 지원하는가?
• 브라우저가 없는 weight를 임의 합성(faux bold)하지 않고 있는가?

특히 마지막 두 항목은 웹폰트에서 자주 놓쳐요. 폰트가 필요한 weight를 지원하는지, faux bold가 개입하고 있는지는 폰트비에서 weight별 미리보기로 먼저 확인하는 게 빠릅니다.

weight 결정은 최대한 일찍, 전체 텍스트 계층을 한눈에 놓고 해야 조각별로 결정할 때보다 실수가 줄어요. Bold 하나로 다 해결하려다가 어느 순간 "왜 아무것도 눈에 안 들어오지?"가 되는 건, 대부분 폰트 문제가 아니라 weight 배분 설계를 건너뛴 결과예요.

참고자료

• MDN Web Docs — font-weight (developer.mozilla.org)

Google Fonts Knowledge — Introducing weights & styles (fonts.google.com)