HIG(Human Interface Guidelines)/HIG - UI
[iOS - HIG] 25. Typography (글꼴, serif, san serift)
jake-kim
2021. 5. 27. 01:04
Typography 글꼴 기본 상식
- serif: 글자와 기호를 이루는 획의 일부 끝이 돌출된 형태
- san serif: serif 글꼴이 아닌 것 (획의 일부 끝이 돌출되지 않은 형태)
* "sans-" 의미: 프랑스어로 "없음"을 의미
- serif 쓰임: 서적과 신문과 같은 전통적인 인쇄물에 사용
- sans serif 쓰임: 잡지에 사용
애플에서 제공하는 2가지 Typography
- San Francisco (SF)
- UI의 시각적 선명도와 일치하도록 설계된 시스템 글꼴
- sans serif 유형 제품군 중 하나
- ex) 다른 sans serif: SF Pro(iOS, macOS, tvOS에서 사용되는 글꼴), SF Compact(watchOS), SF Pro Rounded, SF Mono
- New York(NY)
- SF글꼴을 보완하도록 설계된 독특한 톤을 제공하는 serif 서체
- 2가지 글꼴 다운로드
- iOS 14+ 부터 시스템에서 San Francisco, New York 제공
SF와 NY을 지향하면 좋은 이유
- 어떤 크기에서도 멋지게 보이도록 시스템에서 보간법을 사용하여 표출
- 호환되기 때문에 일관된 모양과 편안한 느낌을 유지
- SF와 NY 두 가지를 모두 사용하면 콘텐츠의 의미적 차이를 강조할 수 있는 장점 존재
SF 종류
- SF Pro, SF Compact: 모든 포인트 크기에서 최적의 가독성을 달성하기 위해 정밀한 폭과 깊이 제공
- SF Pro Rounded, SF Compact Rounded: 둥근 모형
- SF Mono: 모든 문자의 너비가 동일한 서체 (Xcode, Swift Playgounds는 기본적으로 SF Mono 사용)
NY
- 독서 경험을 제공하기 위해 사용되는 고전적인 serif 서체: 참고
글꼴 선택의 방향
- SF: 20포인트보다 작은 크기는 SF Pro Display 사용 / 20포인트보다 크다면 SF Pro Display 사용
- NY: 20포인트보다 작은 크기는 NY Small 사용 / 20~35포인트는 NY Medium 사용 / 36~53포인트는 NY Large 사용 / 53포인트보다 크다면 NY Large 사용
- 가능하면 시스템 텍스트 스타일 사용: 최적의 가독성 유지, 시각적으로 구별되는 방식으로 콘텐츠 표현이 가능
Dynamic Type Sizes
* 참고
https://www.raywenderlich.com/books/auto-layout-by-tutorials/v1.0/chapters/11-dynamic-type
https://ko.wikipedia.org/wiki/%EC%84%B8%EB%A6%AC%ED%94%84
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/