웹사이트 폰트 적용 최적화하기

웹사이트(Website)에 사용되는 폰트(글꼴)를 웹 폰트(Web Font)라고 하며 사용 기기에 폰트가 설치되어 있지 않아도 인터넷 서버에서 파일을 다운로드하여 웹페이지에 적용하는 기술입니다.

폰트는 유료와 무료가 있지만 무료인 경우에도 개인, 기업, 관공서에서 상업적 용도로 사용할 수 있습니다.

하지만 무료 폰트 자체 혹은 변형을 하여 무단으로 타인에게 유료로 판매하는 행위를 한다면 라이선스를 위반하게 되어 법적인 책임을 져야 합니다.

이로 인해, 라이선스 위반만 아니면 무료 폰트를 사용하여 웹사이트, 출판, 판촉물을 비롯한 각종 디자인 활동을 자유롭게 할 수 있습니다.

폰트 단위

html에서는 EM과 REM의 기준값을 지정된 배수로 변환하여 폰트의 크기를 표현하기 때문에 크기를 환산하려면 기준 크기의 값을 설정해야 하는데 기준 크기 값은 16px입니다.

픽셀(Pixel)

픽셀은 디지털 화면에서 이미지를 구성하는 가장 작은 점(화소)입니다.

모자이크처럼 수많은 픽셀이 모여 하나의 화면이나 사진을 만들며 단위로 표현하면 px입니다.

픽셀의 특징

하나의 픽셀은 그 안에 한 가지 색만 가지고 수많은 점의 색과 조합이 모여 전체 이미지를 표현합니다.

화면에 픽셀이 촘촘하게 많을수록 해상도가 높아지고 이미지가 선명해집니다.

픽셀은 디지털의 기준 단위이므로 cm나 mm와 같은 고정된 물리적 단위가 아닙니다.

즉, 기기의 해상도나 화면의 크기에 따라 1px의 실제 크기는 달라집니다.

EM

EM은 CSS에서 지정된  요소의 폰트 크기인 font-size를 기준으로 삼는 상대적 크기이며 단위로 표현하면 em입니다.

EM의 특징

EM은 지정된 요소의 폰트 크기에 비례합니다.

즉, 지정된 요소의 폰트 크기가 16px이면 1em의 크기는 16px입니다.

font-size 속성 이외 padding, margin, width 등과 같은 속성에 EM을 사용하면 부모 요소의 폰트 크기를 따르게 됩니다.

EM은 부모 요소의 크기를 계속 상속을 받아 곱해지는데 구조가 깊어지면 크기가 의도보다 훨씬 커지거나 작아질 수 있어 사용에 주의가 필요합니다.

REM

REM은 웹 문서의 최상위 요소인 html의 폰트 크기를 기준으로 삼는 상대적 크기이며 단위로 표현하면 rem입니다.

REM의 특징

일반적인 브라우저의 기본값인 16px을 REM으로 환산하면 1rem입니다.

부모 요소의 크기에 영향을 받는 EM과 달리, 중간에 부모 폰트 크기가 바뀌어도 오직 최상위 html 크기만 따르므로 계산이 단순합니다.

브라우저 설정에서 기본 폰트의 크기를 키우면 REM으로 지정된 모든 요소가 비례해서 커지므로 웹 환경에서 접근성이 뛰어나 폰트 크기를 지정할 때 REM을 사용하는 게 좋습니다.

웹사이트 폰트 특징과 종류

웹사이트 폰트는 웹페이지의 로딩 속도에 영향을 미치기 때문에 용량이 작아야 하고 기기 화면에서 가독성이 뛰어나야 합니다.

웹사이트 폰트 구비 조건

모든 기기와 브라우저에서 동일한 디자인의 폰트를 보여줄 수 있도록 일관되어야 합니다.

폰트 파일을 서버에서 다운로드하므로 시스템 폰트보다 초기 웹페이지 로딩 속도가 다소 느릴 수 있습니다.

압축률이 높고 최신 브라우저에서 지원하는 Woff 및 Woff2 형식의 폰트를 사용해야 합니다.

장점

폰트가 설치되어 있지 않은 기기에서 해당 폰트를 볼 수 있습니다.

디자인 활용 폭이 컴퓨터에 설치되어 있는 기본 폰트보다 넓고 자유롭습니다.

모바일 기기 제조사별, 기종별 탑재된 폰트가 상이하므로 웹사이트에 폰트를 적용하기 어려웠던 문제점을 해결할 수 있습니다.

단점

트래픽이 증가할 수 있는데 특히, 용량이 큰 한글 폰트에서 더 가중될 수 있습니다.

용량이 커서 사용 시 화면이 깜박이거나 글자가 일부만 보일 수 있습니다.

저작권 시비를 차단하려면 무료 폰트를 사용해야만 합니다.

웹사이트 폰트 제공처

구글 폰트를 통해 다양한 다국어 및 한글 폰트를 무료로 사용할 수 있으며 코드를 복사해서 CSS에 쉽게 삽입할 수 있습니다.

어도비 타입킷에서 웹 폰트를 제공합니다.

산돌구름은 한국의 대표적인 폰트 서비스 업체로써 자사의 히트 폰트들을 웹 폰트로 사용할 수 있도록 하고 있고 유료입니다.

눈누의 경우에는 상업적 이용이 가능한 무료 폰트를 모아두어서 원하는 폰트의 코드를 확인할 수 있습니다.

웹사이트 폰트 최적화

이미지로 대체

웹 폰트의 단점을 극복하기 위하여 제목, 소제목 등에 개성이 있는 폰트를 사용하고 싶은 경우에는 이미지를 사용하는 경우가 많습니다.

이 경우에는 Gif, Png-8, Svg 형식의 이미지를 주로 사용합니다.

다만, 폰트를 대신하기 위해 이미지를 사용하는 방식은 접근성 면에서 좋지 않아 로고와 같은 특별한 경우가 아니라면 웬만하면 폰트를 사용하는 것이 좋습니다.

시스템에 폰트 업로드

웹 호스팅 서버에 폰트를  FTP나 호스팅 업체에서 제공하는 파일 관리자를 이용해 폰트를 업로드합니다.

업로드를 한 후 CSS나 html의 style 태그 안에 아래 코드를 추가합니다.

@font-face {
font-family: ‘Custom Font’; /* 사용할 폰트 이름 지정 */
src: url(‘/fonts/Font.woff2’) format(‘woff2’),
url(‘/fonts/Font.woff’) format(‘woff’);
font-weight: 400;
font-style: normal;
}

웹사이트 요소에 폰트를 적용하려면 태그와 클래스에 다음과 같이 지정합니다.

body {
font-family: ‘Custom Font’, sans-serif;
}

폰트를 시스템에 업로드 하면 폰트 제공 업체를 통한 CDN보다는 웹페이지 로딩 속도가 빨라집니다.

서브셋(Subset) 경량화 폰트 적용

한글 폰트는 11,172자를 포함하고 있어 용량이 무겁습니다.

실제로 자주 사용하는 상용 한글은 2,350자로 문서나 웹사이트에 필요한 글자만 추출해 폰트 크기를 극단적으로 줄일 수 있습니다.

파이썬 라이브러리인 FontTools나 웹 기반 폰트 경량화 도구를 사용하면 쉽게 필요한 글자만 추출해서 사용할 수 있습니다.

그리고 대부분의 웹 폰트 서비스 업체에서는 서브셋을 다운로드할 수 있습니다.

웹 환경에서 가독성 높이기

폰트의 크기 설정

본문 기준 폰트의 크기를 16px(1rem) 이상으로 설정하면 모바일과 PC 모두에서 읽기 편합니다.

고딕 계열인 Pretendard나 Noto Sans KR, Inter와 같은 폰트는 기기 화면에서 해상도가 높고 선명하게 보입니다.

행 간과 줄 길이 조절

폰트 크기의 1.5배~1.6배 정도가 줄과 줄 사이의 답답함을 없애줍니다.

한 줄에 45~75자 사이가 오도록 제한해 시선이 다음 줄로 쉽게 이동하게 줄 길이를 설정합니다.

색 대비와 여백 대비

폰트의 색은 검은색(#000000)보다는 어두운 회색(#444444 또는 #333333)으로 하고 바탕은 흰색(#ffffff)이나 종이와 유사한 색(#f2f4f7)을 사용하면 눈부심과 피로감을 줄일 수 있습니다.

특히, 폰트의 색이 검은색일 경우에는 글자의 뭉개짐이 두드러져 보이기 때문에 피하는 게 좋습니다.

문단과 문단 사이에, 이미지와 글자 사이에 충분한 여백을 두어 정보가 뭉쳐 보이지 않게 합니다.

마치며…

웹 폰트는 사용자 기기에 설치되어 있지 않아도 서버에서 폰트를 내려받아 웹페이지에 일관되게 출력하는 기술로, 브랜드 정체성 확립과 사용자 경험(UX) 최적화에 핵심적인 역할을 합니다.

모든 방문자에게 기기와 OS에 상관없이 동일한 디자인의 폰트를 제공하면 기업이나 서비스만의 고유한 감성과 개성을 시각적으로 각인시킬 수 있고 첫 접점에서 신뢰를 형성할 수 있습니다.

가독성이 좋은 폰트를 사용하여 피로감을 줄여주고 제목과 본문의 폰트 굵기와 크기 조절로 시각적 흐름을 매끄럽게 만들며 시스템 환경 차이로 인한 레이아웃 깨짐 현상을 예방해야 합니다.

하지만 폰트 용량이 크면 초기 웹페이지 렌더링 속도가 느려져서 폰트 로딩 중 글자가 보이지 않거나 깜빡이는 현상이 발생할 수 있습니다.

이를 해결하기 위해 용량이 작은 Woff 및 Woff2 형식의 폰트를 사용하고 서브셋 경량화를 적용하거나 font-display 속성을 활용해서 최적화를 하는 것이 필수라 하겠습니다.