익스플로러에서 한글 폰트 사이즈 11픽셀이 안먹히는 경우 2008/01/19 11:04
이미지가 아닌 텍스트로 웹페이지의 자료를 입력할 경우,
폰트와 사이즈의 선택폭이 넓은 영어에 비해서 한글은 그 선택의 폭이 매우 좁습니다.
기본적으로, 포털에서 사용하는 한글폰트의 종류는 굴림, 돋움 2가지 수준이고.
사이즈는 최소 사이즈가 11픽셀입니다. 그 이하는 찌그러져 버리지요.
영문은 11픽셀 이하 9픽셀도 깨지지않고 표현되며, 선택할 수 있는 폰트의 숫자도 많습니다.
그래서 이미지를 쓰지 않고 최대한 텍스트를 활용하여 페이지를 작성할 때 '돋움체 11픽셀'의 활용도는 매우 높습니다.
열심히 코딩을 하다가 익스플로러 계열의 브라우저들이 한글 폰트사이즈의 11픽셀을 읽어내지 못하는 문제를 발견했습니다.
한참을 뚫어지게 소스를 보고 나서야 문제점을 발견했습니다.
익스플로러에서는 font 속성에 폰트이름을 정해주지 않고, 사이즈만 11픽셀로 지정하면, 영문 이외의 폰트는 12픽셀로 출력된다는 것이였습니다. 아놔!! 이런 변태적인 경우가!! 익스플로러 하여튼!!
하지만 숨겨진 문제가 또 하나 있으니!
다음의 경우를 봅시다.
이 예제와 같이 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을 사용할 때는, 영문과 숫자의 자간을 포기하거나, 따로 스타일을 줘서 벌려주는 방법 두가지 외에는 마땅한 방법이 없는 것 같습니다.
이상 익스플로러 계열의 브라우저에서 폰트 11픽셀을 변태적으로 처리하는 문제점과 그 해결방법을 알아보았습니다. 오랜만에 CSS 관련글 쓰려니 힘듦니다. 헥헥!
ps. 이 글에는 '변태'가 몇 번 들어갔을까요? 맞히는 분께는 올블로그 무료 이용권 50년치를 드립니다^,.^
폰트와 사이즈의 선택폭이 넓은 영어에 비해서 한글은 그 선택의 폭이 매우 좁습니다.
기본적으로, 포털에서 사용하는 한글폰트의 종류는 굴림, 돋움 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을 사용할 때는, 영문과 숫자의 자간을 포기하거나, 따로 스타일을 줘서 벌려주는 방법 두가지 외에는 마땅한 방법이 없는 것 같습니다.
이상 익스플로러 계열의 브라우저에서 폰트 11픽셀을 변태적으로 처리하는 문제점과 그 해결방법을 알아보았습니다. 오랜만에 CSS 관련글 쓰려니 힘듦니다. 헥헥!
ps. 이 글에는 '변태'가 몇 번 들어갔을까요? 맞히는 분께는 올블로그 무료 이용권 50년치를 드립니다^,.^
http://monoeyes.com/trackback/519
-
ps까지 합쳐서 7번 변태가 들어갔군요. 50년 이용권 주셨으니 50년간 올블로그 사이트가 유지되야 합니다. ㅎㅎㅎㅎ
익스플로러 폰트 크기와 자간문제는....
제 블로그에서도 좀 만지다가 포기한 상태.
스킨의 스타일이 살짝 마음에 안들어서 손대기 시작했더니...원래의 스킨 디자이너가 그렇게 지정한 깊은 뜻이 있었다는걸 알게 되었죠. -_- -
저거 인터넷과는 하등 관련없는 윈도우용 프로그램을 만들 때도 똑같이 적용됩니다. T_T 윈도우에서 한글이 없는 영문폰트를 지정하면 대체해서 보여줄 한글폰트가 지정되어 있는데 여기 크기가 이상하게 되어 있어서 영문을 8포인트(11픽셀)로 지정해도 한글은 9포인트(12픽셀)로 나와버리죠. IE가 이 설정을 우선시하기 때문에 생기는 현상 같습니다. 이건 좀 수정이 되어야 할 텐데요.
p.s 영문을 10포인트로 지정하면 한글이 11포인트로 나와버리는 현상도 있습니다.
;;;
-
우와 진짜 도움되는 글이에요 ㅋㅋ
letter-spacing -1주면서 참 고민했던 기억이 있네요
한글은 딱 좋은데 영문이 개판이어서.......
결국 포기했었어요 ㅋㅋ 핀노트에서요 ㅋㅋ -
노파심에...
저 위에 "Sens serif" 라고 쓰신 건 "sans-serif" 겠지요. 특정 영문 글꼴을 가리키는 게 아니라 우리말로 하면 고딕체 정도 해당하는 이름이에요. serif, sans-serif, monospace... 어떤 경우에는 sans-serif가 굴림이나 돋움일 수도 있는 거죠.
그리고 윈도우에서 영문 8pt에 한글 글꼴은 9pt가 붙는 건 그냥 특성 같네요. 위에 다른 분이 말씀하신 것처럼 윈도우는 원래가 다 그래요. 영문 윈도우도 기본 글꼴이 8pt Tahoma인데 한글은 9pt로 나오고요.. 다른 어플들도 역시... 그런데 gtk등으로 된 프로그램, 윈도우용 gaim 같은 건 한글도 8pt 나오고요.
한글 글꼴 다른 게 문제가 아니라 XP까지 기본으로 굴림이나 돋움 같은 애들이 많이 쓰인 게 문제죠. 비트맵 글꼴. 맑은 고딕 같은 글꼴들이 많이 나오고 굴림과 돋움의 자리를 완전히 대체하면 좋겠어요.
letter-spacing은... 전 css 쓸 때 왠지 letter-spacing은 꺼리게 되네요. 글꼴 크기도 em으로 지정해주지 않으면 브라우저마다 자간이 다 다르게 나오기도 하고... 너무 까다로워요..-
세리프체 오타가 났었군요.
재빠르게 바꾸었습니다. 지적 감사합니다^^
폰트 사이즈 11px(8pt)를 무시하고 12px(9pt)로 출력되는 문제는 윈도우의 문제라기 보다는, Office 프로그램이나 MS에서 나오는 웹브라우저의 랜더링 문제인 것 같습니다. 윈도우 기반에서 돌아가는 파이어폭스나 오페라, 사파리에서는 위의 문제에서 전혀 영향을 받지 않고 11px이 제대로 출력 됨을 확인했습니다.
letter-spacing은 말씀하신바 안고 있는 문제점이 많아서 저도 지양하는데, 네이버나 다음의 상품설명 같은데 보면 상당히 유용하게 letter-spacing 을 활용할 수 있는 경우가 생깁니다. 이 경우 폰트 사이즈 11px 에 letter-spacing -1px 을 함께 사용해야 한다면, 영문폰트를 맨앞에 내세우는 꽁수를 활용할 수 없게 됩니다.
익스플로러 8에서 꼭 해결되었으면 싶은 문제이네요^^
좋은 하루되세요^^ -
예..
sans-serif는 어느 특정한 글꼴이 아니라는 이야기였어요.
http://en.wikipedia.org/wiki/Sans-serif
그리고 한글 글꼴이 9pt로 나오는 건 윈도우랑 대부분의 어플이 그런게 맞아요. 윈도우 XP 영문은 기본 글꼴이 8pt Tahoma인데 윈도우랑 IE, 윈도우용 프로그램들 전부 한글 글꼴이 9pt 나오고요. 앞서 말씀드린 것처럼 리눅스에서 porting되었거나 해서 윈도우에서도 gtk나 다른 방법으로 창 만드는 프로그램들이 한글 글꼴도 8pt로 나와요. 한 번 시험삼아서 윈도우 글꼴을 8pt Tahoma로 바꿔보세요. 제가 잘 아는 건 아니지만요... 윈도우에서 IE의 출력부분을 비롯한 일부만 그런 게 아니라는 이야기에요.
또 네이버와 같이 작은 글꼴에 letter-spacing을 -1px을 주곤 하는데요... 전 이걸 bitmap 글꼴의 문제라고 생각해요. 작은 글꼴에서 글자 크기에 비해 자간이 벌어져 보이는 건 글꼴의 한계죠.
님도 좋은 하루 되세요. ^^
(덧붙이자면... 제 생각에 한글 글꼴 9pt 문제는 윈도우 9x 시절에 기본 포함되었던 굴림에 8pt 비트맵 정보가 없었던 게 원인이 아닐까 하네요. 그 때 강제로 어떻게 font link를 건 게 남아있는 게 아닐지??)
-
