타이포그래피

피그마 line-height CSS 변환

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

질문사항

Figma에서 line-height가 150%이면 CSS에서는 `line-height: 1.5;`로 작업하는 것이 맞나요?

답변

네, 맞습니다. Figma에서 `Line height`를 `150%`로 설정하면, 이는 해당 텍스트의 `font-size`에 대한 1.5배를 의미합니다. CSS에서는 `line-height: 1.5;`와 같이 단위 없이 숫자로 표기하면 `font-size`에 대한 배수로 적용됩니다.

예시:

Figma: `Font size: 16px`, `Line height: 150%` → 실제 라인 높이: `16px * 1.5 = 24px`

CSS: `font-size: 16px; line-height: 1.5;` → 실제 라인 높이: `16px * 1.5 = 24px`

개발자와의 소통 시, Figma의 `Line height` 설정이 `px` 단위인지, `배수(multiplier)`인지 명확히 하고, CSS에서 어떤 단위(px, em, rem, %)를 사용할지 사전에 합의하는 것이 중요합니다. 각 단위의 특징은 다음과 같습니다:

`%` (퍼센트): 폰트 사이즈 대비 비율. `font-size: 14px; line-height: 200%;`는 `28px`입니다.

`em`: 부모 요소의 폰트 사이즈에 비례. `1em`은 현재 폰트 사이즈와 같습니다.

`rem`: `root em`의 약자로, HTML `<html>` 요소의 폰트 사이즈에 비례합니다. 반응형 디자인에 유용합니다.

`vw` (viewport width): 뷰포트 너비에 비례.

`vh` (viewport height): 뷰포트 높이에 비례.

`px` (픽셀): 고정된 픽셀 값.