피그마 작업 시 폰트 설정: 일반 텍스트 vs. 버튼 텍스트의 Line-height

https://m3.material.io/styles/typography/applying-type

 

 

 

 

Figma에서 Line-height(줄 간격)를 어떻게 설정하느냐에 따라 디자인의 가독성과 효율성이 크게 달라집니다.

특히 일반 텍스트와 버튼에 들어가는 텍스트는 목적이 다르기 때문에 Line-height도 다르게 설정해야 합니다.

 

---

일반 텍스트의 Line-height: 가독성이 최우선

본문이나 설명처럼 긴 내용을 담는 텍스트는 사용자가 편하게 읽을 수 있어야 합니다.

• 권장 값: 폰트 크기의 150%~160% 또는 1.5~1.6 비율로 설정하는 것이 좋습니다.
• 예시: 14px 폰트에는 21px (150%) 또는 22px (157%) 정도의 Line-height가 적합합니다.

이렇게 설정하면 텍스트가 너무 빽빽해 보이거나, 너무 듬성듬성하지 않아 눈의 피로를 줄이고 내용을 더 쉽게 이해할 수 있습니다.

 

 

버튼 텍스트의 Line-height: 컴포넌트 유연성이 핵심

버튼은 클릭 가능한 요소로, 다른 디자인 요소들과 통일된 높이와 여백을 유지하는 것이 중요합니다. 따라서 텍스트 자체가 차지하는 공간을 최소화해야 합니다.

• 권장 값: Line-height를 Auto 또는 **100%**로 설정해야 합니다.
• 왜 Auto여야 할까?
  • Figma의 오토 레이아웃 기능을 사용할 때, Line-height를 22px처럼 고정값으로 설정하면 텍스트 레이어 자체가 22px 높이를 갖게 됩니다. 이 경우 오토 레이아웃의 패딩 값에 이 텍스트 레이어의 높이가 더해져 의도했던 것보다 버튼이 커집니다. Auto로 설정하면 텍스트 레이어의 높이를 최소화할 수 있어, 패딩 값만으로 버튼의 정확한 크기를 제어할 수 있습니다.

 

 

 

 

 

https://m3.material.io/styles/typography/applying-type#8643563f-6b11-49a4-8a3b-288b9c0c18df