웹에서 똑같이 보이는 굴림 9pt 비트맵 웹폰트 (Gulim Pixel)

이 블로그는 제로보드 시절 감성을 내려고 모든 글자를 굴림 9pt(12px)로 보여 준다.

근데 웹에서 그냥 굴림을 지정하면 옛날 그 도트 굴림이 안 나온다. 맥이나 폰에는 애초에 굴림이 없고, 윈도우에서도 요즘 브라우저는 외곽선을 부드럽게 그려 버린다. 기억 속의 굴림 9pt는 외곽선 폰트가 아니라 그 크기 전용으로 찍어 둔 비트맵이기 때문이다.

처음엔 픽셀 폰트인 갈무리를 썼는데, 나란히 놓고 보면 굴림이 아니라서 티가 났다.

찾아보니 한양정보통신의 굴림·돋움이 구글 폰트 저장소(googlefonts/gulim)에 SIL OFL 1.1로 올라와 있었고, 원본 TTF 안에 12px 비트맵 데이터가 그대로 들어 있었다. 그 비트맵의 점 하나를 정사각형 외곽선 하나로 바꿔서 웹폰트로 다시 만들었다. 이름은 Gulim Pixel이다. 직접 코드를 짠 건 클로드고 나는 시키기만 했다.

12px에서 원본 비트맵과 점 단위로 똑같다. 24px이나 36px처럼 정수배로 키우면 도트가 그대로 커지고, 굵게(bold)는 윈도우식으로 1px 옆에 덧찍는다. 이제 브라우저나 OS에 상관없이 어디서나 똑같이 보인다.

만들면서 삽질이 좀 있었다. 구글이 빌드해 둔 배포본에는 12px 한글 조합에 필요한 숨은 자모 조각이 빠져 있어서 한글이 군데군데 비어 나왔다. 이건 원본 소스 TTF에서 다시 뽑아서 해결했다. 또 글자 폭을 그대로 옮겼더니 숫자가 옆 한글에 바짝 붙어 버려서, 폭을 반올림하고 모든 글자 가장자리에 빈 칸을 한 줄씩 넣었다.

웹에 붙일 때는 font-size: 12px(또는 24px, 36px)에 -webkit-font-smoothing: none을 같이 주면 된다. 13px이나 15px 같은 어중간한 크기로 쓰면 도트가 깨진다. 이 블로그에서는 실제로 쓰는 글자만 남겨서 11KB 정도로 줄여 쓰고 있다.

원본과 같은 OFL 1.1 라이선스라 개인이든 상업용이든 무료로 쓸 수 있고, 폰트 파일만 따로 파는 것만 금지다.

다운로드: https://github.com/byongshintv/gulim-pixel