글꼴 스택은 브라우저가 서체 선호도 및 기본 대체용 글꼴을 알 수 있도록 하는 글꼴 및 글꼴 키워드의 목록입니다. 예를 들어 글꼴 스택이 “Helvetica Neue, Arial, sans-serif”인 경우에는 가장 선호하는 글꼴이 Helvetica Neue(사용 가능한 경우)이며, 그 다음으로는 Arial(대부분의 컴퓨터에 있음)을 선호하고, 마지막으로 일반적인 sans-serif 글꼴(다소 모호하지만 실수로 Times New Roman과 같은 serif 글꼴을 사용하지 않도록 보장함)을 선호한다는 것을 알 수 있습니다.
Zendesk는 이제 시스템 글꼴 스택을 통해 사용자의 운영 체제를 인식하고 해당 인터페이스에서 본래 사용하는 글꼴을 적용시킬 수 있습니다. 운영 체제는 자체 글꼴에 최적화되어 있기 때문에 로드 속도가 빠르며, 더 익숙하고 좋아 보이며, 깔끔하게 나타나고, 전체 문자가 잘 지원되는 경향이 있습니다. 이전에는 Zendesk에서 Proxima Nova를 기본 글꼴로 사용했습니다.
Zendesk의 시스템 글꼴 스택은 다음과 같습니다.
body
{font: system-ui, -apple-system,
BlinkMacSystemFont, “Segoe UI”,
Roboto, Oxygen-Sans, Ubuntu, Cantarell,
“Helvetica Neue”, Arial, sans-serif; }
이 스택은 전체 Support 제품에 반영됩니다.
운영 체제 및 브라우저 세부 사항
Windows
IE 및 Edge를 포함하여 Windows OS에 있는 대부분의 브라우저는 시스템 글꼴을 사용하도록 하는 키워드를 지원하지 않지만, 시스템 글꼴에 대응할 수 있도록 글꼴 스택에 “Segoe UI” 글꼴을 포함시켰습니다.
MacOs
Apple에는 “-apple-system”이라는 새 글꼴 키워드를 제공하여 시스템 글꼴을 적용시킬 수 있습니다. 현재는 San Francisco 글꼴입니다. Apple은 이전에 시스템 글꼴을 변경한 적이 있으며, 향후에도 그럴 가능성이 있습니다. 그러한 일이 발생할 경우, 최신 운영 체제를 사용하는 사람들은 글꼴 키워드를 사용하는 웹사이트에서 변경된 시스템 글꼴을 보게 됩니다. 구식 시스템을 사용하는 사람들은 여전히 San Francisco 글꼴을 보게 됩니다.
기타
Chrome은 이제 “system-ui”라는 글꼴 키워드를 지원하여 모든 운영 체제(Windows, Mac 및 Linux 포함)의 시스템 글꼴을 적용시킬 수 있습니다. 조만간 더 많은 브라우저에서 이러한 키워드를 추가하게 될 것입니다. 그때가지 도움이 될 수 있도록 일부 Linux 특화 글꼴들을 저희 스택에 포함시켰습니다.
왜 시스템 글꼴인가?
시스템 글꼴은 커닝 및 가독성 측면에서 비-시스템 글꼴보다 우수합니다. 자세한 내용은 아래의 섹션을 참조하세요.
커닝
Windows OS 및 Mac OS용 시스템 글꼴은 모두 기본적으로 커닝이 지원되는 글꼴을 사용합니다. 커닝(Kerning)은 글자 선의 굵기에 따라 읽기 좋게 글자 사이의 간격을 조절합니다. Proxima Nova와 같은 일부 웹 글꼴의 경우 커닝 설정의 사용 및 수정이 필요했습니다.
Proxima Nova:
시스템 글꼴 스택:
가독성
일반적으로 시스템 글꼴은 현재 Proxima Nova 글꼴보다 선이 굵은 편입니다. 그래서 읽기 더 용이하고 텍스트와 배경의 대비가 더 뚜렷합니다. 글꼴이 좀 더 크지만 컨테이너 크기가 변경되지 않았으므로 화면에서 보이는 정보의 양에는 영향을 미치지 않습니다. 양옆에서 티켓 특성 필드를 비교한 모습을 한번 확인해 보세요.
