Typography
글꼴은 IBM Plex Sans KR와 IBM Plex Mono 두 가지예요. 크기, 행간, 굵기, 자간을 묶은 텍스트 스타일 8개만 써요.
스타일
이름이 곧 쓰는 곳이에요. 코드에서는 text-<이름> 클래스나 <Text variant>로 써요.
Sonic 디자인 시스템 2026
display32/40 · 600 · −2%페이지 제목, 핵심 수치Sonic 디자인 시스템 2026
title20/28 · 600 · −1%섹션, Card, Dialog 제목Sonic 디자인 시스템 2026
body14/20 · 400 · 0본문Sonic 디자인 시스템 2026
body-strong14/20 · 500 · 0버튼(md·lg), 강조 본문Sonic 디자인 시스템 2026
label13/16 · 500 · 0폼 라벨, 버튼(sm)Sonic 디자인 시스템 2026
caption12/16 · 400 · 0보조 설명, 에러 메시지sk_live_a91f · 12,480
mono14/20 · 400 · 0수치, 코드sk_live_a91f · 12,480
mono-caption12/16 · 400 · 0작은 ID, 키 값
글꼴
한글과 영문 모두 IBM Plex 계열로 맞춰요. 다른 글꼴은 섞지 않아요.
IBM Plex Sans KR — 본문과 제목에 써요. 가나다 ABC
IBM Plex Sans KR400 · 500 · 600모든 글자의 기본IBM Plex Mono — 0123456789 sk_live_a91f
IBM Plex Mono400숫자, ID, 키 값처럼 자리를 맞춰야 하는 글자
규칙
- 숫자는 고정폭수치, ID, 키 값은 mono 계열로 써서 자리를 맞춰요. 표의 숫자 열은 오른쪽 정렬이에요.
- 문장형 대소문자라벨을 전부 대문자로 쓰지 않아요. 영문도 첫 글자만 대문자예요.
- 스타일 밖의 크기는 없어요13px, 15px처럼 표에 없는 크기를 만들지 않아요. 필요하면 가장 가까운 스타일을 써요.