11번가

Design System

Typography

타이포그래피(Typography)는 사용자가 쉽게 읽고 목적에 맞게 경험할 수 있는 중요한 요소입니다.
OS별 최적화된 시스템 폰트를 채택하여 사용자 경험을 향상시킵니다.

Types

11번가 내 시스템 폰트는 각 OS에 최적화하여 사용하며 쓰임새에 따라 타입 페이스를 최적화합니다.

  1. Android : 국문은 Noto Sans CJK KR , 영문, 숫자는 Roboto Font를 사용합니다.
  2. iOS : 국문은 Apple SD Gothic Neo , 영문, 숫자는 SF Pro Text Font를 사용합니다.
  3. Web Font : 11street Gothic은 OS 공통으로 브랜드 경험이 필요한 ‘가격’ 및 ‘컴포넌트(Home tab menu, Button, Caption Carrier, Promotion Banner 등 일부)’에 한정해 사용합니다.

Type Scale

정의된 타입 스케일은 권장사항이며, 디자이너가 자유롭게 조합하여 사용 가능합니다.
Android 폰트 대비, iOS, MW 폰트가 1pt 더 클 것을 권장합니다.

  1. Android : Noto Sans CJK KR
  2. iOS : Apple SD Gothic Neo

Android

Android Type Scale
Scale CategoryWeightsSizeLine
Headline 0
Regular28Auto
Headline 1
Bold24Auto
Headline 2
Bold22Auto
Headline 3
Bold20Auto
Title Bold
Bold18Auto
Title Regular
Regular18Auto
Subtitle 1
Regular16Auto
Subtitle 2
Regular15Auto
Body 1
Regular14Auto
Body 2
Regular13Auto
Caption 1
Regular12Auto
Caption 2
Regular11Auto

iOS

iOS Type Scale
Scale CategoryWeightsSizeLine
Headline 0
Regular29Auto
Headline 1
Bold25Auto
Headline 2
Bold23Auto
Headline 3
Bold21Auto
Title Bold
Bold19Auto
Title Regular
Regular19Auto
Subtitle 1
Regular17Auto
Subtitle 2
Regular16Auto
Body 1
Regular15Auto
Body 2
Regular14Auto
Caption 1
Regular13Auto
Caption 2
Regular12Auto

Spec

Weight

쓰임새에 따라 스케일을 위계에 따라 적절히 사용합니다.

Design

정의된 스케일을 사용해 화면 내 기본 위계를 맥락에 따라 컴포넌트를 적절히 사용하여 디자인합니다.

Size

폰트 사이즈는 최대 28과 본문사이즈는 14를 권장하며 최소사이즈는 가독성을 고려해 한정적으로 11사이즈를 사용합니다.

Usage

타이포그래피는 서비스와 사용자가 커뮤니케이션하는 중요한 요소입니다. OS에 최적화된 폰트와 정의된 스케일을 쓰임새에 맞게 적절하게 사용하는 것을 권장합니다.

Do

브랜드 경험이 필요한 ‘가격’ 및 ‘컴포넌트(Home tab menu, Button, 등 일부)’에 한정해 ‘11STREET Gothic’을 사용합니다.

Don't

취소선을 사용 시 작업자에 따라 위치 및 스타일이 상이하므로 Type setting에서 Strikethrough 적용을 권장합니다.