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들의 그룹이다.

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. Automatic, Optional

  • Automatic : Font file 내부를 보면, 보통 Character-Glyph가 1:1로 Mapping되어 있다. 근데 안 그런 것도 있다. ex. "fi"와 같은 ligature (합자) (Automatic = 자동으로 붙여서 합자로 만들어준다는 뜻)

  

  • Optional : San Francisco는 가독성 (legible) 때문에 문자 "6"에 대해 alternative shape (두 가지 형태)을 가지고 있다.

• 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. 변경 가능하다. ex. 0 (neutral), negative/positive

  • adjustable.

  

  

• Kerning : an exception mechanism for individual pairs of glyphs.

  Font 정보에 Kerning Table이 들어있어서 glyph 사이의 간격을 조정해준다. 변경 불가하다.

  • embeded in Font.

  

• Leading : 줄간격. space between the lines. 변경 가능하다.

  • adjustable.

  

Concepts

• Legibility : 가독성, recognizing shapes, distinguishing them from another.

  • Scale : Font size 또는 사용자 및 화면의 물리적 거리가 가독성에 영향을 미친다.

  • Layout : 텍스트의 가독성 뿐만 아니라 UI 요소들의 Layout의 가독성도 고려해야 한다.

    오른쪽 사진은 Density가 너무 높아서 가독성이 나쁘다.

    

• Scale and Density in Glyph Design

  • Scale/Density는 텍스트/Layout 뿐만 아니라 Glyph Design에도 적용 가능한 개념이다.

  • 좌측 Glyph를 우측 Glyph로 개선했다. 크기가 작은 경우, 좌측의 가독성이 나쁘기 때문이다.

    우측은 negative space를 높여서 가독성이 좋다.

    

    

• Voice (Typographic Voice)

  Typeface를 다른 Style로 바꾼다면, 동일한 Family이더라도 텍스트의 느낌이나 전달력이 다르다.

  지하철 표지판을 읽을 때, 이메일을 보낼 때, 게임을 할 때 등 상황에 따라 적합한 Style을 사용해야 한다.

  이러한 특성을 활용하여 사용자에게 텍스트를 보다 적절히 전달하도록 해야한다.

  

  

  

  

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

   • Custom Fonts에 Dynamic Type을 적용하려면 아래와 같이 하면 된다.

     

   • Font를 정할 때 아래 요소를 고려해야 한다.

     

Details

• Arrows

  화살표는 이미 화면의 information density가 높은 상황에서 추가 정보를 표시하고 싶을 때 유용하다.

  

  화살표는 Font에 Character로 들어있으므로 weight를 지정 가능하다.

  또한 사용자가 Bold text swtich 또는 Dynamic type을 변경하면 크기가 자동으로 조정된다.

  

• High-legibility alternates

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

  

  

• Small caps

  기존의 대문자, 소문자 체계에 Small Cap이 추가되었다고 보면 된다.

  

  아래처럼 Acronym (두문자어)를 사용하거나, 숫자 뒤의 정보를 de-emphasize하고 싶을 때 유용하다.

  

  Apple TV에 사용된 예시이다.

  

  

  

  아래처럼 왼쪽에 항목, 오른쪽에 내용이 있을 때, 항목 (STARRING)의 텍스트 크기를 내용보다 조금 작게 표시하고 싶을 때 사용할 수 있다. density 및 stroke thickness를 유지할 수 있어서 좋다.

  단순히 글자 크기를 줄이는 것과 효과가 다르다. 글자 크기를 줄이면, 자동으로 Weight이 줄어들고 Tracking 자간이 좁아져서 다른 텍스트와 density가 일치하지 않는다.

  

  

  • 첫번째가 유용하다. (세번째는 별 효과가 없음)

  

  

  • 두번째가 유용하다. Map에서 Zoom Hierarchy에 따라 표시할 때 사용한다. (첫번째는 별 효과가 없음)

  

  아래처럼 System Font의 숫자 및 Punctuation (문장 부호)에도 Small cap을 적용할 수 있다.