폰트스타일
- 패밀리(Famaily) : 폰트의 종류 또는 이름
- 굵기(=무게감 Weight) : 단순히 굵은 게 아니라 이 글자가 얼마나 더 중요한지를 알려주기 때문에 '무게감'
이라는 표현을 사용 디자이너는 Thin, Light, Regular 등 굵기 이름으로 이야기하는 걸 더 선호
- 크기(Size) : 폰트의 크기, 일반적으로 16px부터 시작, 2px씩 줄이거나 늘림
※왜 16px이 시작점일까?
웹사이트의 기본 폰트 사이즈가 16px이기에 앱이 나오기 이전부터 웹사이트의 기본 폰트 사이즈를 16px로 사용했기 때문에 자연스럽게 기본값이 되었다.
#폰트 크기가 20px이상일 때는 4px씩 차이나게 하는 게 일반적이며, 보통 20px미만인 폰트들은 본문에 사용, 20px이상부턴 제목에 사용
- 행간(Line-height) : 폰트의 높이를 조절할 때 사용, 행간, 글자 줄 사이의 간격
※행간의 뜻
- 행간은 디자인 환경에서 글자 줄의 높이를 조정할 때 사용하는 중요한 폰트 속성
- 행간은 %화 같은 상대적인 단위나 px처럼 고정 단위로 나타낼 수 있다.
- ★행간은 글자의 크기와 그 사이 간격을 합친 값★
※일반적인 행간 값※
서체마다 모두 다르긴 하지만 일반적으로 통용되는 값
제목처럼 굵은 큰 폰트는 120~135%, 본문의 경우에는 135~170%사이로 하는것이 일반적
본문의 경우 150%로 하는게 제일 좋다. ☞왜 150%가 좋은가? : 150%는 2배수로 움직일 수 있다는 뜻, 규칙을 만들기도 간편하고 계산하기도 어렵지 않아 150%를 많이 사용한다.
※적당한 행간을 적용해야 하는 이유
- 절대적인 값은 없지만, 적당한 행간 값은 가독성에 큰 영향을 미친다.
- 행간이 너무 짧으면 다음 줄을 읽기위해 시선을 이동할 때 다음 줄 찾기가 어렵고, 또 위아래에 붙은 줄들이 계속 시야에 같이 들어와 읽는걸 방해한다.
- 행간이 너무 넓으면 다음 줄을 읽기위해 시선을 이동하면 다음줄을 놓치며, 전체적인 문단이 벌어져 보여서 레이아웃을 해친다.
※서체마다 행간을 확인해야 하는 이유
- 폰트 자체가 가진 기본적인 여백이기에 폰트를 처음 만들 때 생기기 때문에 임의적으로 바꿀 수 없는 기본값이다.
- 이 기본값은 폰트마다 모두 다르다.
- 자간 : 글자와 글자 사이의 간격, 행간과 마찬가지로 상대단위와 고정단위 모두 사용할 수 있다.
※UI에 추천하는 폰트 패밀리
▶ Noto Sans 노토 산스
▶ Pretendard 프리텐다드
▶ Spoqa Han Sans 스포카 한 산스*
▶ Min Sans 민 산스*
▶ SUIT 수트
'[UX, UI 디자인 입문] > UX, UI 학습일지' 카테고리의 다른 글
[Figma 활용법 (1), (2)] 통합 학습일지 (0) | 2024.03.22 |
---|---|
[Figma 활용법 (2)] 1주차 학습일지 (1) | 2024.03.21 |
[Figma 활용법 (1)] 3주차 학습일지(3) (1) | 2024.03.19 |
[Figma 활용법 (1)] 3주차 학습일지(2) (1) | 2024.03.19 |
[Figma 활용법 (1)] 3주차 학습일지 (0) | 2024.03.15 |