타이포그래피

Figma 텍스트 높이, 패딩 설정

피그마 오픈카톡방2026. 3. 7.

질문사항

피그마에서 텍스트 높이와 개발 시 텍스트 높이에 차이가 있을 때, 텍스트 높이를 고려하여 패딩값을 설정해야 하나요? 특히 행간 높이를 `auto`가 아닌 `140~150%`로 사용할 경우 상하 패딩값 설정에 어려움이 있습니다.

답변

네, 피그마와 개발 환경 간 텍스트 높이 차이는 흔히 발생하며, 이는 주로 폰트 렌더링 방식이나 `line-height` 설정의 차이에서 기인합니다. 정확한 패딩값을 구현하려면 텍스트 높이를 고려하는 것이 중요합니다.

`line-height: auto`: 브라우저 기본값에 따라 폰트 자체의 메트릭스를 사용하므로 예측이 어려울 수 있습니다.

`line-height: 140~150%` (상대값): 폰트 사이즈에 비례하여 행간이 결정되므로, 텍스트 박스의 실제 높이가 달라집니다. 이 경우, `Auto Layout`에서 `padding`을 설정할 때 텍스트의 실제 높이(폰트 사이즈 + `line-height`로 인한 추가 공간)를 고려하여 계산해야 합니다.

`line-height` 고정값: `line-height`를 픽셀(px) 단위의 고정값으로 설정하면 텍스트 박스의 높이를 더 예측 가능하게 만들 수 있어 패딩 계산이 용이해질 수 있습니다.

디자이너는 개발자와 협의하여 텍스트 컴포넌트의 `line-height` 및 `padding` 기준을 명확히 정의하고, 필요하다면 `baseline` 정렬 등을 고려하여 디자인 시스템을 구축하는 것이 좋습니다.