폰트 미리보기와 실제 적용이 다르게 보이는 이유

폰트 상세 페이지에서 마음에 드는 걸 찾았는데, 막상 내 파일에 적용하면 어딘가 달라진다. 흐릿하거나, 답답하거나, 생각보다 훨씬 얇아 보이거나. 미리보기에서 분명히 확인했는데 왜 이런 일이 생기는 걸까요.

이 현상에는 이유가 있어요. 미리보기 환경과 실사용 환경이 처음부터 다른 조건으로 만들어졌거든요. 미리보기는 폰트를 가장 유리하게 보여주는 조건 — 24px 이상의 큰 크기, 흰 배경, 서너 어절의 짧은 예문 — 으로 맞춰집니다. 반면 실제로 폰트를 쓰는 환경은 본문 텍스트 15~16px, 다양한 배경색, 길고 단락으로 이어지는 문장이죠.

여기서 중요한 질문은 "왜 다른가"보다 "어떤 폰트 특성이 이 간극에 취약하고, 어떤 특성이 실제에서도 버티는가"입니다. 그걸 알면 폰트를 고를 때 미리보기만 보고 실망할 일이 줄어듭니다.

미리보기에서만 빛나고 실제에선 무너지는 것, 높은 획 대비 🔍

획 대비(stroke contrast)는 굵은 획과 얇은 획의 두께 차이입니다. 명조 계열이나 일부 세리프 폰트는 이 차이가 커서, 굵은 획과 얇은 획이 교차하며 우아한 인상을 만들어냅니다. 미리보기에서 감탄하게 되는 이유가 대부분 여기 있어요.

그런데 크기가 작아지면 상황이 달라집니다. 화면에서 폰트는 픽셀 단위로 렌더링됩니다. 24px에서 선명하게 표현되던 가는 획이 15px에서는 1픽셀 이하로 계산되는 경우가 생기고, 렌더링 엔진은 이때 해당 획을 회색으로 흐려서 표현하거나 픽셀 격자에 맞추는 과정에서 획의 두께를 의도치 않게 바꿉니다. 미리보기에서 보이던 예리한 세부 묘사가 실제 사용 크기에서 흐릿하게 뭉치는 이유가 바로 이것입니다.

실제에서 안정적인 폰트는 반대입니다. 획 대비가 낮고 굵기가 전반적으로 균일한 고딕 계열은 크기가 줄어도 형태가 비교적 안정적으로 남습니다. 미리보기에서는 드라마틱하지 않지만, 본문 단락에서는 오히려 더 안정적으로 읽힙니다.

미리보기에서만 열려 보이고 본문에서 뭉치는 것, 타이트한 자소 밀도

한글은 모음과 자음이 한 칸 안에 조합되는 구조입니다. 받침이 있는 글자, 복잡한 모음이 들어간 글자는 자소가 빽빽하게 들어찹니다.

큰 크기에서는 각 자소 사이의 속공간이 충분히 열려 있어서 복잡한 글자도 시각적으로 분리되어 보입니다. 그런데 15px 수준으로 내려가면 속공간이 좁아지고, 자소들이 서로 붙어 보이거나 뭉쳐 보이기 시작합니다. 미리보기에서 개방감 있어 보이던 폰트가 본문 크기에서 답답하게 느껴지는 게 이 때문입니다.

이 문제는 '닭', '흙', '닮'처럼 받침이 복잡한 글자에서 더 두드러집니다. 미리보기에 쓰이는 짧은 예문은 이런 글자를 피하는 경향이 있어서, 직접 긴 문단을 넣어보기 전까지는 파악하기 어렵습니다.

바운딩박스도 관계가 있습니다. 각 폰트는 글자가 차지하는 영역을 고유하게 설정해 두는데, 이 값이 행간에 영향을 줍니다. 폰트를 바꿨을 때 줄 간격이 갑자기 달라진 것처럼 느껴지는 현상도 여기서 비롯됩니다.

실제에서 버티는 폰트는 속공간이 충분히 열려 있고, 작은 크기를 고려해 설계된 것입니다. 제작사가 '본문용' 또는 '다목적'으로 소개하는 폰트가 작은 크기에서 더 믿을 만한 이유가 여기 있습니다. 제목용으로 만들어진 폰트를 본문에 억지로 쓰면 이 간극이 커집니다.

배경색과 자간, 미리보기 조건 자체가 만드는 착시

폰트의 무게감과 가독성은 배경색만 바뀌어도 꽤 달라집니다. 흰 배경에 검은 글씨는 대비가 높아 글자가 선명하고 굵게 느껴집니다. 배경이 약간 회색이거나 글씨색이 짙은 회색이면, 같은 폰트도 더 가볍고 얇아 보입니다. 미리보기가 흰 캔버스 위에서 이루어지는 반면 실제 웹페이지나 문서는 다양한 배경색을 씁니다.

자간도 마찬가지입니다. 폰트 제작자가 설정한 기본 자간은 미리보기 크기에서 자연스럽게 보이도록 조정되어 있습니다. 본문 크기에서는 같은 자간이 좁거나 넓게 느껴질 수 있고, 가로폭이 좁게 설계된 폰트는 본문 단락에서 글자들이 다닥다닥 붙어 보여 가독성이 떨어지기도 합니다.

이 두 가지는 폰트 자체의 특성이 아니라 미리보기 환경이 만드는 착시에 가깝습니다. 그래서 후보 폰트를 실제 배경색 위에서 본문 크기로 직접 확인하는 단계가 빠지면, 아무리 여러 폰트를 비교해봐도 답이 안 나옵니다.

미리보기와 실사용 간격을 좁히는 방법

폰트비(fontbee.waffle-gl.org) 검색(/search)이나 AI 폰트 찾기(/find)로 후보를 좁힌 다음, 상세 페이지에 있는 @font-face 코드를 복사해 직접 CSS에 적용해보는 것이 가장 빠릅니다. 실제 작업 환경에서 15~16px 안팎으로 긴 문단을 넣고 브라우저에서 확인하면, 위에서 이야기한 세 가지 특성이 실제로 어떻게 드러나는지 한 번에 볼 수 있습니다.

이때 쓰려는 배경색 위에서 보는지, '닭'이나 '흙'처럼 받침이 복잡한 글자가 섞인 실제 문장을 넣어보는지가 포인트입니다. 마음에 드는 폰트가 보이면 상세 페이지에서 라이선스 범위(인쇄·웹사이트·영상·포장지·임베딩 등)를 확인하고, 공식 다운로드 페이지로 이동해 파일을 받아 디자인 툴에서도 본문 크기로 한 번 더 시험해보세요. 미리보기와의 차이는 이 단계에서 바로 드러납니다. 😌