웹폰트 깨짐 문제에 대한 깨달음
기타

웹폰트 깨짐 문제에 대한 깨달음

블로그를 커스터마이징하면서

개인적으로 느꼈던 가장 까다로운 문제는 웹폰트 깨짐 문제였다.

 

아무리 예쁘고, 안티앨리어싱이 잘 되어있는 폰트라도

16px 이하의 웹폰트로 적용하면 깨지기 마련이었다. 😒

 

 

 

흔치않은 깨지지 않는 폰트들 중 하나가 Noto Sans였고,

지금 사용하는 이 블로그 스킨의 기본 폰트가 Noto Sans로 설정되어 있어

딱히 건드리지 않았다.

 

 

 

Noto Sans가 아닌 다른 폰트를 사용하고자 할 경우, 

웹폰트 깨짐 해결을 위해 css 에서

transform: skew(-0.001deg);

를 적용하는 꼼수는 잘 알려진 사실이다.

 

 

 

오늘 문득, 듀얼모니터로 어떤 웹사이트에 들어갔다가 폰트가 깨져있는 것을 발견했다.

그런데 그 사이트를 본모니터로 끌고왔더니 폰트 깨짐이 한순간에 사라지고

예쁜 안티앨리어싱 폰트가 나타났다. 🤨

 

내 본모니터는 UHD, 듀얼모니터는 FHD다.

 

 

 

예전에 내가 삽질하며 해결했던 웹폰트 깨짐 문제가

그냥 모니터 해상도를 높이는 것 만으로 해결할 필요가 없게 된 것이다. 🙄

 

 

 

즉, 웹폰트 깨짐 문제는

 

단순히 글자가 작아서 생기는 것이 아니라

우리가 보고있는 모니터의 해상도가 낮아서 안티앨리어싱이 깨져 보이는 것이었다!!

 

 

 

어쩐지 notion도 듀얼 말고 본모니터로 볼 때 훨씬 예쁘더니.....

 

해상도에 따른 글자 선명도 비교 (좌: UHD, 우: FHD)

 

 

 

 

결론 : 역시 모든 건 장비빨이다.