웹 페이지에서 얇은(thin) 글꼴을 사용하면 운영체제나 브라우저에 따라 글자 가장자리가 거칠거나 뭉개져 보이는 경우가 있습니다. 이러한 문제는 CSS의 폰트 스무딩(font smoothing)과 텍스트 렌더링(text-rendering) 관련 속성을 활용하면 효과적으로 개선할 수 있습니다.
1. 얇은 글꼴을 더 부드럽게 렌더링하기
아래 세 가지 속성을 함께 적용하면 대부분의 브라우저에서 얇은 글꼴이 훨씬 매끄럽고 선명하게 표시됩니다.
text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important;
각 속성의 역할은 다음과 같습니다.
- text-rendering: optimizeLegibility — 커닝(kerning)과 합자(ligature)를 활성화하여 텍스트의 가독성을 높입니다.
- -webkit-font-smoothing: antialiased — WebKit 기반 브라우저(사파리, 크롬 등)에서 글꼴 가장자리를 안티앨리어싱 처리해 부드럽게 만듭니다.
- -moz-osx-font-smoothing: grayscale — macOS 환경의 파이어폭스에서 그레이스케일 안티앨리어싱을 적용합니다.
2. 구글 크롬 전용 설정
구글 크롬에서는 아래 한 줄만 추가해도 얇은 글꼴의 렌더링 품질이 눈에 띄게 향상됩니다.
-webkit-font-smoothing: antialiased !important;
3. text-rendering 속성으로 성능 최적화하기
text-rendering 속성은 용도에 따라 다양한 값으로 설정할 수 있으며, 이를 통해 렌더링 품질과 성능 사이의 균형을 조절할 수 있습니다.
text-rendering: auto; text-rendering: optimizeSpeed; text-rendering: optimizeLegibility; text-rendering: geometricPrecision; text-rendering: inherit;
- auto — 브라우저가 상황에 맞게 최적의 방식을 자동으로 선택합니다.
- optimizeSpeed — 렌더링 속도를 우선시하며, 커닝·합자 같은 세부 처리를 생략합니다.
- optimizeLegibility — 가독성을 우선시하여 커닝과 합자를 적극적으로 적용합니다.
- geometricPrecision — 정밀한 기하학적 계산을 통해 확대·축소 시에도 일관된 텍스트 표현을 제공합니다.
- inherit — 부모 요소의 text-rendering 값을 상속받습니다.
위 속성들을 프로젝트의 디자인 방향과 대상 브라우저에 맞게 조합하면, 얇은 글꼴도 어떤 환경에서든 깔끔하고 읽기 편하게 표시할 수 있습니다.