[CSS] 한글 글꼴과 영문글꼴의 11px

2011.12.14 14:50

treasurej 조회 수:31734

이미지가 아닌 텍스트로 웹페이지의 자료를 입력할 경우, 
폰트와 사이즈의 선택폭이 넓은 영어에 비해서 한글은 그 선택의 폭이 매우 좁습니다.

사용자 삽입 이미지


기본적으로, 포털에서 사용하는 한글폰트의 종류는 굴림, 돋움 2가지 수준이고.
사이즈는 최소 사이즈가 11픽셀입니다. 그 이하는 찌그러져 버리지요.

영문은 11픽셀 이하 9픽셀도 깨지지않고 표현되며, 선택할 수 있는 폰트의 숫자도 많습니다.

그래서 이미지를 쓰지 않고 최대한 텍스트를 활용하여 페이지를 작성할 때 '돋움체 11픽셀'의 활용도는 매우 높습니다.

열심히 코딩을 하다가 익스플로러 계열의 브라우저들이 한글 폰트사이즈의 11픽셀을 읽어내지 못하는 문제를 발견했습니다.


사용자 삽입 이미지

font-size: 11px;


보시다시피 아주 변태적인 경우입니다. 분명히 폰트사이즈 11픽셀을 줬는데, 익스플로러에서는 꿈쩍도 하지 않습니다. 우리회사에서 저와 웹표준 소모임을 하고 있는 매니아 A2님과 함께 CSS를 하나씩 지워가며 문제를 찾으려 했지만, 단 1라인을 남겨놓고도 문제를 찾지 못했습니다. 여전히 익스플로러에서는 한글 폰트 11픽셀이 먹히지 않는 둥 요지부동이였습니다.


한참을 뚫어지게 소스를 보고 나서야 문제점을 발견했습니다.


익스플로러에서는 font 속성에 폰트이름을 정해주지 않고, 사이즈만 11픽셀로 지정하면, 영문 이외의 폰트는 12픽셀로 출력된다는 것이였습니다. 아놔!! 이런 변태적인 경우가!! 익스플로러 하여튼!!


하지만 숨겨진 문제가 또 하나 있으니!

다음의 경우를 봅시다.


사용자 삽입 이미지

font-family: Dotum, 돋움; font-size: 12px; letter-spacing: -1px;


이 예제와 같이 letter-spacing: -1px 을 사용하는 경우가 생깁니다.
letter-spacing: -1px 을 사용하면, 한글 가독성도 조금 떨어지긴 하지만 보기 싫은 정도는 아닙니다. 디자이너분들 중에서도 포토샵 자간 -100 ~-75 정도를 즐겨 사용하는 분들이 계시고 그걸 코딩으로 간단하게 처리하는 방법이 letter-spacing 을 -1px 해주는 방법일 것입니다.(em 등의 활용은 일단 이 포스트와 크게 관련이 없으므로 언급하지 않겠습니다). 헌데 문제는 보시는바와 같이 영문과 숫자입니다. 상당히 가독성이 떨어집니다. 게다가 숫자의 경우는 아예 딱 붙어버립니다.

이 문제를 해결하기 위해서 즐겨 사용하는 방법이 아래와 같은 코드 처리입니다.



사용자 삽입 이미지

font-family: Verdana, Dotum, 돋움; font-size: 12px; letter-spacing: -1px;


사용자 삽입 이미지

letter-spacing 은 -1px 을 줘야겠고, 중간에 숫자나 영문을 써야할 경우 이와 같은 기법을 많이들 사용하십니다. 폰트를 설정하면서 영문폰트를 먼저 선언해주는 방법입니다. 그러면 일단 숫자나 영문은 영문 폰트를 먼저 인식하기 때문에 뒤에 선언한 돋움체는 한글만 적용을 받게되지요. 일단 아까전의 돋움체의 영향을 받을때 보다는 가독성이 많이 완화된 모습입니다.


익스플로러 폰트 사이즈 11픽셀처리 변태적인 상황은 여기서 또 한 번 연출됩니다.


사용자 삽입 이미지

font-family: Verdana, Dotum, 돋움; font-size: 11px; letter-spacing: -1px;

바로전의 예제에서 폰트사이즈만 11픽셀을 줬습니다. 파이어폭스는 11픽셀로 잘 출력되는 반면 익스플로러는 또또!! 요지부동입니다. 정말 변태스럽습니다. 이것의 문제원인과 해결법은 다음과 같습니다.

익스플로러에서는 폰트사이즈 11 픽셀을 사용할 때, 한글을 11픽셀로 사용하고 싶다면, 폰트 선언시 무조건 굴림이나 돋움을 가장 앞으로 오게 해야한다.

결국 폰트사이즈 11픽셀을 처리하는 부분에서는 다음과 같은 문제가 생기게 됩니다. 이것은 따로 span 을 줘서 letter-spacing: 0 으로 처리를 해주지 않는 이상 익스플로러에서는 해결불가능한 문제인 것으로 보입니다.


사용자 삽입 이미지


이처럼, 돋움체, 폰트사이즈 11px 은 사이트를 만들때 빠질 수 없는 디자인적 구성요소 중 하나입니다. 게다가 letter-spacing: -1px 을 줘야만 깔끔하게 출력이 됩니다.  헌데 익스플로러의 변태스러움으로 이해서 font 선언을 할 때, 영문 폰트가 앞에오는 꽁수를 사용할 수 없습니다. 그래서 돋움체에 폰트사이즈 11, 그리고 자간 -1px을 사용할 때는, 영문과 숫자의 자간을 포기하거나, 따로 스타일을 줘서 벌려주는 방법 두가지 외에는 마땅한 방법이 없는 것 같습니다.

출처: http://www.monoeyes.com 쏭군의 열정 드리머



XE Login