Figma의 줄 높이 (새 탭에서 열림)

Figma는 텍스트의 줄 높이를 글자 위아래에 균등하게 배분하고, 보다 현대적인 기준으로 측정하도록 변경했다. 이는 기존 파일에 자동 적용되지 않는 선택적 변경이며, 사용자가 원하는 시점에 업데이트할 수 있다. 이 글은 금속 활자부터 컴퓨터 글꼴, CSS까지 줄 높이와 수직 정렬이 발전해 온 과정을 설명하며 Figma의 변경 배경을 밝힌다.

금속 활자 시대의 줄 높이

• 초기 활자에서 폰트 크기는 글자 자체가 아니라 글자를 담는 납 블록의 높이를 의미했다.
• 같은 16pt 폰트라도 실제 글자 크기, 기준선 위치, 위아래 여백은 서체마다 달랐다.
• 조판공은 줄 사이에 얇은 납 조각을 끼워 행간을 추가했다.
• 이 납 조각을 뜻하는 leading에서 오늘날의 줄 높이 개념이 유래했다.
• 예를 들어 16pt 활자에 4pt 행간을 추가하면 전체 줄 높이는 20pt가 된다.
• 당시에는 행간을 추가할 수만 있었고, 활자에 내장된 공간을 제거할 수는 없었다.

디지털 폰트가 가져온 자유와 혼란

• 컴퓨터에서는 폰트가 고정된 납 블록이 아니라 다양한 수치와 메트릭을 담은 파일로 바뀌었다.
• Windows, Macintosh, OS/2 등 플랫폼마다 폰트 형식과 렌더링 방식이 달랐고, 버그와 호환성 문제도 발생했다.
• 화면에서는 글자가 고정된 상자에 묶이지 않으므로 행간을 자유롭게 추가하거나 제거할 수 있게 됐다.
• 폰트의 기본 줄 높이는 글자 크기와 무관하게 임의의 값으로 설정될 수 있었다.
• 같은 글자 크기와 같은 줄 높이를 사용해도 폰트 내부의 ascent, descent, 기준선 위치가 달라 시각적 결과가 달라졌다.

CSS와 폰트 메트릭의 복잡성

• 웹에서는 줄 높이를 단순히 글자 크기로만 결정하지 않고, 기준선과 인라인 박스를 기준으로 계산한다.
• CSS의 줄 높이는 일반적으로 한 줄의 기준선에서 다음 줄 기준선까지의 거리로 이해할 수 있다.
• 추가 공간인 “half-leading”을 글자 위와 아래에 나누어 배치하는 방식이 사용된다.
• 그러나 폰트 파일에 들어 있는 여러 메트릭 값이 서로 다른 목적을 가져 브라우저와 운영체제마다 결과가 달라질 수 있었다.
• 특히 OS/2 테이블의 ascent, descent, line gap 값은 폰트의 시각적 경계와 실제 줄 상자 크기를 일치시키지 못하는 경우가 있었다.

Figma의 줄 높이 변경

• Figma는 추가 줄 높이를 글자 위와 아래에 분배하는 방식으로 변경했다.
• 줄 높이를 글자 크기나 특정 플랫폼의 관행에만 의존하지 않고, 보다 현대적인 타이포그래피 및 웹 기준에 가깝게 측정한다.
• 이를 통해 텍스트가 프레임 안에서 수직으로 배치되는 방식을 더 예측 가능하게 만들려 했다.
• 변경 사항은 기존 파일에 강제로 적용되지 않는다.
• 사용자는 기존 텍스트를 그대로 유지하거나, 필요할 때 새 줄 높이 동작으로 업데이트할 수 있다.

하나의 완벽한 기준을 만들기 어려운 이유

• Figma는 인쇄물 디자인, 웹 디자인, 제품 UI 등 서로 다른 목적에 사용된다.
• 역사적인 조판 관습과 현대적인 CSS 동작이 항상 일치하지 않는다.
• 폰트마다 내부 메트릭이 다르고, 같은 폰트도 플랫폼과 렌더링 엔진에 따라 다르게 보일 수 있다.
• 따라서 Figma는 모든 상황에 하나의 절대적인 정답을 적용하기보다, 새로운 동작을 선택 사항으로 제공하는 방식을 택했다.

기존 디자인의 시각적 일관성이 중요하다면 파일을 즉시 변경하지 말고, 새 줄 높이 동작이 필요한 웹·제품 UI 작업부터 선택적으로 적용하는 것이 적절하다.