글자가 너무 작아 잘 보이지 않으면 마우스 휠을 굴리세요.

팁 2007. 3. 21. 18:34
우리가 흔히 웹사이트의 본문에 사용하는 한글 폰트의 크기는 12px 입니다. 하지만, 폰트의 단위가 px (픽셀)만 있는 건 아니죠. pt (포인트)도 있습니다. 12px = 9pt 입니다. 폰트의 크기를 표현하는 단위는 이것들 말고도 더 있죠. 간단히 말해 이렇습니다.

12px = 9pt = 0.75em = 75%

16px = 12pt = 1em = 100%

이 중에 주목할 만한 단위는 em 입니다. 1em은 시스템 (즉, 브라우저) 기본 폰트의 가로 크기와 같은 값을 가지는 재밌는 단위이지요. 또한 위의 관계를 보다보면 알다시피 1em = 100% 입니다. 2em = 200% 겠죠.

이 em이 편리한 이유는 시스템의 폰트에 반응하는 단위이기 때문에 특정 웹페이지에 적힌 글자들을 크게 볼 수도 있고, 작게 볼 수도 있습니다. 지금 이 페이지만 해도 CTRL키를 누른 상태로 굴리는 마우스의 휠에 반응합니다. 해보세요. 글씨가 작아지기도 하고 커지기도 하는 걸 볼 수 있을 거예요. 만약 제가 레이아웃을 정하는 폭들에도 em을 사용했다면 레이아웃 각각의 요소들의 높이와 폭도 변했겠지요.

외국 사이트들을 서핑하다 보면 깨알 같은 크기로 쓰여진 페이지들이 있습니다. 영어권 독자인 경우엔 모르겠지만 비영어권 독자들에겐 곤욕이죠. 외국 사이트들 뿐만 아니라 한글로 쓰여진 페이지들 역시 마찬가지 일 때가 있습니다.

게다가 사실 저는 현재 많은 사이트에서 표준처럼 사용되는 한글 폰트의 크기를 작다고 여기는 사람 중의 하나입니다. 12px (9pt, 0.75em) 이죠. 특히 하드웨어 사양이 점점 좋아짐에 따라 모니터 해상도를 점점 높게 두고 웹서핑을 하게 되니, 시간이 조금 지나면 눈이 아프기도 합니다. 해상도가 높아지면 같은 픽셀 하나의 크기가 줄어들게 되는 거잖아요.

이 글은 외국 사이트에서 깨알 같이 쓰여진 글을 읽다가 문득 생각나서 적는 것입니다. 폰트의 크기가 px이나 pt로 적용된 페이지들은 아무리 CTRL키 + 휠 콤보를 시도해도 글자가 커지질 않아요. ㅠ.ㅠ 그럴 땐 정말 서글퍼지죠. 어디 하소연할 곳도 없고 말이죠.

결론은… '우리 모두 em을 사용하자' 입니다. :)



,

티스토리툴바