토스페이먼츠
자간을 건드리지 않는 토스 서체 — 48px 국문 제목, 2px씩 커지는 버튼 계단, 그림자 0인 흰 지면 위 네이비 제목 밴드.
토스 계열의 결제 인프라를 파는 B2B 사이트입니다. 히어로가 중앙 정렬 대형 제목이 아니라 좌측 48px 국문 제목 + 우측 결제 화면 목업의 좌우 분할이고, 하위 페이지는 네이비색 제목 밴드로 엽니다. 제목 최대가 56px·실질 표준이 48px로 토스 홈의 80px보다 한참 작고 자간은 여기서도 0이며, 그림자가 사실상 없고 모션 예산도 토스 홈의 4분의 1이 안 될 만큼 조용합니다. 버튼은 글자가 2px 커질 때마다 안쪽 여백과 라운드가 2px씩 따라 커지는 3단 계단으로 묶여 있어, B2B 컴포넌트의 치수 규칙 참고로 좋습니다.
https://www.tosspayments.comColor Palette
Primary
Label
Fill
Background
Static
Accent
Typography
Toss Product Sans · 400body·ui — 선언 1순위이자 400 웨이트의 실제 파일
Toss Product Sans Medium · 500본문 강조·헤더 nav 라벨 (선언 weight 500)
Toss Product Sans Bold · 700 / 500 / 400display·heading (선언 weight 700) + 선언 400·500에서도 등장
Toss Product Sans Semibold · 600버튼·링크 라벨 (선언 weight 600)
Toss Product Sans Light · 300300 — 표본 최소
Toss Face Font Web · 400 / 500 / 700이모지·픽토그램 — 폴백 1순위 Tossface
Type Scaleraw 25개 스타일 전부 letter-spacing 선언이 없다(spacing null ×25)
display56px · 700 · 1.3
다람쥐 헌 쳇바퀴
h148px · 700 · 1.3
다람쥐 헌 쳇바퀴
h236px · 700 · 1.3
다람쥐 헌 쳇바퀴
h332px · 700 · 1.3
다람쥐 헌 쳇바퀴
body-lg20px · 700 · 1.6
다람쥐 헌 쳇바퀴
body17px · 400 · 1.6
다람쥐 헌 쳇바퀴
ui16px · 400 · 1.5
다람쥐 헌 쳇바퀴
ui-sm15px · 600 · 1.47
다람쥐 헌 쳇바퀴
label14px · 500 · 1.43
다람쥐 헌 쳇바퀴
caption12px · 700 · 1.5
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Toss Product Sans 계열 5벌이 한글 21,514글리프(99.94%)를 그린다 — Regular 11,111(51.6%) · Medium 4,840(22.5%) · Bold 4,149(19.3%) · Semibold 1,345(6.2%) · Light 69(0.3%). 나머지 12글리프는 이모지 서체 Toss Face Font Web. OS 폴백(Apple SD Gothic Neo 등) 0글리프. 선언 1순위는 'Toss Product Sans' 하나이고 폴백 스택은 19개(Tossface, SF Pro KR, SF Pro Display, -apple-system, Basier Square, Apple SD Gothic Neo, Noto Sans KR …)지만 실제로는 웨이트별 정적 파일로 갈라져 렌더된다(variableFonts false, self-hosted woff2 14개) |
| hangulWeights | 400 11,602(Regular 11,111 + Bold 491) · 500 4,850(Medium 4,840 + Bold 10) · 700 3,654(Bold 3,648 + Tossface 6) · 600 1,345 · 300 69. 선언 400에서 Bold가 491글리프, 선언 500에서 Bold가 10글리프를 그리는 선언-실제 불일치가 501글리프 있다 |
| body | 17/400 lh1.60(블로그 기사 본문, 폭 700px) · 20/400~700 lh1.60(섹션 리드) · 16/400 lh1.50(ui) · 15/500 lh1.60. 전부 자간 선언 없음 |
| sub | 20/700 lh1.60 ×9(섹션 부제·요금표 셀) · 19/600 lh1.58 ×1(블로그 요약 박스 '10분만 시간 내면') · 17/700 lh1.60 ×1 |
| label | 14/500 lh1.43(헤더 nav 18개 라벨) · 14/600 lh1.43 ×11(링크) · 15/600 lh1.47 ×19(버튼) · 12/700 lh1.50(퀵오픈 유의사항 본문) |
| mixing | 한 서체 계열이 한글·라틴·숫자를 전부 담당한다(라틴 617글리프도 Bold 454 · Regular 91 · Medium 40 · Semibold 23으로 같은 계열). 영문 전용 디스플레이 층이 없다 — 사이트 최대 제목 56px도 국문이다. 영문은 'H.point페이'·'PG 수수료'·'ISO 14001 인증'처럼 국문 제목 안에 섞여 같은 서체·같은 자간(0)으로 처리된다 |
| hangulHeadings | 있음 — 56/700 ×6(회사소개 h1 '함께하는모든 가맹점이더 빛나야 합니다' + h2 3개 '토스의 노하우, 아낌없이 활용합니다'·'PG업계 최초환경경영 시스템ISO 14001 인증'·'결제 산업의 미래,토스페이먼츠가만들어 갑니다' + span 1, 페이팔 소개서 폼 제목 '해외결제 (페이팔) 소개서') · 56/600 ×1(블로그 기사 h1) · 48/700 ×19(홈 6 '쉽고 빠른 PG 연동토스페이먼츠' 외 · 퀵오픈 5 · 브랜드페이 5 · FAQ 1 · 요금 1 · 서비스 1) · 48/600 ×1 · 36/700 ×9 · 32/700 ×4. 전부 lh1.30, letter-spacing 선언 0. 제목은 명사구('쉽고 빠른 PG 연동')와 해요체 서술('신청하면 바로 결제할 수 있어요')이 섞이고 2~3행 줄바꿈이 기본 |
| verdict | 국문 히어로·대형 제목 레퍼런스로 유효하되, 이 사이트의 값은 크기가 아니라 '자간 0'이다. 최대 56px·표준 48px로 toss.im 홈 히어로 80px보다 24~32px 작고, 히어로도 중앙 정렬이 아니라 좌측 제목 + 우측 UI 목업 분할(홈)이거나 전폭 사진 아래 제목(회사소개)이다. 자간을 만지지 않는 국문 조판 표본으로 쓰고, 음수 자간 규칙이 필요하면 toss(−2% 전 단계)나 이모션글로벌(−5%)을 볼 것. 뷰어에 Toss Product Sans가 없으므로 타입 스케일 미리보기는 Pretendard 대체 표시 |
| rendered | Toss Product Sans ×13834 · Toss Product Sans Medium ×6325 · Toss Product Sans Bold ×4641 · Toss Product Sans Semibold ×1752 · Toss Product Sans Light ×104 |
영문 · Latin국문과 동일
| latinFont | Toss Product Sans 10,364글리프(99.8%) · Toss Face Font 21글리프(0.2%) |
| latinWeights | 실측 페이스 Medium · Bold · Semibold · Light |
| share | 라틴 10,385글리프 / 한글 26,656글리프 — 지면의 28.0%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Toss Product Sans를 쓰는 단: display 56px/700 · h1 48px/700 · h2 36px/700 · h3 32px/700 · body-lg 20px/700 · body 17px/400 · ui 16px/400 · ui-sm 15px/600 · label 14px/500 · caption 12px/700 |
| mixing | 국영문 혼용 노드 745개(전체 1,815개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 28.0%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 99.8%를 그리는 Toss Product Sans가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Toss Product Sans |
| rendered | Toss Product Sans ×4996 · Toss Product Sans Medium ×2535 · Toss Product Sans Bold ×2338 · Toss Product Sans Semibold ×478 · Toss Face Font Web ×21 · Toss Product Sans Light ×17 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 8px | |
| Max width | 1120px | |
| Section gap | 섹션 대부분이 padding 0이고 높이로 리듬을 만든다(회사소개 740 ×4 | |
| Header | 60px fixed | |
| Content Widths | 홈·퀵오픈·브랜드페이 1120 · 회사소개 1140 · FAQ 1196 · 요금·서비스·공지 932 · 페이팔 폼 960 · 블로그 기사 700. 홈 후보값은 1120×48 · 932×4 · 1196×2 · 664×1로 1120이 압도적 | |
| Grid Home | 서비스 타일 10개 190×68 r20 bg#fff, 4열 gap 16 (190×4+16×3=808) · 가맹점 3열 381×300 6개(381×3=1143) · 성공 스토리 3열 381×408 3개 · 가입 절차 4열 218×74 gap 32 · 요금 행 4개 1144×40 · 마감 CTA 전폭 행 5개 1440×230 | |
| Grid Services | 서비스 카드 2열 512×86(6개)·512×114(4개·10개), gap 24 (512×2+24=1048, 콘텐츠 932보다 넓은 값 — 카드가 좌우로 넘친다) | |
| Grid Editorial | 블로그 연관 콘텐츠 3열 323×328 gap 40 (323×3+40×2=1049) · 본문 인라인 링크 행 148×21·161×21·196×21 | |
| Card Padding | FAQ 아코디언 행 1120×128 r16(퀵오픈 6행) · 1120×48 r16(브랜드페이 5행) · 1144×40(홈 4행) · 요금표 행 1049×81(9행) · 공지 표 행 1049×27(27행) · 폼 필드 304×40(6개) | |
| Button Padding | 9×12 r10 (15/600) · 11×14 r12 (17/600) · 13×16 r14 (19/600) · 18×20 r20 (16/400 결제수단 칩). 글자 +2px마다 패딩 +2/+2 · 라운드 +2가 함께 올라간다 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| small | 6px | 5회 · 소형 인라인 요소(span·div) |
| list | 8px | 83회 · 리스트 항목·보조 버튼 |
| button | 10px | 158회 · 표준 버튼 — 15/600 pad 9×12 3종 전부(최다 라운드) |
| button-md | 12px | 4회 · 중간 버튼 — 17/600 pad 11×14 |
| button-lg | 14px | 1회 · 큰 버튼 — 19/600 pad 13×16 ('아티클 더보기 〉') |
| card | 16px | null회 · FAQ 아코디언 카드 — 퀵오픈 1120×128, 브랜드페이 1120×48 (layout 실측, raw 미검출) |
| tile | 20px | 48회 · 홈 서비스 타일 190×68 흰 카드 10개, 결제수단 칩(pad 18×20) |
| image | 32px | 25회 · 이미지 모서리 |
| — | 40px | 1회 · 관측만 |
| circle | 50% | 3회 · SNS 아이콘 버튼(카카오톡·네이버 블로그) |
| pill | 100px | 4회 · 알약 — div 4회 |
| pill-max | 999px | 1회 · 알약 최대치 1회 |
Guidelines
Do
- 국문 제목에 자간을 주지 않는다. 56/700 lh1.30 · 48/700 lh1.30 · 36/700 · 32/700 전부 letter-spacing 선언 0 — raw 25개 스타일 중 자간이 붙은 것이 하나도 없다
- 버튼은 세 단으로만 만든다: 15/600 pad 9×12 r10 · 17/600 pad 11×14 r12 · 19/600 pad 13×16 r14. 글자·패딩·라운드를 2px씩 함께 올린다
- 주 CTA와 보조 CTA를 색 쌍으로 붙인다 — bg #3182F6 + 흰 글자 / bg rgba(26,122,249,0.09) + #2272EB 글자. 보조 CTA에 테두리를 그리지 않는다(border 선언 0건)
- 하위 페이지는 460px #1C4989 제목 밴드(48/700 흰 글자 중앙 + CTA 1)로 연다. 홈·제품 랜딩만 좌우 분할 히어로를 쓴다
- 본문 행간은 1.6, 제목 행간은 1.3으로 고정한다. 이 두 값 밖으로 나가는 것은 ui 계열(1.43~1.53)뿐
- 섹션 여백을 padding으로 채우지 말고 높이로 만든다 — 회사소개 740 ×4, 안내 블록 697, 제목 밴드 460처럼 반복 높이가 리듬이다. padding 160/160은 마감 CTA 두 곳에만
- 지면 전환은 흰색 → #F2F4F7 → #F6F7F9 → #1C1F25 네 단으로만. 다크 지면을 쓰면 헤더도 #17171C로 함께 뒤집는다
- 모션은 0.15s ease를 기본으로 하고 최대 0.2s까지만. 전환 대상은 color·background-color·box-shadow 세 가지
Don't
- 그림자로 띄우지 않는다 — 관측 그림자 2종 중 37회가 투명 인셋 링(rgba(0,0,0,0) 0 0 0 1px)이고 실제 그림자는 confidence low 1회뿐. borders.combinations도 0건이라 카드는 면 색으로만 구분된다
- #007BFF를 링크색으로 재현하지 않는다 — 3.98:1로 AA 미달 쌍이 18개다. Bootstrap 기본값이 남은 것이지 브랜드 값이 아니다(hover #0056B3도 마찬가지)
- #727780을 작은 본문에 쓰지 않는다 — 4.5:1로 AA 경계선에 정확히 걸려 있어 12~14px에서 위험하다(팔레트 최다 뉴트럴 358회)
- toss.im의 −2% 자간 규칙을 이 사이트에 옮겨 붙이지 않는다. 같은 서체·같은 그룹이지만 조판 규칙이 반대다
- 알약(pill) 버튼을 기본형으로 쓰지 않는다 — 100px 4회 · 999px 1회로 5회뿐이고, 표준은 r10 158회다
- 80px급 국문 디스플레이를 기대하지 않는다 — 이 사이트 최대는 56px이고 실질 표준은 48px(19회)이다
- 커스텀 이징·keyframe 애니메이션을 넣지 않는다(easings는 ease 104회 단일, animations 0건)
- 콘텐츠 폭을 하나로 통일해 재현하지 않는다 — 페이지 유형마다 1196·1140·1120·960·932·700으로 다르게 잡혀 있다
