• 가이드

적용한 폰트가 브라우저별로 차이가 발생합니다. (글꼴, 서체)

같은 폰트가 사용된 페이지를 서로 다른 브라우저에서 확인했을 때 민감한 분이라면 차이를 느낄 수 있습니다. 하지만 이는 폰트가 잘못 적용된 것이 아닌, 브라우저나 운영체제에 따라 폰트를 표현하는 방식이 달라 차이가 발생하는 것입니다.

브라우저별 폰트 랜더링 차이

위 이미지는 Google Fonts - Roboto 에서 폰트 크기를 13px로 조정한 상태에서 캡쳐한 것입니다. 보시다시피 같은 폰트임에도 브라우저나 심지어 같은 브라우저라도 운영체제에 따라서 미묘하게 다른 형태로 표현되는 것을 확인할 수 있습니다.

폰트 랜더링 차이는 조정이 어렵습니다.

웹사이트 운영자는 브라우저마다 폰트가 다르게 표현되는 것을 원치 않을 수 있습니다. 하지만 운영체제 및 브라우저 차원의 문제이기 때문에 웹페이지의 언어로는 제어가 불가합니다. 일부 CSS의 마크업(예: -webkit-font-smoothing: antialiased)으로 글꼴을 조금 더 부드럽게 하는 등의 조정이 가능하지만, 근본적으로 같은 랜더링으로 표현하는 것은 불가능합니다.

대신 줄바꿈이나 줄간격 차이를 고려합니다.

폰트 랜더링을 바꾸는 것은 불가하기 때문에 폰트 랜더링 차이에 의해 발생하는 글꼴의 크기(폭, 높이)차로 인한 줄바꿈 현상을 방지하는데 더 신경을 써야 합니다.

예를들어 텍스트가 들어갈 공간이 텍스트의 길이와 딱 맞게 표현되고 있다면, 어떤 브라우저에서는 공간이 충분하지 않아 의도치 않은 텍스트 줄바꿈이 발생할 수 있습니다. 따라서 텍스트가 삽입될 공간을 텍스트 길이보다 충분히 확보해 놓는 것이 바람직 합니다.

목록으로

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

115.6K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

297

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

1.2K

전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 채널, 엑심베이 공식파트너입니다.