Toss Product Sans

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

경고

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번 협의해서 토스 전용 서체, 토스 프로덕트 산스 첫 버전을 만듦
• 첫 버전은 weight 7개
• 두 번째 버전부터는 폰트 디자인, 기술 스타트업 이도타입과 같이 개발

상세

• 균형, 맥락, 형태 세 가지에 집중

균형

• 보통 본문용 서체는 숫자와 영문을 국문보다 조금 작게 디자인함
  • Pretendard의 아쉬운 점
• 국문과 같은 두께로 맞추면 숫자, 영문이 너무 얇아 보여서 국문보다 조금 더 두껍게 디자인
• 모든 기호가 가운데에 오고 같은 두께로 보일 만큼 균형을 맞춤. 띄어쓰기 간격까지

맥락

• 퍼센트, 쉼표, 더하기, 빼기, 화살표처럼 UI 요소로 쓰이는 기호는 읽기 쉽게 여백을 넓게 줌. 다른 글자와의 균형과 일관성도 고려
• 화살표, 수학 기호는 물론이고 흔히 쓰는 특수문자까지 다시 그림
• 가변폭 숫자와 고정폭 숫자를 둘 다 넣음
  • Font Features

형태

• 일반 서체보다 영문, 숫자, 기호가 커서 글자 속공간을 넓히고 좀 더 둥글고 시원한 인상을 줌. 획이 겹치는 부분은 밖으로 파내서 더 가볍게 보이게 함

기타

• 디자인 플랫폼 팀과 같이 만든 마크다운 규칙으로 특수 문자를 쓸 수 있게 함
• 서체 테스트를 Framer에서 할 수 있다는 것도 큰 장점
• 로딩을 빠르게 하려고 subset 파일도 따로 만듦
• 안드로이드, iOS, 윈도우, 크롬, 사파리 어디서든 제대로 보이도록 vertical metrics를 테스트
• 베트남 문자는 diacritic(발음 구별 기호)이 한글보다 훨씬 높이 붙어서 ascender가 올라가 있음
  • 그래서 상대적으로 한글이 가운데가 아니라 아래로 처져 보이는 문제가 있었음
  • descender를 낮춰 아래 공간을 확보해서 한글이 최대한 가운데 정렬돼 보이게 함. 주로 한글을 쓰는 환경을 생각한 선택
• 반복적 개발