폰트 스타일의 개념
디자인 시스템에서 사용할 폰트를 모아둔 목록으로 폰트 스케일이라 부르기도 한다. 여기서 스케일이란 일정한 규칙에 따라 정렬된 하나의 세트를 뜻한다.
폰트 스타일의 구성
1. 패밀리 (Familly)
폰트 종류를 뜻하며 편하게 폰트 이름이라 생각하면 된다.
2. 굵기 (무게감, Weight)
일반적으로 굵기라는 뜻이지만 디자인 시스템에선 무게감을 의미한다. 단순히 굵기를 지정하는 것을 넘어서 어떠한 글자의 중요성을 강조하기 때문이다. 디자이너는 Thin, Light, Regular 등의 굵기로 이야기하고, 개발자는 100, 200 등의 각 굵기에 할당된 값으로 이야기한다.
3. 크기 (Size)
폰트의 크기이며 일반적으로 16px로 시작해서 2px씩 증감한다. 또한 크기가 너무 작아지면 읽기 힘들어지기 때문에 10px 미만은 거의 사용하지 않는다.
폰트 크기가 20px 이상으로 넘어가면 기존 2px 차이의 경우 육안으로 구분이 어려워 이때는 4px 단위로 차이를 주는 것이 좋으며, 보통 20px 이하는 본문 그리고 이상은 제목에 쓰인다.
> 16px이 시작점인 이유는?
앱이 나오기 전부터 웹사이트는 기본 폰트 사이즈가 16px로 사용되었기 때문에 자연스럽게 본문의 기본값이 되었다.
4. 행간 (Line-height)
우리가 폰트의 높이를 조절할 땐 글자 줄 사이(행간)을 이용하는데 행간은 디지털 환경에서 글자 줄의 높이를 세팅할 때 사용하는 중요한 폰트 속성이다.
행간은 % 등의 상대적인 단위나 px처럼 고정 단위로 나타낼 수 있으며, 행간은 글자의 크기와 그 사이 간격을 합친 값이다.
행간에 절대적인 값이 존재하는 건 아니지만 가독성에 큰 영향을 미치기 때문에 잘 지정해주어야 한다.
-
행간이 짧을 경우 : 다음 줄을 읽기 위해 시선을 옮길 때 찾기가 어렵고 한 줄을 읽을 때 다른 줄이 시야에 같이 들어와서 방해가 됨
-
행간이 넓을 경우 : 다음 줄을 읽기 위해 시선 이동 시 내용을 놓치게 되며 전체적인 문단의 벌어짐으로 레이아웃을 해침
5. 자간 (Letter-spacing)
글자와 글자 사이의 간격으로 행간처럼 상대단위와 고정단위 모두 사용 가능하다.
서체마다 행간 확인은 필수
폰트는 자체적으로 가진 기본적인 여백이 있는데 이는 처음 만들어질 때부터 존재한 것이라 디자이너가 바꿀 수 없는 절대적인 기본값이다. 게다가 그 값은 폰트 패밀리에 따라 모두 다르기 때문에 유심히 살펴야 한다.
일반적인 행간 값이 있다?
서체마다 다르다고 위에서 언급했지만, 현업에서 일반적으로 통용되는 값이 존재한다.
- 제목(굵고 큰 폰트) : 120~135%
- 본문 : 135~170%
본문의 경우 150%로 세팅하는 것이 가장 보편적이다.
150%인 이유는...
150%는 2로 나눈 값을 더한 결과값이다 (100 + 100*1/2)
즉 150%는 2배수로 움직일 수 있다는 뜻인데, 예를 들자면 기본 폰트 사이즈 16px일 때 2로 나눈 값은 8이기에 행간 값은 16px에 절반인 8을 더해 24px이 되는 것이다.
규칙을 만들기 편하고 계산 또한 어렵지 않아서 150%로 많이 쓰이는 것이다.
폰트 스타일 만들기
컬러 스타일과 마찬가지로 실무에서 진행되는 폰트 스타일 세팅 작업은 과정이 복잡하다. 폰트 패밀리 선택을 위해 여러 시안을 비교하거나 목적, 용도, 사용 위치 등에 따라 같은 폰트도 다르게 사용할 때가 있으며 수집가지의 스케일 만들기도 한다.
본문 스타일 만들기
우선 나는 폰트 패밀리로 프리텐다드를 선택하였다.
 |  |
|---|
- 텍스트 레이어 생성 후 이름을 Body/16px로 변경
- 텍스트 레이어 굵기 Regular / 폰트 사이즈 16px / 행간 150% 세팅
- 텍스트 레이어 2개 복수 후 각각 14px, 18px로 크기 변경
- 사이즈에 맞춰서 Body/14px, Body/18px로 레이어 이름 변경
제목 스타일 만들기
 |  |
|---|
- 텍스트 레이어 생성 후 이름을 Title/16px로 변경
- 텍스트 레이어 굵기 Bold / 폰트 사이즈 16px / 행간 135% 세팅
- 텍스트 레이어 2개 복수 후 각각 14px, 18px로 크기 변경
- 사이즈에 맞춰서 Title/14px, Title/18px로 레이어 이름 변경
폰트 스타일 추가 및 정리
-
추가 : 텍스트 레이어 모두 선택 후 Styler 플러그인 사용
-
정리 : Auto Documentation 플러그인 사용
3주차 숙제
디자인 시스템에서 사용할 회색조 색상 팔레트 10단계와 폰트 스타일 추가
