[UI/GUI] 타이포그래피 (Typography)

 

01 브라우저에 폰트가 출력되는 개념

• 디자이너가 노토산스 폰트로 디자인

 

 

• 퍼블리셔는 노토산스 폰트로 코드 작성

font-family : {'Noto Sans KR'. san-serif;}

 

 

 

 

 

02 기본 폰트 사용법

• windows
  • 돋음.ttf
  • 맑은고딕.ttf   : 디지털 px에 최적화 글꼴

 

• Mac
  • 애플 SD 고딕 네오.ttf

 

 

 

 

 

03 웹 폰트 제작과 사용법

03-1  웹 폰트 확장자 종류

 

• ttf    : 힌팅이 있어서 사용 권장
• otf
• woff   : 용량이 작음 => 적극 권장!
• eot
• woff2
• svg

 

※ 확장자가 다양한 이유? 브라우저의 종류가 다양하기 때문에!

※ 힌팅 이란?

 

 

 

03-3 웹 폰트 최적화 방법

• 2,350 자 폰트 사용하기.
• weight 적게 사용하기. (글꼴 두께 제한)

 

 

 

 

03-4  구글 폰트

https://fonts.google.com/

Google Fonts

 

 

 

 

 

04 폰트 단위 px, pt 이해하기

• PPI
  • Picels
  • Per
  • Inch
• Mac OS = 72 ppi
• windows = 96 ppi
• 1pt = 1px * 96/72

 

 

 

04-1  photoshop px 단위 변경 (Mac OS)

Photoshop - Preferences - General

 

단위 Pixels 로 변경

 

px 로 변경된 것을 확인!

 

 

 

04-2  photoshop px 단위 변경 (windows)

Edit - Preference - General

 

Units Pixels 로 바꾸기

 

px 로 바뀐 것을 확인!

 

 

 

 

 

05 디바이스에 맞는 폰트 크기 선정

 

 

• 데스크탑 본문
  • 12-18px
  • 주로 16 px 사용.
  • 본문 많은 경우 14-15px 사용.
  • 유저 연령층 높은 + 가독성 높게 17-18px 사용.

 

• 모바일 본문
  • 본문 많은 경우 14-16px 사용.
  • 유저 연령층 높은 + 가독성 높게 17-18px 사용.

 

 

 

05-1  데스크탑에 사용하기 좋은 본문 크기 선정하기

 

 

 

05-2  모바일에 사용하기 좋은 본문 크기 선정하기

 

 

 

05-3  폰트 최소 크기

 

 

 

 

 

06 웹 자간과 퍼블리싱 자간의 이해

• 자간 : 글자와 글자 사이의 간격. (letter-spacing)
• 자간이 필수는 아님.
• 크기와 두께, 행간으로도 충분!

자간의 차이

 

 

 

06-1  Photoshop / Xd (1/1000)

 

자간과 커닝은 모두 현재 문자 크기에 상대적인 측정 단위인 1/1000em 으로 측정 (출처-Adobe)

※ em : 상대적인 값

 

 

 

06-2  Sketch / Figma (1/100)

1000px tracking = 100% letter spacing : 1em letter-spacing (CSS)

 

 

 

 

 

07 웹 행간과 퍼블리싱 행간의 이해

• 행간 : 글, 줄 또는 행 사이의 공간을 말함. (Line Height)
• 더블스페이스 추천!
• 퍼블리셔는 배수 값을 써야함.
  • 행간 / 폰트크기 = 배수

 

 

 

 

07-1  예제

 

 

 

 

 

08 디바이스에 맞는 글자 길이와 줄바꿈

08-1  글자 길이

• 16px 기준 40-60 길이가 적당.
• Naver: 647px
• Brunch: 700px

 

16px 기준 40-60 길이가 적당

 

 

 

08-2  줄바꿈

강제로 행 바꿈! (한국은 글자 길이)

※ word-break : keep-all 단어 별로 떨어뜨리기. (CSS)

 

 

 

 

 

09 웹 접근성에 맞는 폰트 컬러

• 웹 접근성 :  사용자가 장애 유무 등에 관계없이 웹사이트에서 제공하는 모든 콘텐츠를 동등하게 인식 할 수 있도록 제공하는 것.

 

 

 

 

09-1  사이트

• Contrast Checker 검색!
• Contrast Ratio 가 최소 4.5 : 1 이상이어야 함.

 

 

https://webaim.org/resources/contrastchecker/

WebAIM: Contrast Checker

 

 

 

09-2  Color Palette

 

 

 

 

09-3  총 정리

• 배경과 폰트의 명도대비 4.5 : 1 이상.
• 웹 접근성 최소 aa 등급.
• 컬러 팔레트 로 가이드 생성.