▲

Shantell Sans (2023)

 (shantellsans.com)
1P by GN⁺ | ★ favorite | 댓글 1개
  • Shantell Sans는 Weight, Italic, Informality, Bounce, Spacing 축으로 일상용 글꼴부터 애니메이션용 실험 스타일까지 제공함
  • Shantell Martin의 손글씨와 난독증 경험에서 출발해, 재미있고 장난스럽지만 전문적으로 사용 가능한 접근성을 목표로 삼음
  • Comic Sans의 보편성과 읽기 쉬운 인상을 참고했지만 파생작은 아니며, 펠트팁 마커 손글씨를 디지털 글꼴로 정리함
  • Roboto에 가까운 메트릭, 넓은 글리프 폭과 자간, 구분되는 b·d·p·q와 I·1 설계로 가독성을 높임
  • Google Fonts와 OFL 공개로 무료 배포되며, Latin·Cyrillic 기반 380개 이상 언어와 Google Docs 사용을 지원함

Shantell Sans의 출발점

  • Shantell Sans는 Shantell Martin의 손글씨를 바탕으로 만든 가변 글꼴로, 친근한 일상용 스타일과 애니메이션에 맞는 실험적 스타일을 함께 제공함
  • Shantell Martin은 어릴 때 맞춤법 시험을 통과하지 못해 detention에 앉아야 했지만, 단어를 좋아했고 글과 그림으로 감정을 표현해 왔음
  • 20세 또는 21세에 난독증이 있다는 사실을 알았고, Central Saint Martins에서 예술 학위를 시작하며 많은 창의적인 사람들이 난독증을 갖고 있다고 느꼈음
  • 읽기와 쓰기의 어려움을 발견하지 못한 교사들이 지원 대신 벌을 줬다는 실망이 있었고, 자신의 글씨와 글자를 바탕으로 한 글꼴은 단어와의 관계가 어떻든 사람들이 읽고 쓸 수 있게 하는 방식이 됨
  • 목표는 재미있고 장난스럽지만 전문적이고 사용 가능한 글꼴을 만드는 것이었고, 단어가 그림이며 각자의 방식으로 존재할 수 있음을 떠올리게 하는 접근 가능한 글꼴을 원했음
  • Stephen Nixon은 Latin 알파벳, 숫자, 기호를 손글씨로 쓰기 위한 선이 있는 템플릿을 보냈고, 그 손글씨를 사용해 디지털 글꼴을 만들었음

공개 배포와 초기 사용처

  • 오픈 폰트 라이선스로 Shantell Sans를 공개해 더 많은 사람이 비용 없이 접근할 수 있게 했고, Google Fonts의 라이선스 설명과 같은 공개 배포 방식이 유용성을 높여줌
  • 무료 제공은 Google Fonts와 다른 플랫폼을 통해 널리 사용할 수 있게 만들며, 살아 있는 아티스트가 만든 서체가 다른 아티스트의 타이포그래피 제작을 자극할 수 있음
  • Shantell Sans는 Shantell Martin의 손글씨에 기반해 개인적인 성격이 강하지만, 공개 배포는 본질적으로 자기 것인 요소에 대한 통제를 내려놓는 일이기도 함
  • 어린이와 청년들이 Shantell Sans를 사용하고 제작 배경을 알게 되기를 원하며, 개인 프로젝트와 더 큰 디자인 프로젝트 모두에서 예상하지 못한 방식으로 쓰일 수 있음

  • 초기 적용처

디자인 목표와 Comic Sans의 영향

  • Stephen Nixon은 Shantell Martin이 “사용 가능하고, 시각적으로 보기 좋고, 똑똑하며, 창의적인 서체”를 원한다고 연락했을 때 Shantell의 대형 벽화와 탐색적이고 반즉흥적이며 장난스러운 선 작업을 떠올림
  • “새로운 Comic Sans”를 만들고 싶다는 표현이 핵심 단서였고, Comic Sans의 문화적 보편성과 감정적 반응을 참고하되 직접 파생하거나 새 버전을 만드는 프로젝트는 아니었음
  • Comic Sans는 Vincent Connare가 1994년 Microsoft Bob을 위해 설계했으며, Windows와 Mac 운영체제에 사전 설치되며 널리 쓰임
  • Comic Sans는 Ty Beanie Babies의 5세대 이후 태그부터 Higgs Boson 입자에 관한 2012년 CERN 발표까지 다양한 곳에 사용됨

  • 다섯 가지 기준

    • 일상 사용자에게 어필해야 하며, 타이포그래피 애호가만을 위한 글꼴이 아니어야 했음
    • 다양한 커뮤니케이션에서 쓰기 쉬워야 했음
    • 넓은 범위의 사람들이 사용할 수 있고 접근 가능해야 했음
    • 가독성이 높고 읽기 쉬워야 했음
    • 기존 영역을 반복하는 대신 새로운 것을 해야 했음

라틴 기반 디자인과 제작

  • 일상적 매력

    • 일상적 매력을 위해 Comic Sans처럼 펠트팁 마커 손글씨를 기반으로 삼았고, Shantell Martin의 손글씨가 출발점이 됨
    • 손글씨의 일부 특징은 유지하되 전체 인상은 디지털 형태에 맞게 단순화함

  • 넓은 용도에서 쉬운 사용

    • 현대 글꼴의 일반적인 비례와 스타일 기대에 맞추기 위해 cap-height, x-height, 기본 줄 높이 같은 폰트 메트릭을 Roboto 같은 널리 쓰이는 글꼴에 가깝게 설정함
    • 읽기 쉽게 유지하고 Shantell의 글씨와 시각적 일관성을 맞추기 위해 평균보다 약간 넓은 글리프 폭과 자간을 사용함
    • 웹사이트, 앱, 프레젠테이션 같은 일상적 환경에서 쓰기 쉽고, 큰 크기에서는 개성이 드러나며 작은 본문에서도 작동하도록 만듦

  • 언어 지원과 배포

    • Shantell Sans는 Google Fonts 글리프셋 Latin Plus와 Cyrillic Plus를 따르고 약간 넘어서며, Latin 및 Cyrillic 스크립트를 쓰는 380개 이상 언어를 지원함
    • 지원 범위는 유럽, 아메리카, 중앙아시아의 Latin 및 Cyrillic 기반 언어에 걸쳐 있음
    • Google Fonts 지원과 OFL 라이선스 공개를 통해 무료 사용 가능한 오픈소스 글꼴로 배포할 수 있었음

  • 읽기 쉬운 글자 구분

    • b, d, p, q와 n, u는 단순한 형태 대비와 적절히 배치한 끝획으로 서로 구분되도록 설계함
    • Shantell Martin은 대문자 I와 숫자 1을 직선 하나로 쓰기도 했기 때문에, 대문자 I에는 세리프를 추가하고 1에는 flag를 추가해 구분함
    • 손글씨 기반 글꼴답게 a와 g는 학교에서 아이들이 배우는 single-story 형태를 사용해 친근하고 익숙한 느낌을 유지함

  • 변수 축과 OpenType 기능

    • 좋은 굵기 범위뿐 아니라 현대 타이포그래피 기능을 탐색하려는 디자이너와 개발자를 위해 가변 글꼴로 넓은 스타일 범위를 제공해야 했음
    • Shantell Martin 작업의 자유롭고 유기적인 분위기를 실험적 축으로 끌어들이기 위해 Weight, Italic, Informality, Bounce, Spacing의 다섯 변수 축을 만듦
    • 세밀한 타이포그래피 요구를 위해 tabular vs proportional figures, fractions, localized forms 같은 OpenType 기능도 포함함
    • Inkwell, Cortado, Studio Lettering 같은 손글씨 기반 글꼴의 공예적 세부를 참고해, 자동 추적한 펠트 마커 글꼴 하나를 더 만드는 방식은 피함

형태 결정과 실험적 축

  • Shantell Martin은 중간 굵기의 펠트팁 마커 Staedtler Lumocolor M을 골라 대문자·소문자 pangram, 숫자, 문장부호, 기호, 악센트 문자가 들어간 몇몇 단어를 썼음
  • 스캔본은 펜 획 중심선을 따라 트레이싱한 뒤 Light와 ExtraBold 획으로 확장함
  • 원래 손글씨에는 일반적으로 읽는 글꼴보다 크기와 리듬 변화가 많았기 때문에, 글자 높이·폭·간격을 어느 정도 정규화하고 일관되게 조정함
  • t와 f의 가로획이 주된 세로획 왼쪽으로 나가지 않는 점, A와 R이 왼쪽 위에서 시작되는 점, P가 왼쪽 아래에서 시작하는 단순한 루프인 점, M과 W가 연속된 파동인 점은 유지함
  • 최종 방향은 Shantell의 글씨를 흥미롭게 만드는 약간의 날카로움과 대비를 살리면서 두께를 조금 더 균일하게 하고 부드러운 반원형 끝을 적용하는 쪽이었음
  • 이 균형은 마커 글씨의 감각을 유지하면서도 디지털 형태에서 접근 가능하고 따뜻하게 보이도록 만듦

  • Bounce와 Informality

    • 정규화한 기본 글꼴을 바탕으로 스캔한 손글씨 샘플의 불규칙성을 다시 도입한 추가 스타일을 만듦
    • 불규칙성은 완전한 무작위가 아니라 반복되는 특성을 가졌고, 가로획이 많은 글자는 더 높게, 세로획이 많은 글자는 더 넓고 낮게 보이는 경향이 있었음
    • 글꼴이 너무 혼란스러워져 유용성을 잃지 않도록, 더 많은 개성을 넣으면서도 “글꼴 같은” 상태를 유지하는 균형이 필요했음
    • 손으로 그린 소스와 빌드 가능한 소스를 분리해 최종 글꼴의 Bounce와 Informality 축을 만듦
    • Bounce 스타일은 글리프를 위아래로 이동시키는 스크립트로 생성했고, Informal 스타일은 “정규화된” 메인 소스와 “불규칙한” 메인 소스 사이를 보간해 생성함
    • 모든 소스에는 글자, 숫자, 주요 기호의 여러 대체 글리프가 들어갔고, 최종 글꼴은 이 대체 글리프를 의사난수 방식으로 순환해 에너지 있는 손글씨처럼 보이게 함
    • 가변 축이기 때문에 효과를 미묘한 정도부터 두드러진 정도까지 조절할 수 있고, 글꼴 시스템 안에서 응집된 디자인의 애니메이션 타입을 쉽게 쓸 수 있음

  • Google Fonts와 오픈소스 확장

    • Shantell Martin이 오픈소스 공개에 관심이 있었기 때문에 Google Fonts가 더 넓은 사용자층을 위한 확장 후원을 할 수 있는지 논의함
    • Google Fonts의 지원으로 전체 Italic 스타일 세트를 만들며 스타일 범위를 확장함
    • 소프트웨어가 기본적으로 글자 간격 조정을 지원하지 않을 때 유용할 수 있는 실험적 Spacing 축을 추가함
    • Latin 스크립트는 베트남어 문자와 더 많은 통화 기호로 확장됐고, Cyrillic 추가를 통해 완전히 새로운 언어 집합을 지원하게 됨

Shantell Sans 키릴 문자 디자인

  • Cyrillic은 불가리아어, 세르비아어, 러시아어, 벨라루스어, 우크라이나어, 타타르어, 바시키르어 등 유라시아의 많은 언어에서 쓰이는 문자임
  • Cyrillic 디자인 과정은 Latin 디자인과 비교적 유사하지만, 특정 인물의 손글씨에서 영감을 받은 비전통적 형태에서는 더 어려워질 수 있음
  • 손글씨 서체의 다른 문자를 작업하는 일은 시를 번역하는 일과 비슷하며, 고유한 톤을 유지하면서 대상 언어의 구조를 사용해야 함
  • Cyrillic에는 upright 또는 “printed”, italic, cursive 형태가 있고, 일부 italic 및 cursive 형태는 일반적인 printed 형태와 구조가 다름
  • Shantell Martin의 손글씨는 cursive와 printed 형태가 섞여 있지만 Latin만 쓰기 때문에, 어떤 Cyrillic 글자는 cursive로, 어떤 글자는 printed로 옮길지 결정해야 했음
  • Shantell Martin에게 러시아어 문장 몇 개를 쓰게 해 낯선 형태에 접근하는 방식을 확인했고, 같은 글자에 대해 서로 다른 형태 예시를 주고 몇 단어를 여러 번 쓰게 함
  • Cyrillic 타입 디자이너 Maria Doreuli, Krista Radoeva, Alexei Vanyashin와 상의했고, 맞고 틀린 형태에 대한 감각은 대부분 일치함
  • 불가리아어와 세르비아어에는 기본 Cyrillic과 다른 관습적 형태가 있으며, 예를 들어 불가리아어 t는 보통 Latin m과 같은 형태라 이 스타일에서는 Cyrillic m과 혼동될 수 있어 조정이 필요했음
  • 세르비아어 nje 같은 글자는 대문자와 소문자가 모두 네이티브 독자에게 자연스럽게 보여야 했고, 세르비아어를 위해 Jovana Jocić와도 상의함
  • Cyrillic 작업은 많은 디자인 난제를 포함했지만, Latin뿐 아니라 다양한 Cyrillic 언어의 조판에서도 유용하게 쓰이기를 기대함

사용 방법과 참고 링크

  • Shantell Sans on Google Fonts: Google Fonts에서 사용 가능
  • open-source repo: 최신 버전 다운로드
  • Google Docs, Slides 및 다른 Workspace 제품에서도 사용할 수 있음

  • Google Workspace에서 추가하기

    • 문서에서 글꼴 메뉴를 열고 “More Fonts”를 클릭함
    • 열린 팝업 패널에서 “Shantell Sans”를 검색함
    • 글꼴 패밀리를 클릭해 글꼴 메뉴에 추가함
    • Google Material Design Blog: 간소화된 버전 있음

함께 보면 좋은 글 β

▲
GN⁺   [-]
Hacker News 의견들

  • 글 중간쯤의 다국어 샘플을 보다가 이 글꼴의 키릴 문자 글리프가 훌륭하다는 걸 발견함
    새 글꼴을 써보면 보통 키릴 문자는 라틴 문자만큼 좋지 않은 경우가 많았고, 예외는 ParaType 같은 키릴 문자권 파운드리의 글꼴 정도였음
    글의 마지막 3분의 1에서 이걸 어떻게 달성했는지 자세히 다룸
    https://www.paratype.com/fonts/pt/yefimov-sans?tab=gallery

  • 글에 링크된 Google Fonts 페이지에서 만져볼 수 있는 격식 슬라이더는 최근 본 가변 글꼴 축 활용 중 진짜 멋진 사례임
    Metafont가 느리고 꾸준하게 재평가받는 장면을 보는 느낌임
    https://fonts.google.com/specimen/Shantell+Sans

    • Typotheque의 Dash에도 거의 비슷한 가변 축이 있고, 거기서는 ‘Speed’라고 부름: https://www.typotheque.com/fonts/dash-casual
      어째서인지 전체 가변 범위를 보려면 ‘Variable’ 상자를 클릭해야 함
    • 그게 제일 멋짐. 게다가 “bounce” 슬라이더까지 있음
      이런 시대에 살고 있다니… 이런 특수 조정이 있는 글꼴이 더 있는지 궁금함
      진짜 무작위성을 가진 손글씨 글꼴을 가능하게 해줄 기술을 아직 기다리는 중임
    • Metafont를 잘 모르는데, 이걸 말한 건가요? https://ctan.org/pkg/metafont?lang=en
    • 잠깐, 더 비격식적으로 만들면 같은 문장 안에서도 같은 문자의 개별 글리프가 서로 달라질 수 있다는 뜻인가?

  • 글꼴은 훌륭함. 다만 기술적으로 한 단계 더 나아간 가변 글리프가 아쉬움
    손글씨를 읽는 느낌은 글자가 항상 같은 모양이면 사라짐
    각 글자마다 작은 변형을 5~6개 넣고 무작위로 번갈아 쓰게 할 수 있다면 정말 멋질 것 같음

  • 이런 글꼴을 이제야 처음 봤다는 게 놀라움. Comic Sans 계열 글꼴을 꽤 많이 다뤄봤는데, 이건 지금까지 본 것 중 단연 가장 아름다운 글꼴임

  • Comic Sans와의 유사성이 너무 명확해서 글에서 제일 먼저 Ctrl-F로 “comic”을 검색했음
    첫 생각은 이 개념을 얼마나 더 밀고 나갔을까였음
    글 안에서 Comic Sans 언급이 분포한 방식도 흥미로운데, 30% 지점쯤에서 명백한 계보를 인정하듯 여러 번 나오고 이후에는 거의 나오지 않음
    이 글꼴은 실제로 더 멀리 나아갔고, 아름다움

  • 이 글꼴의 고정폭 버전을 원하면 이상한 걸까? 정말 멋지고 설계도 잘된 것 같음

  • 난독증이 있는 딸이 크게 만족해했음. 예시에서는 확실히 Roboto보다 이 글꼴을 더 선호함

    • 난 난독증은 아니지만, Roboto 예시에서도 가독성 차이가 매우 뚜렷하게 느껴졌음
      그 지점까지 Shantell Sans에 익숙해진 뒤라 Roboto는 거의 읽기 힘들게 느껴졌음

  • 와, 너무 못생겨서 얼마나 못생겼는지 설명하기도 어려울 정도임

  • 처음 봤는데 벌써 내가 가장 좋아하는 손글씨 글꼴이 됨. 훌륭한 작업임

  • 인간-컴퓨터 공학이 만든 아름다운 예술 작품 같음
    Comic Sans가 약간 조롱처럼 보일 수 있는 맥락에서도 충분히 쓸 수 있음

답변달기