타이포그래피

폰트 여백 포함/제외 스페이싱 기획

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

질문사항

폰트 사용 시 위아래 여백을 포함하여 스페이싱을 기획해야 하나요, 아니면 폰트 여백을 없애고 스페이싱을 기획해야 하나요?

답변

Figma의 텍스트 레이어는 `line-height` 속성에 따라 위아래로 여백(bounding box)을 가집니다. 이 여백은 폰트 자체의 디자인과 `line-height` 설정에 따라 달라집니다.

여백 포함 기획 (일반적):

대부분의 경우, 텍스트 레이어의 시각적 바운딩 박스를 기준으로 스페이싱을 기획하는 것이 일반적입니다. 이는 실제 렌더링되는 UI에서 요소 간의 간격을 예측하기 쉽기 때문입니다. 특히 개발자와의 협업 시, CSS의 `line-height`가 적용된 상태로 간격이 계산되므로 이 방식이 더 효율적일 수 있습니다.

여백 제외 기획 (특정 상황):

폰트의 실제 시각적 상단/하단 경계(cap height, baseline 등)를 기준으로 정확한 스페이싱을 원한다면, 텍스트 레이어의 `line-height`를 조절하여 여백을 최소화하거나, 텍스트 레이어 자체의 바운딩 박스가 아닌 텍스트 콘텐츠의 시각적 경계를 기준으로 수동으로 간격을 조정해야 합니다.

Figma에서는 텍스트 레이어의 `Type details` 패널에서 `Trim box` 기능을 활용하여 텍스트의 시각적 바운딩 박스를 조절할 수 있습니다. 하지만 이 방식은 일관성을 유지하기 어렵고 개발 구현 시 오차가 발생할 수 있습니다.

결론: 특별한 경우가 아니라면, 텍스트 레이어의 `line-height`에 의해 생성되는 여백을 포함하여 스페이싱을 기획하는 것이 일반적이며, 개발 구현 시에도 더 자연스럽게 연결됩니다. 폰트의 시각적 여백을 정확히 제어하고 싶다면, `line-height`를 `1` 또는 `auto`로 설정하고, 필요에 따라 `Trim box` 기능을 활용하거나, `Auto Layout`에서 `Space between` 대신 `Fixed space`를 사용하며 수동으로 조정하는 방법을 고려할 수 있습니다.