FRONTEND·중요도 5·2025. 11. 11.·NHN Cloud Meetup
수직 중앙 정렬한 텍스트가 치우쳐 보이는 이유
── KO ──────────────────
텍스트의 수직 중앙 정렬 문제를 설명하는 글입니다.
이 글에서는 폰트가 수직 중앙 정렬 시 실제로 왜 치우쳐 보이는지에 대한 원리를 설명합니다. 폰트의 메트릭과 브라우저 렌더링, 픽셀 밀도가 상호작용하여 발생하는 미세한 차이가 그 원인입니다. 또한 대문자 'M'을 통해 폰트 높이 측정의 중요성과 폰트 렌더링 방식을 설명하며, 올바른 정렬을 위해 고려해야 할 요소를 논의합니다.
── EN ──────────────────
This article explains issues with vertically aligning text.
The article explores why text may appear misaligned when using vertical center alignment. It discusses the interaction of font metrics, browser rendering, and pixel density that causes these subtle discrepancies. Using the uppercase 'M' as a reference, it highlights the importance of font height measurement and the font rendering process. Finally, it addresses considerations for achieving proper text alignment.