애플의 신 글꼴, 샌프란시스코의 비밀

출처 : http://www.albireo.net/threads/45301/

iOS 9이 일반 공개 되었다. 

사소한 변화이지만 iOS 9의 시스템 글꼴이 애플의 신 글꼴인 샌프란시스코(San Francisco)로 바뀌고, 

이전의 헬베티카 노이에(Heveltica Neue))를 대체했다. 

헬베티카 - 이전

샌프란시스코 - IOS9



샌프란시스코 글꼴은 애플 와치에서 이미 사용되고 있다. 

이제 샌프란시스코는 애플 플랫폼을 통합하는 표준 글꼴로 애플 와치, 아이폰, 아이패드, 맥에서 사용될 것이다.

애플 와치

애플은 첫번째 아이폰부터 iOS의 시스템 글꼴로 헬베티카를 사용해왔다. 그리고 맥 OS X 10.10 요세미티부터는 루시다 그란데(Lucida Grande)에서 헬베티카로 글꼴을 전환했다. 왜 애플은 헬베티카를 던져버리기로 결정했을까? 세계에서 가장 유명하고 가장 사랑받는 글꼴인데 말이다.

헬베티카는 크기가 작을 때 약점이 드러난다.

헬베티카는 작은 크기의 텍스트에 적합하지 않다고 한다. 맥 OS X 요세미티의 시스템 글꼴을 헬베티카로 바꾸었을 때, 많은 디자이너들이 헬베티카는 적합하지 않다고 주장했다.

"헬베티카는 구리다" by Erik Spiekermann

작은 크기의 텍스트를 타이핑해보면 헬베티카의 판독성(legibility)이 낮다는 것을 알 수 있다. 

크기가 작아지면 텍스트가 흐릿해진다(blur). 

일부는 섞여 버리고 해독하기 어려워진다. 애플 와치에서 작아진 크기의 텍스트 판독성을 높이기 위해 

샌프란시스코 글꼴을 애플이 개발했다고 알려져 있다.

크기가 작은 텍스트는 섞여 보인다

오늘날의 스마트 기기의 해상도는 종이 인쇄보다 높다. 

그리고 아이폰의 텍스트가 항상 애플 와치만큼 작은 것도 아니다. 

왜 애플은 애플 와치만 아니라 iOS와 맥 OS X의 시스템 글꼴을 바꾸었을까?

샌프란시스코는 단일한 글꼴이 아니다.

샌프란시스코 글꼴은 판독성을 높이기 위해 여러 기능을 담고 있다. 

사실 애플 와치용 샌프란시스코와 iOS/맥용 샌프란시스코는 같지 않다.

iOS/맥용 글꼴 계열은(font family) "SF"이고, 애플 와치용은 "SF Compact"이다. 

'o'나 'e'의 둥근 글자를 보면 차이를 확인할 수 있다. SF Compact가 SF보다 수직선이 더 납작하다.

SF와 SF Compact



이런 차이로 인해 SF Compact는 글자 간의 간격을 더 줄 수 있다. 

그렇기 때문에 애플 와치와 같은 작은 기기에서의 판독성이 높아진다. 

이와 더불어 SF와 SF Compact 글꼴은 두 개의 하위 글꼴 계열로 나누어진다. 

"텍스트(Text)"와 "디스플레이(Display)"다. 

애플은 이를 "시각적 크기(Optical Sizes)"로 부른다.

 텍스트 글꼴은 작은 크기의 텍스트를 위한 것이고, 디스플레이 글꼴은 큰 크기의 텍스트를 위한 것이다.

샌프란시스코 계열



내가 앞에서 언급한 대로, 헬베티카 같은 그로테스크(또는 산 세리프)를 사용하면 크기가 작을 때 

인접한 두 글자가 "섞여버리고", 'a', 'e', 's'가 비슷하게 보인다. 

디스플레이와 텍스트 글꼴



샌프란시스코 텍스트 글꼴은 크기가 작은 텍스트에 사용되는데, 디스플레이 글꼴보다 더 많은 간격을 두도록 설계되었다. 

그리고 작은 크기에서 판독되도록 텍스트 글꼴의 구경(aperture)도 더 넓어졌다.

샌프란시스코 글꼴은 동적 글꼴이다

샌프란시스코의 뛰어난 기능 중 하나는 서체를 동적 최적화 시키는 방식이다. 

글꼴 크기에 따라 디스플레이 또는 텍스트 글꼴로 시스템에서 자동으로 전환시킨다. 

정확히 말하면 20포인트(20pt)가 경계이다. 

디자이너나 엔지니어는 어떤 폰트를 사용할지 신경쓰지 않아도 된다. 

예제에 따라 시스템 글꼴을 UILabel에 맞춰주면 된다. 

그러면 시스템이 적절한 서체를 제공할 것이다. 

내가 샌프란시스코 글꼴에서 인상깊었던 것은 콜론(:)이 표현되는 방식이다. 

기본적으로 콜론은 베이스라인 바로 위에 위치한다. 따라서 숫자 사이에 입력하게 되면 수직이지만 가운데에 있지 않게 된다. 

그런데 샌프란시스코 폰트는 자동으로 수직이면서 가운데에 위치시킨다

수직이면서 가운데인 콜론

샌프란시스코는 디지털 시대의 글꼴이다

여러분이 보시다시피 샌프란시스코 글꼴은 아무 기기에서나 어떤 텍스트 크기에서도 읽기 쉽도록 세심하게 디자인되었다. 

샌프란시스코 글꼴이 대체한 헬베티카는 1957년 스위스에서 만들어졌다. 

그때에는 디지털 기기가 없었다. 

헬베티카는 지금까지도 많은 기업에서 기업 서체로 널리 사용되고 있다. 

훌륭한 고전 글꼴로서 미래에도 사용될 것이라는 데 의심의 여지가 없다. 

반면에, 샌프란시스코는 현대적인 글꼴이다. 

이것은 맥락에 따라 서체를 동적으로 변화시킨다. 

디지털 시대의 "디지털 태생(Digital Native)" 글꼴의 하나이다.