[WWDC 2016] Typography and Fonts - 글꼴 관련 용어 및 업데이트

🤯 Notion에서 옮겼더니 이미지가 하나도 안들어가서 나중에 포스트를 수정하겠습니다. 참고해주세요.

Notion 링크 : https://www.notion.so/Typography-and-Fonts-WWDC-2016-20a9d963ebeb42b38a671a81917b3153

 

안녕하세요. 애플사이다 입니다.

거의 한 달만의 포스팅입니다. 개념을 완벽히 익히고 나서 포스팅을 하고 싶다는 욕심이 있었는데 좀 내려놓아야 할 것 같아요.

아니면 야곰 아카데미 캠프 생활을 하는 동안 글을 하나도 못쓸 것 같아요.

 

요즘은 Apple의 Accessibility 기능에 대해 배우고 있습니다.

Accessibility에 대한 내용은 Apple의 HIG 문서에서 확인할 수 있는데, 누구나, 신체적인 장애가 있어도 Apple 제품을 손쉽게 사용할 수 있도록 지원하는 기능입니다.

한 번쯤 사용해봤을 ✅  Siri (음성 인식), Voice Over (화면 읽어주기), Zoom (확대), Larger Text (글씨 크기 확대) 등이 알고 보면 모두 Accessibility 기능입니다.

 

이번에는 Accessibility의 Dynamic Type을 이해하기 위한 선행 학습으로 Typography와 Fonts에 대해 알아보겠습니다.

WWDC 2016의 Typography and Fonts 세션에 나왔던 생소한 용어들을 정리해봤습니다.

 

Typography 관련 Apple의 HIG 문서도 꼭 읽어봐야 합니다. 

문서에서 계속해서 (브랜딩 목적이나 게임 앱 등 특수 상황이 아니면) "시스템에서 기본 제공하는 글꼴을 사용하라"라고 강조하고 있습니다.

---

1. San Francisco (SF)

• San Francisco is a sans serif type family that includes SF Pro, SF Pro Rounded, SF Mono, SF Compact, and SF Compact Rounded. SF Pro is the system font in iOS, macOS, and tvOS.
• Font Family : Typeface를 공유하지만 Typestyle이 다른 Font들의 그룹이다.

2. Terminology (용어)

• Text : Text encodes language and has to do with meaning. Auto-correct 되는 대상이다.
• Character : Text is made of characters. abtract unit of text, represented by a code (ex. "A" = U+0041)
• Glyph : Character is encoded/represented by Glyphs. Glyph is stored on devices as an outline.
• Font : Glyph 등은 모두 Font file에 저장되어 있다. Fonts are common multiple styles.
• Feature : ex. Optional, Automatic 
  • Optional : San Francisco는 가독성 (legible) 때문에 문자 "6"에 대해 alternative shape (두 가지 형태)을 가지고 있다.
  • Automatic : Font file 내부를 보면, 보통 Character-Glyph가 1:1로 Mapping 되어 있다. 근데 안 그런 것도 있다. ex. "fi"와 같은 ligature (합자) (Automatic = 자동으로 붙여서 합자로 만들어준다는 뜻)
    

    

    ligature 예시

• Style : Fonts have multiple Styles. (Font 종류마다 Style의 개수는 다르다.)
  ex. bold, italic, bold italic, condensed 등
• Typeface : the design idea behind Styles/Shapes. 직역하면 글꼴, 서체라는 뜻인데... 좀 애매한 개념이다.
  ex. San Francisco (SF) 및 New York (NY)은 Typeface이다.
  제드언니의 블로그를 참고해서 읽었다. 
• Typography : 위 모든 요소를 사용하여 텍스트를 전달하는 것이다. 
  • Typography is using type to set text and encode language. (텍스트를 설정하고 언어를 인코딩하기 위해 활자를 사용한다.)
  • Typography is the foundation of graphic/UI design.
  • 모든 개발자는 Typographer이다.
• Spacing : 문자 "A" 자체적으로 좌우로 빈 공간이 있다. Font 설정이므로 변경 불가하다. (embeded in Font.)
• Tracking : 자간인듯? Tracking is a modifier on the native spacing. 변경 가능하다. (adjustable.)
  ex. 0 (neutral), negative/positive
• Kerning : an exception mechanism for individual pairs of glyphs. (embeded in Font.)
  Font 정보에 Kerning Table이 들어있어서 glyph 사이의 간격을 조정해준다. 변경 불가하다.
• Leading : 줄 간격. space between the lines. 변경 가능하다. (adjustable.)

3. Concepts

• Legibility : 가독성, recognizing shapes, distinguishing them from another.
  • Scale : Font size 또는 사용자 및 화면의 물리적 거리가 가독성에 영향을 미친다.
  • Layout : 텍스트의 가독성뿐만 아니라 UI 요소들의 Layout의 가독성도 고려해야 한다.
  • ex. 오른쪽 사진은 Density가 너무 높아서 가독성이 나쁘다.
• Scale and Density in Glyph Design
  • Scale/Density는 텍스트/Layout 뿐만 아니라 Glyph Design에도 적용 가능한 개념이다.
  • 좌측 Glyph를 우측 Glyph로 개선했다. 크기가 작은 경우, 좌측의 가독성이 나쁘기 때문이다.
  • 우측은 negative space를 높여서 가독성이 좋다.
• Voice (Typographic Voice)
  • Typeface를 다른 Style로 바꾼다면, 동일한 Family이더라도 텍스트의 느낌이나 전달력이 다르다.
  • 지하철 표지판을 읽을 때, 이메일을 보낼 때, 게임을 할 때 등 상황에 따라 적합한 Style을 사용해야 한다.
  • 이러한 특성을 활용하여 사용자에게 텍스트를 보다 적절히 전달하도록 해야 한다.

4. Tools

플랫폼에서 사용 가능한 Tool은 아래 세 가지가 있다.

1) System Font

• native to platform (feels native to platform as a typeface)
  

  // 모든 플랫폼에서 System Font API에 접근하는 방법은 동일하다
  NSFont.systemFont(ofSize: 14, weight: NSFontWeightSemibold)
  UIFont.systemFont(ofSize: 14, weight: UIFontWeightBlack)

• Weights, Size-Specific Tracking, Size-Specific Outlines 
  - Font의 weight를 조정할 수 있고, Font의 Size에 따라 Tracking/Outline이 자동으로 조정된다.
• Bold Text Switch
  - 설정 앱에서 Bold Text로 지정 가능하다.

2) Dynamic Type (iOS, watchOS)

• Accessibility와 관련 있다.
  

  Test Styles - UIFont.preferredFont(forTextStyle:)
   // System Font를 지정하지 않고, headline, body, largeTitle 등의 sementic identifier를 지정한다
  
  Content Size Categories
  // 아래와 같이 설정 앱에서 텍스트 크기를 조정 가능하다

• 설정 앱에서 텍스트 크기를 조정 가능하다. Dynamic Type을 지원하는 앱이라면, 여기서 지정한 크기로 텍스트 크기가 일괄 변경된다.
• Text Style API (Large Title, Headline, Body 등)를 통해 자동으로 Dynamic Type이 지원된다.

3) Custom Fonts

*Apple의 HIG 문서에서는 (브랜딩 목적이나 게임 앱 등 특수 상황이 아니면) "시스템에서 기본 제공하는 글꼴을 사용하라"라고 강조하고 있다.

• Custom Fonts에 Dynamic Type을 적용하려면 아래와 같이 하면 된다.
• Font를 정할 때 아래 요소를 고려해야 한다.

5. Details

1) Arrows

• 화살표는 이미 화면의 information density가 높은 상황에서 추가 정보를 표시하고 싶을 때 유용하다.
• 화살표는 Font에 Character로 들어있으므로 weight를 지정 가능하다.
• 또한 사용자가 Bold text swtich 또는 Dynamic type을 변경하면 크기가 자동으로 조정된다.

2) High-legibility Alternates

• i, L, 0, 6을 자세히 보자.

3) Small caps

• 기존의 대문자, 소문자 체계에 Small Cap이 추가되었다고 보면 된다.
• 아래처럼 Acronym (두문자어)를 사용하거나, 숫자 뒤의 정보를 de-emphasize하고 싶을 때 유용하다.
• Apple TV에 사용된 예시이다.
  • 아래처럼 왼쪽에 항목, 오른쪽에 내용이 있을 때, 항목 (STARRING)의 텍스트 크기를 내용보다 조금 작게 표시하고 싶을 때 사용할 수 있다. density 및 stroke thickness를 유지할 수 있어서 좋다.
  • 단순히 글자 크기를 줄이는 것과 효과가 다르다. 글자 크기를 줄이면, 자동으로 Weight이 줄어들고 Tracking 자간이 좁아져서 다른 텍스트와 density가 일치하지 않는다.
• Uppercase에 사용한 예시
  - 첫 번째가 유용하다. (세 번째는 별 효과가 없음)
• Lowercase에 사용한 예시 
  - 두 번째가 유용하다. Map에서 Zoom Hierarchy에 따라 표시할 때 사용한다. (첫 번째는 별 효과가 없음)
• 아래처럼 System Font의 숫자 및 Punctuation (문장 부호)에도 Small cap을 적용할 수 있다.

 

- Reference

• Apple > WWDC 2016 > Typography and Fonts (YouTube 링크)
• Apple > Human Interface Guidelines > Typography
• 블로그 Zeddios - Typographical Concepts 

 

🍎 포스트가 도움이 되었다면, 공감🤍 / 구독🍹 / 공유🔗 / 댓글✏️ 로 응원해주세요. 감사합니다.