📍피그마와 브라우저간 폰트 차이나는 현상

✅ 문제

피그마 규격대로 똑같이 구현을 했는데 버튼의 너비가 틀어지는 현상 발생

이유는 버튼 안의 글자가 피그마와 브라우저간 다르게 나타나기 때문이다. 

font weight나 자간이 다르게 출력된다.

좌) 피그마 너비 / 우) 브라우저 실제 구현

 

✅ 원인1. 피그마는 자체 폰트 렌더링 방식이 있기 때문에 

피그마는 브라우저등 사용자 환경에 구애받지 않고, 일관된 플래폼을 보여주기 위해 자체 렌더링 방식(antialiasing)을 사용한다.

 

안티앨리어싱 이란?

: 픽셀로 되있어 나타나는 계단 현상을 줄이고 이미지를 부드럽게 만드는 기술.

👉해결법

피그마와 완전 동일한 표현은 불가하다.
css속성을 사용하여 글꼴을 피그마와 비슷하게 표현해줄 뿐이다.

 

1. macOS : font-smooth 사용

Font-smooth 속성은 글꼴이 렌더링될 때 앤티앨리어싱 적용을 막음. 

! 이 속성은 Mac OS 에서만 동작한다. 윈도우 환경에서는 이 방식 적용 불가 !

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: never;

적용 코드

 

 

2. windows : text-shadow 사용

text-shadow: 0 0 1px rgba(0,0,0,0.3);

 

https://gist.github.com/dalethedeveloper/1846552

https://www.elfboy.com/blog/text-shadow_anti-aliasing/

 

 

✅ 원인2. 브라우저 , 운영체제 차이 

같은 폰트여도 브라우저나 운영체제에 따라 다르게 보인다.

1) 운영체제 차이 

Windows, macOS, Linux 등 운영체제 마다 자체적으로 설치된 기본 폰트가 있다.

그리고 브라우저는 그 기본 폰트를 사용하게 된다. 

2) 브라우저 차이

브라우저마다 폰트 렌더링 엔진이 다르다. 즉 브라우저에 텍스트를 표현하는 방식이 다르다.

• Chrome, Edge : 블링크(Blink) 엔진을 사용
• Safari : 웹킷(WebKit) 엔진
• 파이어폭스(Firefox) : 게코(Gecko) 엔진
  
  

👉해결법

원인1 해결방안 처럼 적절히 os간의 격차가 크지 않도록 맞춰줄 뿐이다.

 

---

💡 폰트 개발시 주의사항 💡

환경(브라우저,운영체제)에 따라 폰트 크기가 달라지기 때문에, 텍스트 들어갈 공간의 너비를 좁게 잡으면 줄바꿈이 일어날 수도 있다.

따라서 텍스트 들어갈 공간의 여백을 충분히 잡아야 한다.

 

 

---

 

※ 참고자료 

• https://forum.figma.com/t/font-in-browser-seem-bolder-than-in-the-figma/24656
• https://jodnddus.blog/why-diff-btwn-figma-browser
• https://imweb.me/faq?mode=view&category=29&category2=33&idx=28275
• https://silverbi.me/blog/detail/figma%EC%9D%98-%ED%8F%B0%ED%8A%B8%EA%B0%80-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%99%80-%EB%8B%AC%EB%9D%BC-%EB%B3%B4%EC%9D%B4%EB%8A%94-%EC%9D%B4%EC%9C%A0