Foundation/Typography

Typography

1.0.026 Aug, 2021
Design/ContentsCompleted
CodeNot Started
타이포그래피(Typography)는 서비스와 사용자가 커뮤니케이션하는 주요 요소입니다. 텍스트 목적과 기능에 따라 서체 및 스타일을 유의해 사용합니다.

Typeface

G마켓 내 쓰임새에 따라 타입 페이스를 최적화합니다. 시스템 폰트는 각 OS에 최적화하여, 안드로이드와 iOS를 국문과 영문, 숫자로 나뉘어 사용합니다. 이외 웹 폰트인 G마켓 산스는 OS 공통으로 브랜드 가치 전달이 필요한 ‘가격’ 및 ‘컴포넌트(Heading, Button 등 일부)’에 한정해 사용합니다.

typeface
OS에 따른 타입페이스 예시 화면

타입 페이스는 아래를 참고해서 OS와 국문/영문, 숫자에 따른 차이를 참고해주세요.

typeface

Typography Components

위 타입 페이스를 기반으로 폰트 사이즈와 행간, 색상이 결합된 컴포넌트를 쓰임새 및 맥락에 따라 적절히 사용합니다.

Typography Components
heading
Heading

Heading은 페이지 및 템플릿, 모듈 단위 역할 및 기능의 강조 시 사용하는 타이포그래피 요소입니다. 자세한 가이드는 ‘Heading’ 페이지를 확인합니다.

body
Body

Body는 가장 보편적, 주되게 사용하는 타이포그래피 요소입니다. 자세한 가이드는 ‘Text*’ 도큐먼트를 확인합니다.
*Text 도큐먼트 추후 추가 예정

detail
Detail

Detail은 추가 정보 또는 작은 항목 텍스트에 사용되는 타이포그래피 요소입니다. 자세한 가이드는 ‘Text’ 도큐먼트를 확인합니다.


Table of Figma Properties

Figma 내 컴포넌트 라이브러리에 등록되어있는 Typography 대표 속성을 설명합니다. 프로덕트에서 가장 보편적으로 사용되는 폰트 크기, 높이, 정렬 등을 포함하고 있으므로 커스텀 하지않고 사용합니다.

Typography Components
Table of Figma Properties
StyleText Style NameUsage
Heading 1Text-xxxl/Gmarket Sans/Regular페이지단위 타이틀 쓰임새로 사용 권장합니다. (예시: 홈 상단 메시지)
Heading 2Text-xxl/Gmarket Sans/Regular페이지단위 타이틀 쓰임새로 사용 권장합니다. (예시: MyG 상단 메시지)
Heading 3Text-xl/Gmarket Sans/Regular템플릿단위 타이틀 쓰임새로 사용 권장합니다. (예시: 홈 템플릿 타이틀)
Heading 4Text-l/Gmarket Sans/Regular템플릿단위 타이틀 쓰임새로 사용 권장합니다. (예시: 헤더 타이틀)
Body 1Text-m/Noto Sans KR/Bold주요 본문 쓰임새로 사용 권장합니다. (예시: 서브 타이틀)
Body 1Text-m/Noto Sans KR/Regular주요 본문 쓰임새로 사용 권장합니다. (예시: 리스트)
Body 2Text-s/Noto Sans KR/Bold보조 본문 강조형 쓰임새로 사용 권장합니다. (예시: 상품명 및 리스트)
Body 2Text-s/Noto Sans KR/Regular보조 본문 쓰임새로 사용 권장합니다. (예시: 상품명 및 리스트)
DetailText-xs/Noto Sans KR/Bold본문 보조 강조형 쓰임새로 사용 권장합니다. (예시: 인포박스 타이틀)
DetailText-xs/Noto Sans KR/Regular본문 보조, 하위 위계 텍스트 쓰임새로 사용 권장합니다. (예시: 인포박스)

Font Size/Weight

위 중복된 속성 내에 상세한 속성값을 명시해 관리합니다.

Font Sizes
Table of Figma Properties
StyleSize/HeightUpdate
font-size-xxxl24px1.0.0
font-size-xxl22px1.0.0
font-size-xl20px1.0.0
font-size-l18px1.0.0
font-size-m16px1.0.0
font-size-s14ox1.0.0
font-size-xs12px1.0.0
font-size-xxs11px1.0.0
Font Weigtht
Table of Figma Properties
StyleWeigthtUpdate
font-weight-bold7001.0.0
font-weight-medium5001.0.0
font-weight-regular4001.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 : 도형 선으로 취소선 사용

취소선을 도형 선을 사용 시, 작업자에 따라 위치 및 스타일이 상이하므로 할인 전 가격 표기 시 도형선 사용을 지양합니다.


Font Download

Gmarket Sans
Regular 400/ Medium 500/ Bold 700폰트 내려받기
Noto Sans KR
Regular 400/ Medium 500/ Bold 700폰트 내려받기
Roboto
Regular 400/ Medium 500/ Bold 700폰트 내려받기
SF Pro Display
Regular 400/ Medium 500/ Bold 700폰트 내려받기
담당자구경하@kykoo

이전글
Spacing
다음글
Accordions