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

텍스트 수직 중앙 정렬의 오해와 원인

• 텍스트를 수직 중앙 정렬해도 폰트 메트릭, 브라우저 렌더링, 픽셀 밀도의 상호작용으로 인해 시각적으로 치우쳐 보일 수 있습니다.
• 폰트는 Em-square라는 가상 좌표 공간에서 메트릭(Baseline, x-height, Cap height, Ascender, Descender)을 정의하여 만들어집니다.

폰트 크기 결정 및 치우침 현상

• font-size는 문자 자체의 높이가 아닌 Em-square의 크기를 결정하며, 실제 폰트 높이는 Ascender와 Descender를 포함하여 계산됩니다.
• 계산된 폰트 크기 내에서 문자가 배치될 때, 특히 픽셀 단위의 홀수/짝수 문제로 인해 위/아래 여백이 불균형해져 수직 중앙 정렬이 어긋나 보입니다.
• 다양한 CSS 수직 정렬 속성은 폰트 자체의 위치를 조정할 뿐, 폰트 크기 내 텍스트 정렬 문제를 해결하지 못합니다.

실용적인 해결 방안

• CSS transform의 translateY를 사용하여 텍스트 위치를 미세하게 조정할 수 있습니다.
• 특정 폰트나 크기 조합에 대한 보정 값을 미리 계산하여 적용하거나, 정확한 정렬이 중요한 경우 SVG나 아이콘을 활용할 수 있습니다.
• 패딩/마진을 추가하거나 브라우저 환경 및 픽셀 밀도를 감지하여 조건부 스타일을 적용하는 방법도 있습니다.