Skip to main content

Toss Product Sans

caution

Toss 팀에서 가급적 사용하지 말아달라고 하셨다. 2021년 중반에 말씀하시길:

"외부에 공개할 계획은 없습니다. 토스 서체에 대한 자세한 소개는 8월 말에 진행되는 디자인 컨퍼런스에서 공개될 예정이고, 추후에 브랜드 서체를 제작하게 된다면 오픈소스로 개발할 여지도 있다고 하시네요"

하지만 그럼에도 오픈 웹에서 사용할 수 있는데, 다음과 같이 사용할 수 있다.

사용 방법​

@import url('https://static.toss.im/tps/main.css');
@import url('https://static.toss.im/tps/others.css');

* {
  font-family: 'Toss Product Sans';
}

비슷한 느낌의 오픈서체를 원한다면 Pretendard를 사용하도록 하자.

6F64BE.png

E0A8DC.png

BFDBF9.png

서체 고민 없이 본질에만 집중할 수 있도록​

개요​

  • 환경마다 다른 서체를 쓰면서 비효율적인 상황 발생
  • 가독성과 사용성이 가장 뛰어난 토스만의 본문용 서체가 필요
  • 2020년 여름 산돌과 함께 서체 프로젝트를 시작
  • 7개월 간 14번의 협의 과정을 거쳐 토스 전용 서체, 토스 프로덕트 산스 첫 번째 버전을 개발
  • 첫 번째 버전은 7개의 굵기(weight)로 구성
  • 그리고 두 번째 버전부터는 폰트 디자인 및 기술 스타트업 이도타입과 개발

상세​

  • 세 가지에 집중: 균형, 맥락, 그리고 형태

균형​

  • 일반적으로 본문용 서체의 숫자와 영문은 국문보다 조금 더 작은 크기로 디자인.
  • 국문과 동일한 두께로 맞추면 숫자, 영문이 너무 얇아 보여 숫자와 영문을 국문보다 조금 더 두껍게 디자인
  • 모든 기호들이 중앙에, 같은 두께라고 인지될 수 있는 수준으로 균형을 맞춤. 띄어쓰기 간격까지

맥락​

  • 퍼센트, 쉼표, 더하기, 빼기, 화살표 등 UI 요소로 활용되는 기호들의 가독성을 높여, 넓은 여백으로 디자인했죠. 또한 다른 글자와의 균형과 일관성을 고려.
  • 모든 화살표, 수학 기호뿐만 아니라 일반적으로 활용하는 특수문자까지 재해석
  • 프로덕트 산스는 가변폭과 고정폭 숫자를 마련

형태​

  • 일반 서체에 비해 영문, 숫자, 기호가 크다 보니 글자들의 속공간을 넓히면서 좀 더 둥글고 시원한 인상을 줌. 획이 중첩되는 부분은 밖으로 파내서 좀 더 가벼운 인상을 주었고요.

기타​

  • 디자인 플랫폼 팀과 함께 제작한 마크다운 규칙으로 특수 문자를 쓸 수 있도록
  • 특히 서체 테스트를 프레이머(Framer)에서 할 수 있다는 것도 큰 장점
  • 더 빠른 로딩을 위해 서브셋(subset) 파일도 별도로 제작
  • 안드로이드, iOS, 윈도우, 크롬, 사파리 등 다양한 환경에서 원활하게 작동할 수 있도록 최적화된 버티컬 메트릭스를 테스트
  • 베트남 문자의 구조상 발음 구별 기호(diacritic) 위치가 한글에 비해 많이 높아 글자의 어센더(ascender)가 올라가 있음.
    • 상대적으로 한글이 중앙에 정렬되지 않고 아래로 쳐져 보이는 문제.
    • 디센더(descender)를 낮춰 아래 공간을 확보함으로써 한글이 최대한 시각적으로 중앙 정렬되어 되어 보이도록 했습니다. 주로 한글을 사용하는 환경을 고려한 선택이었죠.
  • 반복적 개발

Links to This Note