토스

자체 서체 한 벌(−2% 자간)과 흰 지면, 네이비 알파 헤어라인 — 그리고 5만 픽셀을 스크롤로 편집한 홈.

비바리퍼블리카가 운영하는 종합 금융 앱의 마케팅 사이트입니다. 자체 서체 한 벌로 지면 전체를 끌고 가되, 개편된 페이지에서는 80px 히어로부터 16px 본문까지 모든 크기에 −2% 자간을 균일하게 겁니다 — 같은 서체를 쓰는 토스뱅크·토스페이먼츠가 자간을 전혀 건드리지 않는 것과 정반대입니다. 홈은 문서 높이가 5만 픽셀을 넘고 그 대부분이 스크롤에 반응하는 스토리 블록 일곱 개라, 화면을 나열한 랜딩이 아니라 스크롤로 편집한 한 편에 가깝습니다. 시드에서 가장 큰 국문 디스플레이(80px 명사구 2행)를 갖고 있어, 국문 히어로 크기의 상한선을 볼 때 참고가 됩니다.

https://toss.im

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Toss Product Sans OTF · 400 / 500 / 600 / 700 / 800display·heading·body·ui — 개편 템플릿(홈·회사소개·뉴스룸·뉴스룸 기사·공지)
Toss Product Sans · 400 / 500 / 600 / 700heading·body·ui — 구 템플릿(채용 공고·채용 아티클·토스피드·임팩트·약관)
tossDisplaySans · 700display — 임팩트 전용 영문
Geist Mono · 400mono
Apple SD Gothic Neo · 400fallback — OS 시스템 폰트
Type Scale개편 템플릿(Toss Product Sans OTF)은 120px(−3%)을 제외한 전 단계에 −2%(−0
display-xl120px · 700 · 1
다람쥐 헌 쳇바퀴
display80px · 700 · 1.2
다람쥐 헌 쳇바퀴
h164px · 700 · 1.28
다람쥐 헌 쳇바퀴
h248px · 700 · 1.4
다람쥐 헌 쳇바퀴
h340px · 700 · 1.4
다람쥐 헌 쳇바퀴
h432px · 700 · 1.4
다람쥐 헌 쳇바퀴
subhead24px · 700 · 1.48
다람쥐 헌 쳇바퀴
body-lg18px · 400 · 1.6
다람쥐 헌 쳇바퀴
body16px · 500 · 1.6
다람쥐 헌 쳇바퀴
label15px · 400 · 1.2
다람쥐 헌 쳇바퀴
caption14px · 500 · 1.43
다람쥐 헌 쳇바퀴

국문 · Korean

hangulFontToss Product Sans 계열 63,815글리프(99.8%) — OTF 세대 10,027 / 구 세대 53,788. 나머지 Apple SD Gothic Neo 57 · Geist Mono 49 · .SF NS 7. 선언 1순위(Toss Product Sans / Toss Product Sans OTF / SF Pro Text)와 렌더가 일치
hangulWeights400 45,202(70.7%) · 700 9,068 · 500 6,988 · 600 2,371 · 800 45(OTF XBold). 개편 템플릿은 600(1,816)을 구 템플릿(635)보다 적극 사용
body개편 16/500 lh1.6 ls−0.32 · 18/400 lh1.6 ls−0.36 / 구 17/700 lh1.6(채용 아티클 화자 발화 ×6) · 16/400 lh1.5 / 약관 12/400 lh1.5
sub24/700 lh1.48 ls−0.48 ×7(뉴스룸 히어로 부제 bodyPx 24) · 20/600 lh1.48 ls−0.4 ×2 · 19/400 lh1.6 ×4(채용 아티클 인트로)
label16/500 ls−0.32(개편 nav) · 15/400 lh1.2(구 nav ×8) · 15/600(링크·'공유' ×7) · 14/700 ls−0.8('특별가 이벤트' 칩) · 14/500 lh1.43(푸터 링크 ×8)
mixing한 서체가 한·영·숫자 전부 담당 — 라틴도 Toss Product Sans Bold 3,669·Medium 569글리프. 영문 디스플레이만 별도 층: 'Daily Greatness' 100/120px OTF, 'impact for' 60px tossDisplaySans. 제목 안 혼용('토스의 다음 성장을 만드는 일, Corporate Development Manager', 'Q. 지금 Corporate Development…' 30/700)은 같은 서체로 처리
hangulHeadings있음 — 홈 히어로 '금융부터 일상까지' 80/700 lh1.2 ls−1.6 2행 · 회사소개 '일상의' 80/700 · 56/700 ×3('매일'·'뉴스룸'·'토스가 만들어 온 금융의 기준') · 48/700 ×6('자산을'·'공부할'·'상품 판매와 정산'·'토스의 3,000만 고객이'·'함께'·'토스가 바꾼 일상') · 40/700 ×4('몇 번만 누르면'·'세상의'·'간편송금의 등장'·'돈에 대한 불안이 사라지는…') · 36/700 채용 타이틀. 국문 대형 제목 표본 15개 이상, 전부 명사구 또는 '~죠/~해요' 종결
verdict국문 히어로·대형 제목 레퍼런스로 유효 — 시드 중 가장 큰 국문 디스플레이(80px, 단일 자체 서체, −2% 자간, 명사구 2행). 본문 레퍼런스는 템플릿 세대를 갈라 봐야 한다(개편 −2%/lh1.6 vs 구 0/lh1.5). 뷰어에 Toss Product Sans가 없으므로 미리보기는 Pretendard 대체
renderedToss Product Sans ×54390 · Toss Product Sans Bold ×7980 · Toss Product Sans OTF ×4057 · Toss Product Sans Medium ×3645 · Toss Product Sans OTF Semibold ×2210 · Toss Product Sans OTF Medium ×1814 · Toss Product Sans OTF Bold ×1166 · Toss Product Sans Semibold ×881 · Toss Product Sans OTF XBold ×64
영문 · Latin국문과 동일
latinFontToss Product Sans 25,122글리프(99.8%) · Toss Display Sans 44글리프(0.2%) · Toss Product Sans OTF XBold 4글리프(0.0%) · Zapf Dingbats 3글리프(0.0%)
latinWeights실측 페이스 Bold · Medium · Semibold
share라틴 25,173글리프 / 한글 76,207글리프 — 지면의 24.8%가 라틴이다 (1440 CDP 실측)
scale타입 스케일에서 Toss Product Sans를 쓰는 단: display-xl 120px/700 · display 80px/700 · h1 64px/700 · h2 48px/700 · h3 40px/700 · h4 32px/700 · subhead 24px/700 · body-lg 18px/400 · body 16px/500 · label 15px/400 · caption 14px/500
mixing국영문 혼용 노드 1,132개(전체 2,972개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote라틴 24.8%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict영문 전용 서체 없음 — 라틴 99.8%를 그리는 Toss Product Sans가 한글도 99.9% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean국문과 같은 서체: Toss Product Sans · Toss Product Sans OTF XBold
renderedToss Product Sans ×14579 · Toss Product Sans Bold ×5148 · Toss Product Sans Medium ×2423 · Toss Product Sans OTF Medium ×1011 · Toss Product Sans OTF ×938 · Toss Product Sans OTF Semibold ×425 · Toss Product Sans OTF Bold ×404 · Toss Product Sans Semibold ×194 · Toss Display Sans Bold ×44 · Toss Product Sans OTF XBold ×4 · Zapf Dingbats ×3

Spacing & Shape

Spacing

PurposeValuePreview
Densityspacious
Base unit4px
Max width1376px
Section gap홈은 섹션 간 여백 대신 스크롤 구동 블록(4,500–11,300px)이 연속. 회사소개 블록 padB 240(3회)
Header64px fixed
Content Widths홈·뉴스룸·공지 1376(=1440−32×2) · 회사소개 1224 · 토스피드 1280 · 채용 1048 · 임팩트 1024 · 기사 본문 740(뉴스룸)/700(채용 아티클)/720(약관)
Grid News뉴스룸 3열 카드 315px 행, y1006/1385/1764 (행 피치 379)
Grid Feed토스피드 4열 290px 거터 40 (290×4+40×3=1280), 카드 높이 245/294/491
Grid Company회사소개 계열사 3×3 483px 카드(y3638–4752, 열마다 40–60px 스태거) · Culture 8×1 240×315 · 리더십 3열 551px(y8489/9064/9639)
Grid Home'토스가 바꾼 일상' 6열 238×1031 거터 15 · '세계' 20개 33×45 · finance 리스트 5행 322×54 r16 · 투자 30개 17×11
Grid Jobs채용 공고 278행 764×75 + 우측 220×125 이벤트 5
Card Padding채용 아티클 회색 박스 16/32 · 뉴스룸 기사 단락 24/8 · 회사소개 Culture 항목 24/92
Button Padding'공유' 11×16 r7 · '더 펼쳐보기' 9×12 r10 · '목록으로' 0×18 r136 · 언어 칩 20/28 r999 · '모든 직군' 0×12 r10 · 날짜 칩 16 r4

Border Radius

RoleValuePreview
hairline1px 247회 · span/div — 사실상 0, 렌더링 잔재
small4px 4회 · 날짜 칩 '2024.02.13'
—6px 19회 · span/div 관측만
button-marketing7px 11회 · '공유' 버튼 — OmD 마케팅 CTA r7과 일치
—8px 21회 · div 관측만
chip10px 62회 · '더 펼쳐보기'·'모든 직군'·뉴스룸 태그 칩 51×36
standard12px 296회 · button/option/div 표준
list-row16px 67회 · li/span — 홈 finance 리스트 322×54
—24px 29회 · div
card-large32px 43회 · div/img 대형 카드·앱 화면 이미지
—40px 26회 · div
circle50% 55회 · 아바타·아이콘
card-xl60px 32회 · div 초대형 카드
pill100px 334회 · a 알약 — 홈 투자 설명 칩('정보 격차를 없애…')
pill-button136px 10회 · '목록으로' 버튼
pill-999999px 14회 · 언어 칩 · 임팩트 세 가지 실천 4행 501×80

Guidelines

Do

Don't

Pages

More like this

카카오뱅크
카카오뱅크
같은 도메인 · Fintech · 10 pages
KB금융그룹
KB금융그룹
같은 도메인 · Fintech · 10 pages
뱅크샐러드
뱅크샐러드
같은 도메인 · Fintech · 10 pages
아난티 이터널저니
아난티 이터널저니
Big Korean display · Long scroll · 1 pages