Typography
Stable명확한 위계와 편안한 읽기 흐름을 위한 타이포그래피입니다.
Overview
역할 중심의 Text Style을 사용합니다. 본문은 16px을 기본으로 하고 제목만 화면 크기에 맞춰 완만하게 확장합니다.
같은 토큰으로 이어지는 읽기 경험.
--guide-font-base → --guide-font-sansPretendard가 설치되어 있으면 사용하고, 없으면 system-ui로 표시합니다. 이 레포는 외부 폰트 파일에 의존하지 않습니다.
Type scale
Primitive · Size / Weight / Line height
| Token | 정의 / 매핑 | 현재 값 |
|---|---|---|
--guide-font-sans | var(--font-pretendard), system-ui, sans-serif | … |
--guide-font-code | 'SFMono-Regular', Consolas, monospace | … |
--guide-size-40 | 40px | … |
--guide-size-36 | 36px | … |
--guide-size-32 | 32px | … |
--guide-size-30 | 30px | … |
--guide-size-28 | 28px | … |
--guide-size-26 | 26px | … |
--guide-size-24 | 24px | … |
--guide-size-22 | 22px | … |
--guide-size-20 | 20px | … |
--guide-size-18 | 18px | … |
--guide-size-17 | 17px | … |
--guide-size-16 | 16px | … |
--guide-size-15 | 15px | … |
--guide-size-14 | 14px | … |
--guide-size-13 | 13px | … |
--guide-size-12 | 12px | … |
--guide-size-11 | 11px | … |
--guide-fw-700 | 700 | … |
--guide-fw-600 | 600 | … |
--guide-fw-500 | 500 | … |
--guide-fw-400 | 400 | … |
--guide-lh-130 | 1.3 | … |
--guide-lh-150 | 1.5 | … |
Semantic · 반응형 타입 스케일 전체
| Token | Mobile | Tablet ≥768 | Desktop ≥1280 | 현재 값 |
|---|---|---|---|---|
--guide-tit-display-hero | 36px | 40px | 40px | … |
--guide-tit-main-page | 32px | 36px | 36px | … |
--guide-tit-page-title | 28px | 30px | 30px | … |
--guide-tit-section-title | 22px | 24px | 24px | … |
--guide-tit-component-header | 16px | 18px | 18px | … |
--guide-tit-banner | 26px | 28px | 28px | … |
--guide-tit-promo-bar | 18px | 20px | 20px | … |
--guide-tit-card-title | 15px | 16px | 16px | … |
--guide-tit-deal-card | 18px | 24px | 24px | … |
--guide-txt-body-main | 16px | 16px | 16px | … |
--guide-txt-body-sub | 14px | 14px | 14px | … |
--guide-txt-caption | 12px | 12px | 12px | … |
--guide-txt-desc | 14px | 14px | 14px | … |
--guide-txt-banner-sub | 14px | 14px | 14px | … |
--guide-nav-menu | 14px | 16px | 16px | … |
--guide-nav-tab-label | 11px | 11px | 11px | … |
--guide-nav-util | 16px | 16px | 16px | … |
--guide-nav-mega-cat | 14px | 14px | 14px | … |
--guide-nav-mega-group | 16px | 16px | 16px | … |
--guide-nav-mega-item | 14px | 14px | 14px | … |
--guide-nav-breadcrumb | 13px | 13px | 13px | … |
--guide-price-main | 18px | 18px | 18px | … |
--guide-price-original | 14px | 14px | 14px | … |
--guide-price-convert | 13px | 13px | 13px | … |
--guide-badge-tag | 13px | 13px | 13px | … |
--guide-card-compact-title | 14px | 14px | 14px | … |
--guide-tab-item | 14px | 14px | 14px | … |
--guide-form-label | 13px | 13px | 13px | … |
Usage
Text Style은 크기뿐 아니라 굵기·행간·자간을 함께 정의합니다. 아래 예시는 실제 스타일로 렌더링됩니다.
text-tit-display-hero일관된 경험을 만드는 디자인 0123456789
text-tit-main-page일관된 경험을 만드는 디자인 0123456789
text-tit-page-title일관된 경험을 만드는 디자인 0123456789
text-tit-section-title일관된 경험을 만드는 디자인 0123456789
text-tit-component-header일관된 경험을 만드는 디자인 0123456789
text-tit-bannertext-tit-promo-bartext-tit-deal-card일관된 경험을 만드는 디자인 0123456789
text-price-main일관된 경험을 만드는 디자인 0123456789
text-txt-number-lg일관된 경험을 만드는 디자인 0123456789
text-nav-menutext-nav-menu-activetext-nav-util일관된 경험을 만드는 디자인 0123456789
text-nav-mega-cat일관된 경험을 만드는 디자인 0123456789
text-nav-mega-group일관된 경험을 만드는 디자인 0123456789
text-nav-mega-item일관된 경험을 만드는 디자인 0123456789
text-nav-breadcrumbtext-nav-tab-label일관된 경험을 만드는 디자인 0123456789
text-txt-card-title일관된 경험을 만드는 디자인 0123456789
text-txt-card-title-semibold일관된 경험을 만드는 디자인 0123456789
text-txt-card-title-bold일관된 경험을 만드는 디자인 0123456789
text-txt-body-main일관된 경험을 만드는 디자인 0123456789
text-txt-body-main-medium일관된 경험을 만드는 디자인 0123456789
text-txt-body-main-bold일관된 경험을 만드는 디자인 0123456789
text-txt-body-sub일관된 경험을 만드는 디자인 0123456789
text-txt-body-sub-medium일관된 경험을 만드는 디자인 0123456789
text-txt-body-sub-semibold일관된 경험을 만드는 디자인 0123456789
text-txt-body-sub-bold일관된 경험을 만드는 디자인 0123456789
text-txt-caption일관된 경험을 만드는 디자인 0123456789
text-txt-promo-label일관된 경험을 만드는 디자인 0123456789
text-txt-desc일관된 경험을 만드는 디자인 0123456789
text-txt-banner-subtext-price-original일관된 경험을 만드는 디자인 0123456789
text-price-convert일관된 경험을 만드는 디자인 0123456789
text-badge-tag일관된 경험을 만드는 디자인 0123456789
text-card-compact-title일관된 경험을 만드는 디자인 0123456789
text-tab-item일관된 경험을 만드는 디자인 0123456789
text-form-label일관된 경험을 만드는 디자인 0123456789
<h1 className="text-tit-main-page">페이지 제목</h1>
<h2 className="text-tit-section-title">섹션 제목</h2>
<p className="text-txt-body-main">본문 내용</p>
<small className="text-txt-caption">보조 설명</small>Guidelines
- body-main은 모든 화면에서 읽기 편한 16px을 유지합니다.
- 기본 행간은 1.5, 제목 행간은 1.3을 사용합니다.
- 시각적 크기와 별개로 HTML 제목의 h1 → h2 → h3 순서를 유지합니다.
- 화면 크기를 변경하면 표의 현재 값과 예시가 함께 바뀝니다.