이번에 제작에 들어간 홈페이지의 기본폰트를 나눔고딕으로 잡았다.
이전에는 맑은 고딕과 나눔 고딕의 심미적인 차이를 그닥 느끼지 못했지만 실제로 기본폰트로 적용해보니 상당히 괜찮았다.

그런데 막상 적용하다보니 나눔고딕을 사용할 때의 주의해야할 점들이 눈에 띄었다.

아래부터는 나눔고딕 폰트를 웹에서 사용시 주의점 및 장단점을 정리한 것이다.

네이버에서 무료로 배포하고 있는 나눔글꼴 심미적인 특성은 맑은 고딕 이상이다

네이버에서 무료로 배포하고 있는 나눔글꼴 심미적인 특성은 맑은 고딕 이상이다


나눔고딕 폰트는 자간이 맑은 고딕, 굴림, 돋움에 비해서 좁다

문서에서는 자간이 얼마인가에 따라서 가독성 뿐만아니라 세련미에 차이가 나게 된다.
특히 요즘 내 경우에는 모든 9pt, 12px의 폰트는 기본으로 letter-spacing:-1px를 두고 시작하는데 자간이 0px일 때와 -1px일때 문서의 느낌자체가 다르다.

아래의 버튼을 눌러 실시간으로 확인해보자.



하지만 나눔고딕은 폰트의 기본 자간이 다른 폰트에 비해서 좁은 편이다.

또 확인해보자



자간의 차이를 확인하셨는가?

사람마다 차이가 있겠지만 굴림이나 맑은고딕의 경우에는 개인적으로 자간이 -1px인게 정렬된 느낌이 더 든다.
하지만 나눔고딕에 -1px를 적용할 경우에는 자간자체가 너무 좁아져 보이는 경향이 있다.

문제는 그뿐만이 아니다.

웹을 만드는 사람은 항상 고려해야할 점이 사용자의 웹환경에서 어떤 폰트가 지원되는가를 고려해야 하는데 굴림이나 맑은 고딕에 비해서 나눔고딕을 PC에 설치한 사람은 훨씬 적다는 것이다.

따라서 나눔고딕 기본 본문폰트(9pt)로 적용하기로 결정하고 letter-spacing:0으로 처리하였을 경우 나눔고딕이 깔려있지 않은 많은 사용자에게는 웹페이지가 제작자의 의도대로 보이지 않는 경우가 있을 수 있다.

간단한 예로 나눔고딕이 깔려있는 제작자의 브라우저에서는 이뻐보이는 웹페이지가 깔려있지 않은 클라이언트의 브라우저에서는 못난이로 보여질 수 있단 말이다. (보통... 클라이언트가 눈썰미가 좋지 않은 사람이라면 왠지... 좀.. 하면서 이에 관한 불만을 정확히 지적조차 못한다)

이 때문에 디자인에 따라선 나눔고딕을 본문 폰트로 사용하기에 제약이 따를 수 있다.

따라서 개인적인 소망으론 나눔고딕도 다른 폰트와 비슷한 자간을 기본으로 삼았으면 한다.
자간의 차이로 인해 일정한 가로사이즈를 지닌 박스에 택스트를 넣으면 어떤 폰트는 한줄인데 어떤 폰트는 줄바꿈이 되어버리는 골치 아픈 사태를 방지하기 위해서라도 말이다.


나눔고딕 bold 폰트의 두께 조정

나눔고딕은 총 세가지 폰트 두께를 지원한다(나눔고딕 라이트 제외).
이는 각각 normal, bold, extra bold다.

그런데 나눔고딕을 웹에서 bold로 적용할 경우 extra bold가 적용되어 버리는 현상이 있었다.
원하는 폰트의 두께가 extra bold면 상관이 없지만 만약 bold를 원할 경우에는 css에서 font-weight를 600 정도로 셋팅해주어야 원하는 글꼴의 두께로 설정될 것이다.


결론

나눔고딕은 아마도 맑은 고딕을 제외하곤 클리어타입이 적용되는 폰트 중 가장 많은 사용자를 확보한 폰트일 것이다.
그만큼 미려하고 가독성도 뛰어난 폰트이지만 이전에 사용하던 폰트에 비해 위와 같은 특이사항이 있으니 참고하여 웹페이지에 적용하시길 바란다. 특히나 웹사이트의 본문폰트로 적용할시는 많은 주의가 요한다.

한국사람이라면 누구나 공감하겠지만 한글은 참으로 좋은 문자 체계이다.
부디 한글의 아름다움을 많은 사람이 제대로 느낄 수 있는 기본폰트들이 많이 보급되었으면 한다.
이제는 일본에서 만든 굴림체에서 벗어날 때가 되지 않았는가 말이다.

최근 한달간 인기글

이 글의 관련글

REPLY AND TRACKBACK RSS http://blog.nemesys.co.kr/tt/rss/response/1142
REPLY AND TRACKBACK ATOM http://blog.nemesys.co.kr/tt/atom/response/1142
TRACKBACK ADDRESS
이 글에는 트랙백을 보낼 수 없습니다
REPLY RSS http://blog.nemesys.co.kr/tt/rss/comment/1142
REPLY ATOM http://blog.nemesys.co.kr/tt/atom/comment/1142
미스터P 
wrote at 2013/04/17 11:07
좋은 정보 감사합니다.
asdad 
wrote at 2014/07/03 09:17
짝짝짝 좋은글 잘봤습니다!!!
이름 / Name : *
비밀번호 / Password : *
홈페이지 / Homepage :
비밀글 / Secret :
*1  ... *244  *245  *246  *247  *248  *249  *250  *251  *252  ... *1128 
SNS + RSS Links
rss
다음 일간 이슈 검색어
Since 2006 Nes's Random Blogz
Total 11438346 T916 Y1209

5087

1506

google chart api graph

-30 days

today : 916

전체 (1128)
Nes이야기 (123)
하드웨어이야기 (260)
소프트웨어이야기 (27)
외국어이야기 (12)
IT/웹이야기 (248)
연예계/방송이야기 (140)
게임이야기 (96)
광고/제품이야기 (58)
여행/먹거리이야기 (45)
세상이야기 (98)
최근에 쓴 글
구글 딥마인드 알파고가 이세돌을 꺾은날, 애드센스로 ...
구글 설문지(구글 폼)에서 정규식으로 입력 내용 사전 ... (1)
유플러스 tv g 4k uhd 셋톱박스를 신모델인 tvg 우퍼2... (9)
신장의 야망 창조 전국입지전 - 삼국지 13의 재미를 뛰... (2)
구글 애널리틱스(Google Analytics) 보고서 및 대시보...
그래픽카드 견적을 뺀 이번 조립컴퓨터, 스카이레이크 ... (1)
기어s 웨어러블 요금제로도 올레 맴버쉽 포인트 사용이...
안드로이드 롤리팝 포팅 버전 기어s 3g 요금제 가입 후... (2)
tasker http post 기능을 활용해 스마트폰 이벤트를 sl...
삼국지13 간단 후기 - 역대 장수제 시리즈의 정점을 찍...
네이버 웹마스터도구에 블로그와 RSS 주소 등록 후 10...
네이버 웹마스터도구 개편이 불러온 검색로직 및 트래...
삼성 갤럭시 기어s 롤리팝 포팅 후기 및 앱 사용기 (1)
삼성 갤럭시 기어s에 안드로이드 롤리팝 올리기 성공! (3)
CPU 잡아먹는 어베스트 avast mft utility(mftutil.exe...
유플러스 TVG 롤리팝 업데이트 후기(via 기기교체!!) (1)
블로그 포스팅이 점점 줄어드는 이유
u+ tv g 롤리팝 업데이트를 하릴없이 기다리며 써본 간... (9)
허니버터칩은 과연 꼬꼬면의 숙명을 피할 수 있을 것인가? (3)
LG유플러스 U+ tvg 4K UHD 간단 사용기 및 신구형 셋톱... (2)
구글 애널리틱스 웹로그 분석 공인 전문가 자격 인증 ...
스마트폰 사용 패턴 통계 및 분석 with Tasker & Googl... (5)
갤럭시 기어1 - 루팅 및 안드로이드 null롬 올린 후 두... (1)
옵티머스G프로 킷캣 업데이트 후 폰트변경 - 나눔바른...
갤럭시 기어1 - 루팅 및 안드로이드 커스텀 롬 사용기 ... (5)
구글 애널리틱스 UA 업그레이드 이후 애드센스 통계 안...
스마트폰 화면 밝기 어둡게해 야밤에 시력 보호하는 방법 (1)
블루투스 휴대용 스피커 로지텍 UE Boom 간단 리뷰 및 ...
구글 스프레드시트가 canvas를 활용해 만들어졌다니!! (1)
구글 드라이브 스프레드시트(엑셀)의 놀라운 기능 impo...