• San Fransico 폰트
• 텍스트는 유저 경험에서 가장 많은 부분을 차지하며, 폰트는 그 텍스트를 시각적으로 보여주기 위해 필수 불가결한 도구다.
  • 폰트는 다양한 거리, 밝기, 크기등의 환경에 대응해야 한다.
  • 그래서 다양한 환경에서 일관적인 경험을 제공하기 위해 새로운 폰트를 만들었다.
• 폰트 패밀리 계층
  • SF(macOS, iOS)
    • Text: 6단계 Weight
    • Display: 9단계 Weight
  • SF Compact(WatchOS)
    • Text: 6단계
    • Display: 9단계 Weight
  • 둘은 약간의 차이가 있고, 가장 큰 차이는 측면 라운드 처리 여부
    • 스타일적인 측면도 있지만, 기능적으로도 compact가 글자간 간격을 줄일 수 있다.
• 폰트의 특성 차이
  • 용어 설명
    • baseline: 말그대로 글자의 기준선
    • x-Height: 소문자 높이 정렬 기준
    • Cap-Height: 대문자 높이 정렬 기준
    • Descender: 글자가 baseline아래로 내려갈 수 있는 한계치
    • Ascender: 글자가 baseline위로 올라갈 수 있는 한계치
    • 다만 화면은 뒤집힌 이차원 좌표계로 표현된다는 점 때문에 표현이 헷갈릴 수 있다. 폰트의 표현 가능 범위는 Ascender…Descender가 된다.
  • 기존에 쓰던 폰트와 거의 유사하지만 약간다르다.
    • Cap-Height가 Ascender보다 약간 작다.
    • x-Height 값이 늘어났다.
    • 숫자는 대문자에 맞춰서 정렬된다.
• 디자인 원칙
  • Visual Perception is largely about illusion
    • 다른 모양을 수학적으로 동일하게 metric을 맞추면 오히려 같지 않아 보인다.(ex. 같은 높이의 사각형과 원을 나란히 놓으면 원의 높이가 작아보인다)
    • 따라서 비슷해보이기 위해서 어느 한쪽을 같지 않게 조정해줘야 될 필요가 있다. (Ex. sharp( # ) 의 가운데 빈 부분을 키워줘야 잘 보인다)
  • 원칙 적용
    • text vs display
      • 작은 폰트에서는, 글자간 간격을 늘려야 된다.
      • 이때 폰트가 차지하지 않는 부분을 negative space라고 하는데, 이 부분에서 둘이 차이를 보인다.
      • text는 작은 폰트 사이즈, display는 큰 폰트 사이즈에서 적용된다.
    • confusable Shapes
      • s,a,e는 크게 보면 구별이 되지만, 작게 보면 구조가 비슷해서 혼동할 수 있다.
      • 따라서 작은 폰트에서는, 각 글자의 특징적인 부분을 좀 더 강조하는 형태를 가지도록한다.
    • 기준점은 20pt
      • 20pt 미만은 text
      • 그 이상은 display
  • tracking & kerning
    • 둘다 글자 사이의 negative space를 조절하는 것
    • tracking은 모든 글자에 전역적으로 적용되는 것이고, kerning은 특정 글자 사이에만 적용되는 것
    • 트래킹 값은 글자 크기마다 다르게 적용되고, 폰트 크기가 작아질수록 작아진다.
  • weight
    • 글자 획이 두껍고 얇은 정도
    • text보다(6가지) display가(9가지) 다양한 weight를 가진다.
      • 이는 weight가 제목 등 큰 글자에서 더 많이 변화하기 때문이다.
    • systemFontSize를 얻을 때, weight를 지정할 수 있도록 했다.
    • Weight의 사용처
      • 계층화와 구분 목적
      • 다른 글자를 유사하게 보이게 만들고 싶을때(similitude)
        • 큰 사이즈에서는 얇은 weight, 작은 글자는 굵은 weight
      • 특색을 주기 위해서(Voice)
    • 다만 가해성(legibility)을 해치지 않는 선에서.
    • iOS에서는 전역 설정에서 Bold Text옵션을 줄 수 있기 때문에 Weight를 신경써야 한다.
      • 너무 두꺼운 weight도 좋지 않고, 너무 얇은 weight도 좋지 않다.
• 타이포그래픽 특성: 폰트에 내장된 기능들
  • 폰트를 다양한 상황에 역동적으로 적용할 수 있게 만들어준다.
    • 복잡한 스크립트와 언어도 작성할 수 있게 해준다.
    • 확장 글리프도 사용할 수 있게 된다.
  • 예시: 분수 표기, 윗첨자(superiors / superscripts), 아랫첨자(inferiors / subscripts), 대문자 형태(숫자나 대문자 사이에),
  • 이 특성은 OS에서 제공하는 폰트 패널에서 끄고 킬 수 있다.
    • 코드로도 제어할 수 있다.

let pointSize: CGFloat = 60.0
let systemFontDesc = UIFont.systemFontOfSize(pointSize,
							weight: UIFontWeightLight).fontDescriptor()

let fractionFontDesc = systemFontDesc.fontDescriptorByAddingAttributes(
	[
		UIFontDescriptorFeatureSettingsAttribute:
		[ 
			UIFontFeatureTypeIdentifierKey: kFractionsType,
			UIFontFeatureSelectorIdentifierKey: kDiagonalFractionsSelector,
		],
	]
)

label.font = UIFont(descriptor: fractionFontDesc, size: pointSize)

• 다른 옵션 예시
  • 가로로 정렬된 콜론(기본으로 enabled)
    • 기존과 다른 6과 9 모양(작은 글자에 대해서 사용)
    • 기본 활성화는 아님
      • UIFontFeatureTypeIdentifierKey: kStylisticAlternativesType
      • UIFontFeatureSelectorIdentifierKey: kStylisticAltOneOnSelector
    • 작은 폰트일 때 이걸 쓰면 좋음
• 숫자
  • 고정 폭(monospaced, tabular)이 기본이지만, 가변 폭(propotional)도 제공
    • 가변 폭은 고정된 라벨에 적용하는게 좋다.(바뀌는 라벨에서는 너비가 왔다갔다 하기 때문에…)
  • 하지만 이번에 가변 폭 숫자가 기본이 된다.
    • 고정 폭 숫자는 따로 설정해줘야 한다.
• 함정
  • private(앞에 .이 붙은 것들)을 사용하지 말라 -> 시스템 폰트가 공개되기 전에 이런식으로 들어가 있었다.
  • 폰트 파일이름을 직접 참조하지 말라. API를 통해서 참조하라(Opaque Object로 다루라)
  • 시스템 폰트를 이름으로 참조하지 말라. 시스템이 처리해주는 것들을 거치지 않게 된다.
  • 폰트 디스크립터를 재사용하라.
  • 작은 포인트에서 쓰던 폰트를 큰 폰트에 대해서 쓰거나 하지 말라.