Typography
Typeface
G마켓 내 쓰임새에 따라 타입 페이스를 최적화합니다. 시스템 폰트는 각 OS에 최적화하여, 안드로이드와 iOS를 국문과 영문, 숫자로 나뉘어 사용합니다. 이외 웹 폰트인 G마켓 산스는 OS 공통으로 브랜드 가치 전달이 필요한 ‘가격’ 및 ‘컴포넌트(Heading, Button 등 일부)’에 한정해 사용합니다.
OS에 따른 타입페이스 예시 화면
타입 페이스는 아래를 참고해서 OS와 국문/영문, 숫자에 따른 차이를 참고해주세요.
Typography Components
위 타입 페이스를 기반으로 폰트 사이즈와 행간, 색상이 결합된 컴포넌트를 쓰임새 및 맥락에 따라 적절히 사용합니다.
Heading
Heading은 페이지 및 템플릿, 모듈 단위 역할 및 기능의 강조 시 사용하는 타이포그래피 요소입니다. 자세한 가이드는 ‘Heading’ 페이지를 확인합니다.
Body
Body는 가장 보편적, 주되게 사용하는 타이포그래피 요소입니다. 자세한 가이드는 ‘Text*’ 도큐먼트를 확인합니다.
*Text 도큐먼트 추후 추가 예정
Detail
Detail은 추가 정보 또는 작은 항목 텍스트에 사용되는 타이포그래피 요소입니다. 자세한 가이드는 ‘Text’ 도큐먼트를 확인합니다.
Table of Figma Properties
Figma 내 컴포넌트 라이브러리에 등록되어있는 Typography 대표 속성을 설명합니다. 프로덕트에서 가장 보편적으로 사용되는 폰트 크기, 높이, 정렬 등을 포함하고 있으므로 커스텀 하지않고 사용합니다.
| Style | Text Style Name | Usage |
|---|---|---|
| Heading 1 | Text-xxxl/Gmarket Sans/Regular | 페이지단위 타이틀 쓰임새로 사용 권장합니다. (예시: 홈 상단 메시지) |
| Heading 2 | Text-xxl/Gmarket Sans/Regular | 페이지단위 타이틀 쓰임새로 사용 권장합니다. (예시: MyG 상단 메시지) |
| Heading 3 | Text-xl/Gmarket Sans/Regular | 템플릿단위 타이틀 쓰임새로 사용 권장합니다. (예시: 홈 템플릿 타이틀) |
| Heading 4 | Text-l/Gmarket Sans/Regular | 템플릿단위 타이틀 쓰임새로 사용 권장합니다. (예시: 헤더 타이틀) |
| Body 1 | Text-m/Noto Sans KR/Bold | 주요 본문 쓰임새로 사용 권장합니다. (예시: 서브 타이틀) |
| Body 1 | Text-m/Noto Sans KR/Regular | 주요 본문 쓰임새로 사용 권장합니다. (예시: 리스트) |
| Body 2 | Text-s/Noto Sans KR/Bold | 보조 본문 강조형 쓰임새로 사용 권장합니다. (예시: 상품명 및 리스트) |
| Body 2 | Text-s/Noto Sans KR/Regular | 보조 본문 쓰임새로 사용 권장합니다. (예시: 상품명 및 리스트) |
| Detail | Text-xs/Noto Sans KR/Bold | 본문 보조 강조형 쓰임새로 사용 권장합니다. (예시: 인포박스 타이틀) |
| Detail | Text-xs/Noto Sans KR/Regular | 본문 보조, 하위 위계 텍스트 쓰임새로 사용 권장합니다. (예시: 인포박스) |
Font Size/Weight
위 중복된 속성 내에 상세한 속성값을 명시해 관리합니다.
Font Sizes
| Style | Size/Height | Update |
|---|---|---|
| font-size-xxxl | 24px | 1.0.0 |
| font-size-xxl | 22px | 1.0.0 |
| font-size-xl | 20px | 1.0.0 |
| font-size-l | 18px | 1.0.0 |
| font-size-m | 16px | 1.0.0 |
| font-size-s | 14ox | 1.0.0 |
| font-size-xs | 12px | 1.0.0 |
| font-size-xxs | 11px | 1.0.0 |
Font Weigtht
| Style | Weigtht | Update |
|---|---|---|
| font-weight-bold | 700 | 1.0.0 |
| font-weight-medium | 500 | 1.0.0 |
| font-weight-regular | 400 | 1.0.0 |
Usage Guidelines
Do : 폰트 사이즈 쓰임새에 따라 사용
폰트 사이즈는 텍스트의 제목, 본문에 따라 구분하여 사용합니다. 대표적으로 제목은 20, 본문 사이즈는 14입니다.
Do : 폰트 사이즈 최대, 최소 사이즈
폰트 사이즈의 최대는 24와 최소는 12로 사용합니다. 이외 최소인 12 이하인 11은 가독성을 고려해, 예외 케이스에 한정해 사용합니다.
Do : 타입페이스 안드로이드기준으로 사용
시안 작업 시 기본 타입 페이스는 안드로이드 기준인 국문은 Noto Sans KR, 영문/숫자는 Roboto를 사용합니다. 이외 웹 폰트 Gmarket Sans는 아래 쓰임새를 참고해 사용합니다.
Do : 숫자(가격, 할인율) Gmarket Sans 사용
숫자 중 가격과 할인율은 웹 폰트인 Gmarket Sans로 고정해 사용합니다. 이외 숫자는 각 OS별 규정된 시스템 폰트 영문/숫자 타입 페이스를 사용합니다.
Do : Gmarket Sans Bold 사용
Gmarket Sans Bold는 프로모션 목적으로 메시지 강조 시 사용합니다. 이외 Bold는 Medium 대비 직관성이 다소 낮음으로, 명확한 정보 전달이 필요한 UI에서 사용 지양합니다.
Do : 언더라인(Underline) 사용
텍스트 내 언더라인(Underline)은 링크와 텍스트 버튼으로 사용합니다. 이 중 텍스트 버튼에 관한 쓰임새 및 스타일은 버튼 페이지를 참고합니다.
Do : 취소선(Strikethrough) 사용
텍스트 내 취소선(Strikethrough)은 할인 전 가격에 사용합니다. 도형 선을 사용하지 않고, 우측 패널 내 텍스트 스타일 ‘더보기’ 버튼 내 Strikethrough을 사용하는 부분을 참고합니다.
Don’t : 도형 선으로 취소선 사용
취소선을 도형 선을 사용 시, 작업자에 따라 위치 및 스타일이 상이하므로 할인 전 가격 표기 시 도형선 사용을 지양합니다.
