핵심 요약
NHN Cloud의 글은 폰트 메트릭과 렌더링의 상호 작용으로 텍스트가 수직 중앙에 완벽히 보이지 않는 원인을 분석하고, 실무에서 적용 가능한 보정 방법을 제시합니다.
구현 방법
- EM square, Baseline, Ascender, Descender, Cap height 등 메트릭을 이해하고 실제 높이를 계산합니다.
- font-size에 따른 높이가 달라지므로 필요 시 CSS transform으로 미세 보정합니다.
- 특정 폰트/브라우저 조합에 대해 보정값을 적용하거나 아이콘/SVG 사용을 권장합니다.
주요 결과
- 수직 정렬 차이는 보통 0.5px~2px 범위에서 나타나고 2x에서 소수점 표현이 가능하다고 설명합니다.
- 50px 폰트의 실제 높이 예시와 대문자 M의 여백 차이가 언급됩니다.
