폰트 크기 같아도 달라 보이는 이유, px의 진짜 의미

피그마에서 두 폰트를 16px로 맞춰놨는데 하나가 눈에 띄게 크게 보입니다. 대부분은 눈을 의심하거나 "폰트가 원래 좀 크구나" 하고 넘깁니다. 그런데 사실 눈이 정확히 본 겁니다. 오해는 px이라는 단위 자체에 있거든요.

"px = 글자 높이"라는 오해

CSS에서 font-size: 16px이라고 쓰면 글자의 높이가 16px이 된다고 생각하기 쉽습니다. 이것이 가장 흔하고 가장 오래 이어지는 오해입니다.

실제로 font-size가 지정하는 것은 em 사각형(em square) 의 크기입니다. em 사각형은 폰트가 글자를 그리는 가상의 캔버스인데, 눈에 보이는 글자는 이 캔버스 안의 일부 영역만 사용합니다. 이 사각형은 UPM(Units per em)이라는 내부 단위로 설계되는데 폰트마다 달라서(1000, 2048 등 수백~수천 단위), 그 안에서 실제 글자가 차지하는 비율이 폰트마다 다릅니다. 어떤 폰트는 em 사각형의 80% 가까이 채우고, 어떤 폰트는 60%만 채웁니다.

그러니 font-size가 같아도 눈에 보이는 크기는 폰트마다 다를 수밖에 없습니다. pt도 마찬가지입니다. px이나 pt는 글자 크기가 아니라 글자를 담는 그릇의 크기를 지정하는 단위입니다.

같은 px이면 두 폰트를 나란히 써도 크기가 맞는다는 착각

이 오해가 실무에서 훨씬 큰 문제를 일으킵니다. 글자 하나만 봤을 때는 비슷해 보여도, 두 폰트를 같은 줄에 섞어 쓰면 한쪽이 크거나 기준선이 어긋나 보이는 일이 생깁니다.

체감 크기를 실제로 결정하는 건 x-height입니다. x-height는 소문자 'x'의 높이, 즉 베이스라인에서 소문자 평균 높이까지의 거리입니다. 본문을 읽을 때 시선이 주로 머무는 영역이 바로 이 소문자 구간이라, x-height가 크면 같은 px 수치에서도 훨씬 크고 뚜렷하게 느껴집니다.

화면 최적화를 염두에 둔 현대적 폰트일수록 x-height 비율이 높고, 전통적인 인쇄용 폰트일수록 낮습니다. 나눔고딕은 같은 px 수치에서 상대적으로 크게 인식되는 경향이 있습니다. Pretendard는 Noto Sans KR(본고딕)보다 자간과 획에 여유가 있어 미묘하게 작아 보이는 경향이 있습니다. 앱에서 폰트를 교체했을 때 작은 크기·regular weight에서 글자가 흐려 보인다는 피드백이 나오는 경우가 있고, 이때는 weight를 한 단계 올려 대응하기도 합니다.

cap-height도 알아두면 좋습니다. 대문자의 높이를 뜻하며, 제목이나 레이블처럼 대문자 비중이 높은 영역에서는 cap-height가 크기 체감에 더 결정적으로 작용합니다.

아센더·디센더 비율도 크기 인식에 영향을 줍니다. 아센더('b', 'd', 'h'에서 x-height 위로 솟은 부분)와 디센더('g', 'p', 'y'에서 아래로 내려가는 부분)가 짧으면 글자가 한 공간에 모여 크게 보이고, 반대로 길면 줄간격을 더 여유롭게 줘야 편하게 읽힙니다. Noto Sans KR이 한글과 라틴을 혼용할 때 기준선이 어긋나 보이는 느낌이 드는 것도 이 설계 특성과 연관이 있습니다. Pretendard는 이 부분을 개선해 두 문자 체계가 더 안정적으로 어우러지도록 설계됐습니다.

그럼 수치를 맞추려 하면 안 되나

수치를 아예 무시하는 게 아니라, 어떤 수치를 기준으로 삼느냐를 바꿔야 합니다. px은 기준이 될 수 없습니다. 기준은 실제 화면에서 두 폰트가 나란히 읽혔을 때 균형감입니다.

두 폰트를 혼용할 때 크기가 안 맞아 보인다면 이 순서로 접근하세요.

먼저 크게 보이는 폰트의 px을 1~2 줄여봅니다. 크기는 그대로 두고 싶다면 weight를 한 단계 낮추는 것도 방법이에요.

그다음은 line-height 점검입니다. x-height가 크거나 아센더·디센더가 짧은 폰트는 같은 line-height 값으로도 답답해 보일 수 있어서, 폰트가 바뀌면 줄간격도 눈으로 다시 확인하는 게 좋습니다.

웹에서 폴백 폰트 문제라면 font-size-adjust를 검토해보세요. 이 CSS 속성은 폴백 폰트 적용 시 x-height를 기준으로 크기를 자동 보정합니다. 기본 폰트가 로드되지 않았을 때 폴백 폰트가 갑자기 크거나 작아 보이는 문제를 방지하는 데 유용하고, 2024년 이후 주요 브라우저에서 지원이 안정화됐습니다.

쓸 폰트의 크기 특성을 미리 보려면

어떤 폰트가 어떤 크기에서 어떻게 보이는지 본문에 투입하기 전에 직접 비교해보는 게 가장 확실합니다. 폰트비에서 폰트를 검색하면 다양한 크기로 미리보기를 실시간으로 확인할 수 있어서, 본문 크기와 제목 크기를 입력해가며 체감 크기와 가독성을 눈으로 비교하기 좋습니다.

각 폰트의 사용 범위(웹사이트·인쇄·영상·BI/CI 등)와 라이선스 조건도 상세 페이지에서 확인할 수 있으니, 폰트를 고르는 단계에서 미리 챙겨두면 나중에 번거로운 상황을 피할 수 있습니다.

px 숫자를 맞추는 게 아니라 눈의 균형을 맞추는 겁니다 🎯

결국 font-size 값은 글자가 그려지는 em 사각형의 크기이고, 눈에 보이는 글자의 실제 크기는 x-height·cap-height·아센더·디센더 비율로 결정됩니다. 폰트마다 이 설계가 다르니, 같은 숫자에서 달라 보이는 건 이상한 일이 아닙니다. 당연한 설계 차이입니다.

"같은 px로 맞췄으니 크기가 맞겠지"라는 생각은 틀렸습니다. 눈이 어색하다고 느끼면 눈이 맞습니다.