피그마는 웹 브라우저의 텍스트 렌더링 방식과 디자인 도구 간의 차이를 줄이기 위해 줄 높이(Line height) 산정 방식을 CSS 표준에 맞춰 재설계했습니다. 과거의 디자인 도구들이 텍스트를 단순히 위에서 아래로 쌓는 방식을 취했다면, 피그마는 글자를 행 높이의 중앙에 배치하는 '수직 중앙 정렬(Leading)' 방식을 채택하여 디자인과 실제 구현 결과물 간의 간극을 최소화했습니다. 이를 통해 디자이너는 개발자가 CSS로 구현했을 때와 동일한 시각적 결과를 피그마 환경에서 미리 확인할 수 있게 되었습니다.

브라우저 방식과 일치된 수직 정렬 시스템

피그마는 CSS의 줄 높이 계산 방식과 동일하게, 설정된 line-height 값에서 글자의 크기를 뺀 나머지 공간(Leading)을 글자의 위아래에 균등하게 배분합니다.
이 방식은 텍스트 박스 내에서 글자가 수직으로 중앙에 위치하게 만들어, 버튼이나 내비게이션 바와 같은 UI 요소 내에서 텍스트를 배치할 때 개발 단계에서의 오차를 줄여줍니다.
전통적인 디자인 도구들이 텍스트 상단에 기준점을 두었던 것과 달리, 피그마는 행의 전체 높이를 기준으로 정렬을 처리하여 웹 표준과의 호환성을 극대화했습니다.

타이포그래피의 정밀도를 높이는 수직 다듬기(Vertical Trim)

글꼴마다 고유하게 가지고 있는 상단과 하단의 여백(Leading) 때문에 발생하는 불필요한 공간을 제거할 수 있는 'Vertical Trim' 기능을 도입했습니다.
이 기능은 텍스트의 기준선을 대문자 높이(Cap height)나 베이스라인(Baseline)에 맞추어 잘라냄으로써, 아이콘이나 다른 그래픽 요소와 텍스트를 픽셀 단위로 정확하게 정렬할 수 있게 돕습니다.
수직 다듬기를 적용하면 텍스트 박스의 크기가 실제 글자 크기에 딱 맞게 조절되어, 레이아웃 설계 시 시각적인 정렬과 수치상의 정렬을 일치시킬 수 있습니다.

자동(Auto) 줄 높이와 글꼴 메트릭의 이해

피그마의 'Auto' 줄 높이는 글꼴 제작자가 폰트 파일 내에 정의해둔 메트릭(Ascender, Descender 등)을 기반으로 결정됩니다.
서로 다른 글꼴은 동일한 폰트 크기에서도 서로 다른 'Auto' 줄 높이 값을 가질 수 있으며, 이는 각 폰트 디자이너가 의도한 가독성을 반영한 결과입니다.
사용자가 직접 숫자 값을 입력하면 피그마는 해당 값을 고정된 행 높이로 사용하며, 이때 글자는 설정된 높이의 중앙에 위치하게 됩니다.

디자인과 개발의 효율성을 높이기 위해서는 피그마의 줄 높이 설정을 단순히 시각적인 간격으로만 보지 말고, CSS의 line-height 속성과 동일하게 취급해야 합니다. 특히 버튼이나 헤더처럼 정밀한 수직 중앙 정렬이 필요한 요소에는 'Vertical Trim' 기능을 적극 활용하여 개발자가 추가적인 패딩 조정 없이도 디자인을 그대로 구현할 수 있도록 가이드를 제공하는 것이 권장됩니다.