[수업질문] line-height 값에 관하여

Question

안녕하세요 강의를 듣다가 line-height 부분에 대해 궁금한 점이 있어서 글을 남깁니다. 수업에서는 PX의 값을 사용하였는데 혹시 %로 작업할 수 있는 방법은 없는것일까요? 피그마에서는 원래 어쩔 수 없는 사항일까요? 폰트 종류마다 leading 값이 제각각이라 어떤건 같은 사이즈인 24 이더라도 line-height 값을 26을 주면 다른 결과물이 나오더라고요 퍼블리셔 분께서 line-height: 1.5; 와 같은 값으로 하면 폰트에 상관없이 균등하다고 하시는데 저 값을 입력하면 PX로 인식을 해서 안되던데 방법이 없는지 궁금합니다.

볼드 UX · Answer

안녕하세요, hana님. 질문 주셔서 감사합니다. 타이포그래피 베리어블에서는 현재 120% line-height 값을 직접적으로 지원하지 않고 있습니다. 이 부분은 아직 업데이트되지 않은 것으로 확인됩니다. 따라서 베리어블을 적용하시고 싶으시면, 강의에서 언급드린 것처럼 직접 계산하여 적용하는 방법을 사용하셔야 합니다. 이 경우, line-height 값에는 픽셀(px) 단위를 붙여주시면 됩니다. 참고로 line-height에는 아래와 같은 단위/값이 사용될 수 있습니다: (MDN 문서 참고) normal 2.5 (단위 없는 비율 값, 즉 250%와 동일) 3 em 250 % 32 px 만약 균등한 비율로 설정하고 싶으시다면, 퍼블리셔 분이 말씀하신 대로 1.2 또는 120% 값을 사용하시면 됩니다. 다만, 현재는 이 값이 타이포그래피 베리어블에서 지원되지 않으므로,Primitive 베리어블을 무시하고 스타일 속성에서 직접 120%를 입력하시면 됩니다. ( ❌ 1.2는 안됩니다.) Dev Mode에서는 120%로 표시되며, 실제로는 이는 퍼블리셔분이 말씀하신 1.2와 동일합니다. 그래서 개발자분이 원하시는 방식(1.2 또는 120%)으로 이후에 자유롭게 적용하시면 될 것 같습니다. 도움이 되셨으면 좋겠습니다. 궁금하신 부분 있으시면 더 질문 주세요. 감사합니다. 볼드 드림.