폰트웨이트 (Font Weight)
쉽게 풀면
글씨가 얇은지 두꺼운지를 나타내는 값으로, 굵을수록 더 강조되어 보인다.
왜 중요한가
글꼴 굵기는 같은 서체 안에서 획의 두께를 단계별(Thin~Black, CSS에서 100~900)로 나눈 것으로, 제목과 본문, 강조와 보조 정보를 서체를 바꾸지 않고 구분하는 위계 표현의 기본 수단입니다. 하나의 서체 가족 안에서 굵기만 달리하면 일관성을 유지하면서 대비를 만들 수 있어, 타입 스케일과 함께 디자인 시스템의 텍스트 스타일을 구성합니다. 본문 중 강조를 굵기로만 처리하면 색에 의존하지 않아 색각이상 사용자나 흑백 인쇄에서도 강조가 유지된다는 장점이 있지만, 굵은 글자가 많아지면 문단의 회색도가 얼룩져 보이므로 절제해서 써야 한다.
논문에서는 이렇게 쓰입니다
글자 굵기 차이가 사용자의 주의를 어디로 이끄는지를 실험한 UI 연구이다.
강조를 위한 굵은 글씨체도 지나치면 오히려 긴 글을 읽는 데 방해가 될 수 있다는 점을 지적한다.
조금 더 깊게 보면
굵기 단계는 서체마다 실제 두께가 달라 같은 700이 서체 A에서는 Bold, B에서는 Semibold처럼 보이며, 웹에서 해당 굵기 파일이 없으면 브라우저가 가짜 굵기(faux bold)를 만들어 형태가 망가집니다. 밝은 배경에서 얇은 굵기는 저시력 사용자와 저해상도 화면에서 읽기 어렵고 어두운 배경에서는 흰 글자가 실제보다 굵어 보이는 광학 현상이 있어 다크 모드에서 한 단계 가볍게 쓰는 조정이 필요합니다. 가변 글꼴은 굵기를 연속값으로 조정할 수 있어 단계 개념 자체를 바꾸고 있습니다. CSS의 font-weight 값(100~900)은 서체 제작사가 각 굵기에 부여한 이름(Thin, Light, Regular, Medium, Bold, Black)과 대응하지만 서체마다 실제로 몇 단계를 지원하는지가 달라, 900을 지정해도 해당 서체에 Black 굵기가 없으면 가장 가까운 값으로 대체된다.
주의할 점
지나치게 많은 폰트웨이트 단계를 한 화면에 사용하면 오히려 시각적 위계가 혼란스러워질 수 있다.
가변 폰트가 아닌 정적 폰트에서 존재하지 않는 굵기를 CSS로 지정하면 브라우저가 기존 획을 인위적으로 두껍게 만드는 가짜 굵기를 생성해 글자 형태가 왜곡되므로, 실제 지원되는 굵기 목록을 미리 확인해야 한다.