UI\UX 공부/figma강의 정리

[3강] 02.폰트 스타일

아노말로카리스 2025. 7. 10. 17:15

 

폰트 스타일 
  • 폰트 스케일이라고도 함. 스케일=일정한 규칙에 따라 정렬된 하나의 세트.
  • 컬러 시스템과 마찬가지로, 디자인 시스템에서 사용할 폰트를 모아둔 목록.
  • 구성
    패밀리 : 폰트 종류
    굵기(무게감) : 글자의 중요성을 알려줌
    크기 : 일반적으로 16px에서 시작, 2px씩 줄이거나 늘리다가 20px 이상부터는 4px씩 차이 나게 한다.
    행간 : 글자 줄 사이의 간격. 큰 폰트는 120~135%. 본문은 135~170% 사이를 추천.
    자간 : 글자 간의 간격.

 

실습

 

1. Text 작성하고 이름을 Body/16px라고 작성하고, Text를 16px 크기에 자간을 150%로 변경. 이후 같은 걸 2개 복사한 다음 각각 크기와 이름을 14px와 18px로 변경.

 

 

2. Body/16px를 복사해서 Title/16px로 바꾼 다음, Text를 자간을 135%로 변경. 이후 같은 걸 2개 복사한 다음 각각 크기와 이름을 14px와 18px로 변경.

 

3. 만든 Text들을 전부 선택한 다음, Styler 플러그인의 Generate Styles 기능을 사용하여 글꼴 스타일을 작성.