mac용 firefox의 비정상적인 폰트렌더링

현재 블로그의 테마를 맥용 firefox에서 보면 특정부분의 한글이 비정상적으로 출력되었다. 예를 들면 헤드라인이 너무 두껍게 나온다거나 사이드바의 폰트가 지나치게 작게 나온다거나..

기존 스타일

비정상적으로 출력된 한글폰트 그림1
font: .75em/1.6em "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, AppleGothic, Dotum, 돋움, sans-serif;

수정된 스타일

정상적으로 출력된 한글폰트 그림1
font: .75em/1.6em "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Dotum, 돋움, sans-serif;

이건 스타일에 먼저 지정된 Lucida Grande의 두께와 크기에 맞춰서 애플고딕의 두께,크기를 강제조정해서 나타난 결과로 생각된다. 돋움체를 설치한 맥유저를 생각해서 돋움앞에 애플고딕을 넣어둔게 문제라면 문제 :(

익스(7포함)에 비할바는 못되지만 이것도 역시 참 난감한 상황이다.

추가

위와 같이 한글글꼴이 작아지는 현상은 항상 생기는건 아니고 특정사이즈 미만의 폰트에서 발생하는걸로 보임.

CSS로만 디자인하지 말자.

디자이너겸임 UI개발자가 css를 익혀가면서 하는 대표적인 실수는 포토샵에서 대략적인 와꾸; 만 잡아놓고 그때부턴 포토샵은 제껴두고 css만 붙잡고 디자인을 하는것. 좀더 편하려고 세부적인 내용까지 디자인을 하지않고 css로만 모든걸 처리하려하면 엄청나게 단순한 블로그틱한 결과물만이 기다릴뿐이다.

스타일가이드가 나왔을때 css로 전체적인 스타일을 만들어놓고 그다음엔 다시 포토샵으로 돌아와서 세부사항을 디자인하자. css코딩을 하면서 필요한걸 그때그때 만드는 작업은 통일감과 퀄리티에 전혀 도움이 되지 않는다. 편리함과 속도엔 도움이 되지만 ;)

시간과 피곤함에 시달리다보면 항상 잊어버리는 사항을 다시한번 스스로 다짐하는 글입니다.

Archives...