[iOS - HIG] 25. Typography (글꼴, serif, san serift)

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

San Francisco (sans serif)

• New York(NY)
  • SF글꼴을 보완하도록 설계된 독특한 톤을 제공하는 serif 서체

New York (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

• Dynamic Type Sizes (Accessibility Inspector, UIFontTextType) 글 참고

* 참고

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/