🤷‍♂️

subpixel-antialiased vs antialiased 차이

subpixel-antialiased (기본 렌더링 방식)

• 브라우저 기본 폰트 렌더링 방식

• 하위 픽셀 단위(Subpixel)까지 활용하여 텍스트를 선명하게 표현

• -webkit-font-smoothing: auto; 와 동일한 효과

• LCD 화면에서 더 뚜렷하게 보이는 효과가 있지만, 배경색이나 특정 디자인과 함께 쓰면 글자가 너무 뚜렷해서 거칠어 보일 수 있음

antialiased (안티앨리어싱)

• 픽셀 단위에서 그레이스케일을 활용하여 부드러운 글꼴 렌더링

• -webkit-font-smoothing: antialiased;와 동일

• 글자가 더 얇고 부드럽게 보임

• 고해상도(HiDPI, Retina) 디스플레이에서는 subpixel-antialiased보다 더 나은 가독성을 제공

2. 현대적인 브라우저에서 antialiased가 선호되는 이유

(1) HiDPI, Retina 디스플레이의 증가

과거 CRT 또는 저해상도 LCD 화면에서는 subpixel-antialiased가 더 선명하게 보였지만, 현대의 고해상도 디스플레이(예: Apple Retina, 4K/8K 모니터)에서는 하위 픽셀보다 그레이스케일 안티앨리어싱이 더 자연스럽게 보임.

예전에는 RGB 서브픽셀을 활용한 subpixel-antialiased가 가독성을 높였지만, 고해상도 디스플레이에서는 서브픽셀을 활용할 필요가 없음 → antialiased가 더 적합

(2) 다크 모드와 색 배경에서 더 나은 가독성 제공

서브픽셀 렌더링(subpixel-antialiased)은 배경색과 조합될 때, 특히 어두운 배경에서는 글자 주위에 색이 번지는 현상이 나타날 수 있음.

antialiased는 글자 경계가 더 균일하게 보이기 때문에 다크 모드 UI에서도 더 선명하게 보임.

(3) 플랫폼과 브라우저 간의 렌더링 일관성

• subpixel-antialiased는 Windows, macOS, Linux에서 각기 다르게 렌더링됨

• macOS에서는 기본적으로 antialiased가 적용됨

• Windows에서는 ClearType 같은 시스템별 렌더링 기술이 적용됨

• 따라서 웹에서 일관된 렌더링을 유지하려면 antialiased가 더 적합함