iOS/사파리에서 피그마보다 폰트 두껍게 렌더링되는 문제

"아이폰으로 확인해보니 피그마보다 글씨가 두꺼워요"

개발을 완료하고 보니 iOS에서 글씨가 피그마보다 두껍게 보이는 것 같다는 피드백을 받았다.

하지만 개발자 도구로 확인해보니 피그마와 폰트, 폰트 사이즈, 폰트 두께, 줄간격까지 똑같았다.

 

브라우저, 운영체제 차이

찾아보니 각 브라우저 엔진이 자체적인 font renderer를 가지고 있고, 운영 체제별 알고리즘에도 영향을 받기 때문에, macOS와 ㅈWindows에서 폰트가 다르게 보일 수 있다는 것. 피그마는 사용자가 동일한 파일을 공유할 때 일관된 크로스 플랫폼 뷰를 제공하기 위해 자체 렌더링 엔진을 사용하기 때문에 다른 브라우저에서 확인하는 폰트와 일치하지 않을 수 있다는 것이다.

 

 

해결방법

 

결론은 모든 플랫폼에서 완전히 동일한 뷰를 얻는 것은 불가능하다. 하지만, smoothing 속성을 설정하여 해결할 수 있다.

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

 

나는 tailwind css를 사용하고 있었기에 아래와 같이 적용했다.

@layer components {
  body {
    @apply font-pretendard flex justify-center text-black; // 기존 body에 적용했던 css
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

 

 

피그마

 

적용 전

사파리 적용 전

크롬 적용 전

안드로이드 적용 전

 

적용 후

사파리 적용 후

크롬 적용 후

 

+ 안드로이드 적용 후도 곧추가하겠습니다

 

보다시피 똑같지는 않지만 미세하게 얇아진걸 볼 수 있다...!!

 

출처: https://forum.figma.com/ask-the-community-7/font-in-browser-seem-bolder-than-in-the-figma-8146