로고조성현

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를 사용하도록 하자.

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

개요

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

상세

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

균형

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

맥락

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

형태

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

기타

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

Mutex

Previous Page

Apple Pay

Next Page