Toss Product Sans

• Toss의 글꼴
• San Francisco와 유사
• 폰트 피처를 일부 지원

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

사용 방법

@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)로 구성
• 그리고 두 번째 버전부터는 폰트 디자인 및 기술 스타트업 이도타입과 개발

상세

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

균형

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

맥락

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

형태

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

기타

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