Android와 Figma의 텍스트 높이·정렬이 1px씩 어긋나는 흔한 문제를, 폰트 padding과 ascent·descent·baseline이라는 font metric 관점에서 근본까지 파고든다. Compose의 LineHeightStyle과 custom 컴포넌트로 디자인 시스템 typography를 일관되게 맞추는 과정이 핵심이다.
핵심 포인트- TextView가 1px 밀리는 원인은 legacy font padding(Roboto 기준 상하 여백 보정)으로, API 28 이후 실제 font metric을 쓰면서 대부분의 최신 환경에선 제거 가능
- Android의 line height는 눈에 보이는 box가 아니라 baseline-to-baseline 간격이라, 숫자가 같아도 Figma가 기대한 여백과 실제 높이가 어긋남 — LineHeightStyle을 trim none·alignment center로 바꿔 전체 line box를 보존하고 디자인 시스템 전 typography에 일괄 적용
- 한국어 줄바꿈은 Unicode Line Breaking과 locale iterator에 따라 어절·음절 단위로 갈리므로, 좁은 tooltip·review UI는 zero-width/non-breaking space나 onTextLayout 실측으로 width만 줄이는 안전한 보정을 사용
- font size는 em box 크기일 뿐 실제 ascent·descent 합과 달라 line height 100%가 깨지므로, ClayText가 TextMeasurer로 실제 glyph를 먼저 재고 layout 높이를 고정·offset 보정
왜 읽나여러 플랫폼에서 텍스트 정렬이 미묘하게 어긋나 고생하는 Android/디자인 시스템 개발자에게, font metric 원리부터 Compose 옵션·custom 컴포넌트까지 이어지는 진단 가이드.