[ UI 디자인 시스템 기본 설정]
Typography
글자가 화면에 표시됐을 때 가독성을 높이고 매력적이게 보이게 하는 테크닉 & 아트
부가 관련 정보 ( 시스템 사용 시 설정한 근거 )
TypeFace- 폰트와 weight,size 를 포함하는 컬렉션.
- 예 : Helvetica (Helvetica Regular, Helvetica Light, Helvetica Bold) 포함
가독성을 높이는 팁- 최대 2개의 Typeface.
- 대부분의 UI Design은 1개만 쓴다
- 네이버 : Malgun Gothic
- 마켓컬리 : Noto Sans
- 토스 : Toss Product Sans 통일 ( 공식 다운 루트는 없음)
예시
- 2~3개의 weight만 선택
- Black, ultralight를 쓰지 않는다.
- 결국 light, regular, bold/ 를 선택하라는 뜻
- line-height는 글자의 1.4~1.8배 사이
- 1.6배가 최적이라고 주장하는 사람이 많다고 한다.
- Body Text는 16pt
- 17~18 pt도 고려할 수 있다.
정할 내용
- TypeFace 결정 (1~2개)
- Type System 결정
- 폰트 기본 크기 ( 16~18px 사이)
- level 별 사용할 weight
- level 별 line-height
⇒ 문서화
Color
[페이지 세부 디자인]
관련 레퍼런스
참고자료