Apple의 전용서체로 배우는 타이포그래피
본 글은 아웃소싱 플랫폼 위시켓의 지원을 받아 작성된 글입니다.
'IT 아웃소싱 플랫폼, 위시켓과 함께 만든 콘텐츠입니다. 위시켓에서 빠르고 안전한 외주를 경험해보세요. '
Apple은 설립 이후 수많은 폰트를 바꿔가며 자사 제품과 마케팅에 사용해오다, 2015년에 전용 서체 SF(San Francisco)체를 발표한 이후, 현재까지 자사 제품, 패키징 그리고 모든 홍보물에 SF체를 적극적으로 활용하고 있습니다.
SF체가 놀라운 점은 애플 내부에서 자체적으로 개발했음에도 불구하고 심미적으로나, 기술적으로 완성도가 매우 뛰어나다는 점인데, 오늘은 WWDC2015에서 애플이 공개한 내용을 바탕으로, 우리가 알지 못하는 어떤 숨겨진 요소들이 타이포그래피를 아름답고 실용적으로 만드는지 분석해볼 예정입니다.
1. San Francisco의 분류
Apple이 자사 폰트를 다양한 용도에 활용하는 만큼, SF(San Francisco)체에는 각 목적을 위한 각기 다른 스타일의 서체 군이 존재합니다. 크게 3개로 분리되는 각각의 서체 군은 아래와 같습니다.
SF Pro: 제품, 패키징, UI 등 전반적인 활용을 위한 디자인
SF Compact: Apple Watch와 같은 소형 디스플레이를 위한 디자인
SF Mono: 코딩과 같이 글자들이 수직으로 나열되어야 하는 특수한 상황을 위한 디자인
이중 SF Pro와 SF Compact를 살펴보면 다시 세 가지로 분류되는데, 아래와 같습니다.
Text: 본문과 같이 가독성이 중요시되는 텍스트 요소를 위한 디자인
Display: 타이틀과 같이 심미성을 최우선으로 하는 단문을 위한 디자인
Round: 키보드 버튼과 같이 일반적인 폰트와 시각적으로 분리되고 심미적 요소가 부각되어야 하는 곳을 위한 디자인
2. SF Pro와 Compact의 차이
SF Pro와 SF Compact를 확대하여 비교해보면 SF Compact는 글자 양옆 사이드의 일부분이 직선으로 처리된 것을 볼 수 있습니다. 이런 디자인은 글자 사이의 공간을 더욱 확보할 수 있게 하여, Apple Watch와 같은 작은 인터페이스에서도 각 글자를 판별하기 쉽게 도와줍니다.
3. 글자들의 기준선
글자들을 조합하는 국문과 달리 영문은 글자들을 일렬로 배치하기 때문에, 글자의 기준이 되는 기준선들의 높이가 글자 디자인에 있어 매우 중요한 요소로 작용합니다. 해당 기준선들은 아래와 같습니다.
Ascender Line: 소문자에서 b, d, h, l 등 소문자 x의 높이 위로 뻗어 나오는 요소(Ascender)들의 기준선
x-height: 소문자 x의 높이
Baseline: 글자들의 베이스가 되는 기준선
Decender Line: 소문자에서 p, q와 같이 Baseline 아래로 뻗어 나오는 요소(Descender)들의 기준선
SF체는 이 중 x-height의 높이가 일반적인 서체들보다 상당히 높은데, x-height가 높아질수록 소문자의 갇힌 공간(counter)의 크기가 커지고 글자의 판독성도 크게 개선되기 때문입니다.
SF Pro Text에서는 Display에서 볼 수 없는 다른 기준선이 하나 더 있는데 바로 대문자의 높이를 기준으로 하는 Cap line입니다. 일반적인 Display 폰트들은 글자들의 시각적 안정감을 위해 Ascender line와 Cap line의 높이를 동일시하는 경우가 많지만, 이 둘의 높이가 다를 경우 텍스트를 읽을 때 대문자와 소문자를 시각적으로 분리하기 쉬워 가독성을 높일 수 있습니다.
4. 시각 보정
1) 오버슛 (Overshoot)
모든 도형은 같은 높이 선상에 배치하였을 때 시각적으로 가지는 부피가 다르기 때문에, 이를 폰트 제작 시에서는 다양한 시각 보정을 통해 해결합니다. 우선 사각형과 원형을 예시로 보겠습니다.
원형의 경우 사각형과 비교에 여백 공간이 많아, 사각형보다 기준선 위아래로 확대되었습니다. 타이포그래피에서는 기준선 밖으로 튀어나온 이 부분을 Overshoot이라고 하며, 우측에 대문자 O을 자세히 보면 역시 이런 Overshoot이 적용된 것을 볼 수 있습니다.
2) 다른 예시
방금 보여드린 Overshoot 외에도 타이포그래피에는 수많은 테크닉이 있는데, 한 예시로 우리가 흔히 해쉬태그라고 부르는 기호를 살펴보겠습니다.
4개의 스트로크로 만들어진 이 기호에는 조그마한 여백 공간이 하나 있습니다. 하지만 이 기호를 축소하여 보면, 여백이 너무 작아 실제보다 더 작아 보이는 일종의 착시 효과를 일으킵니다. 하지만 우측 예시와 같이 내부 공간을 확대하면 작은 텍스트로 사용될 경우에도 글자를 판별하기 쉽게 도와줍니다.
5. Display와 Text의 차이
Display라는 명칭 때문에 Display를 디지털 환경에서 사용되는 폰트, Text를 인쇄물에만 사용되는 경우로 오해하는 경우가 있습니다. 하지만 둘의 차이점은 폰트를 특정 사이즈 이상에서 사용하는가, 혹은 이하로 사용하는가로 구분됩니다. 애플의 SF체는 20pt를 기준으로 그 이상을 Display, 그 이하는 Text를 사용하도록 권장합니다.
그렇다면 Display와 Text가 서로 어떤 차이가 있을까요?
가장 눈에 띄는 첫 번째 차이점은 Text 폰트의 자간이 Display 폰트보다 넓다는 것입니다. 비교적 큰 사이즈로 사용되는 Display 폰트와 달리 본문용 폰트는 글자 사이에 충분한 공간을 확보하여 사용자가 글자를 하나하나 인식하기 쉬워야 하기 때문이죠. 하지만 이 둘이 차이가 단순히 간격의 차이로 끝나는 것은 아닙니다.
위의 이미지는 Display폰트와 Text폰트를 겹쳐 비교한 이미지입니다. Text의 경우 획 사이사이의 여유 공간(aperture)을 좀 더 확보하여 글자가 작은 사이즈에서도 판독성(legibility)를 높인 것을 볼 수 있고, f와 r 같이 글자의 너비가 좁은 폰트들도 획의 길이를 늘여 다른 글자와 혼동될 수 있는 것을 방지하려고 한 것을 확인할 수 있습니다.
6. Tracking과 Kerning
폰트를 사용할 때 글자의 간격을 조정하는 방법에는 Tracking과 Kerning이 있습니다. 둘 다 글자의 간격을 조정한다는 점은 같지만 그 방식이나 기능에는 확실한 차이가 있습니다.
Tracking
Tracking은 글자 사이 공간에 +혹은 -값을 주어 모든 글자의 간격을 일괄적으로 조정하는 기능입니다. 흔히 자간 조정이 필요하다고 할 때 사용하는 기능이 Tracking에 해당하며 Tracking은 문단 전체의 자간을 조정하는데 유용하지만 폰트 자체에서 지정한 글자의 사이드베어링(글자 양옆의 빈 공간) 값을 수정할 수 없기 때문에 처음부터 spacing이 잘된 폰트를 사용하는 것이 매우 중요합니다.
Kerning
Kerning은 Tracking와 달리 특정 두 글자 사이의 공간을 조정하는 행위를 의미합니다. Kerning은 폰트에서 지정한 사이드베어링 값에 추가적으로 공간을 더하거나 서로 다른 글자의 사이드베어링이 겹쳐지도록 할 수 있습니다. Kerning은 특정 글자 사이의 간격을 임의로 조정할 수 있다는 장점이 있지만 편집물처럼 텍스트가 많을 경우, Kerning 필요한 글자들을 하나하나 찾는 일은 사실상 불가능하기 때문에 처음부터 Kerning 세팅이 잘된 폰트를 사용하는 것을 추천합니다.
7. 다른 두께의 폰트 활용 예시
SF체는 하나의 서체 군에 무려 9개의 두께로 폰트를 제공하는데, 일반적인 워드프로세서에서는 보통 두 가지의 두께만 제공하여 이런 다양한 두께의 폰트가 익숙하지 않으신 분들이 계실 겁니다. Apple은 사용자가 여러 두께의 폰트를 아래의 예시와 같이 활용하는 것을 권장합니다.
1) 텍스트 위계 구축
텍스트 그룹에서 강조가 필요하거나 다른 요소와 의미적으로 분리되어야 하는 요소에 다른 두께의 폰트를 사용하면 쉽게 텍스트에 위계를 생성할 수 있습니다.
2) 유사함 생성
폰트를 여러 사이즈를 활용하면 같은 폰트라도 획의 두께 차이가 생겨 하나의 폰트로 보이지 않는 경우가 있습니다. 그러한 경우에는 아래의 예시처럼 다른 두께의 폰트를 사용하여 서로 다른 사이즈의 텍스트 요소에 유사함을 부여할 수 있습니다.
너무 얇은 폰트는 작은 사이즈에서 가독성이 떨어지고, 너무 두꺼운 폰트는 큰 사이즈에서 시각적인 부담감을 줄 수 있기 때문에 상황에 따라 적절한 두께의 폰트를 사용하는 것을 추천합니다.
3) 폰트로 말하기
가독성을 해치지 않는 한에서, 폰트의 두께 자체를 디자인의 스타일로 연출할 수도 있습니다. 아래 이미지에서 좌측과 우측 디자인 모두 같은 콘텐츠와 같은 서체 군에 포함된 폰트들을 사용하고 있지만 폰트의 두께 차이만으로 전혀 다른 분위기를 연출하는 것을 볼 수 있습니다.
구독과 좋아요는 다음 콘텐츠를 만드는 데 큰 힘이 됩니다.
질문과 외주 문의는 언제든 편하게 주세요.✌️
뉴욕을 기반으로 브랜딩, 타이포그래피, UIUX 작업을 하는 그래픽 디자이너 이주명입니다.
2019년 VCU 그래픽 디자인 학사 졸업 후 다양한 디자인 프로젝트를 통해 커리어를 이어나가고 있습니다. 브런치에 제 경험을 바탕으로 디자인 관련 글을 연재하고 있습니다.
외주 및 질문은 jmlee9762@gmail.com로 연락 주세요.
감사합니다.
