수직 중앙 정렬한 텍스트가 치우쳐 보이는 이유

이 글은 텍스트의 수직 중앙 정렬이 예상과 다르게 치우쳐 보이는 현상의 원인을 탐구합니다. 폰트 메트릭, 브라우저 렌더링, 픽셀 밀도의 상호작용이 이러한 미묘한 차이를 발생시킨다고 설명합니다.

특히, 대문자 'M'을 예시로 들어 폰트가 내부적으로 정의된 좌표 공간(Em-square)과 EM 크기를 기반으로 렌더링되며, 이로 인해 CSS에서 지정한 `font-size`와 실제 화면에 표시되는 폰트의 크기 및 위치에 차이가 발생할 수 있음을 보여줍니다. 폰트의 디자인과 브라우저의 렌더링 방식이 결합되어 발생하는 현상이며, 이를 이해하는 것이 자연스러운 텍스트 정렬을 구현하는 데 중요함을 강조합니다.