brand guide
Typography
타이포그래피는 제목, 내용, 캡션 등 정보간의 위계를 조정하고 조직하는 역할을 합니다.
사용자가 글을 최적의 상태로 인지할 수 있도록 웹, 모바일, 인쇄물 등 모든 매체에서 본 화면의 규정을 준수해야 합니다.
텍스트 스타일
아래 유의사항을 참고하여 작업물의 용도에 맞는 텍스트 스타일을 사용해야 합니다.
텍스트 스타일은 Sketch용으로 제공되며, Shared Text Styles 플러그인 설치 후 사용할 수 있습니다.
- 텍스트에 Border, Shadow, Glow 등의 효과를 사용하지 마세요.
- 텍스트의 농도는 투명도 대신 그레이 톤으로 조절하세요.
- 콘텐츠의 시인성을 위해 텍스트와 배경색 지정에 있어서 최소 명암비를 준수하여야 합니다.
- 권장 명암비는 3:1(일반 사용자) ~ 4.5:1(저시력 사용자)입니다.
- SNS, 블로그 등 빠른 소모성을 가진 마케팅 디자인에서는 유연성있는 타이포그래피 사용을 허용합니다.
- 중문 폰트를 사용할 때, 기호의 자간은 -50% 좁혀줍니다.
Typeface
스테이즈에서 사용하는 기본 서체는 한, 중, 영 각각 SD Gothic Neo, Pingfang, Sofia Pro입니다.
폰트 굵기는 Regular, Medium, Semibold, Bold 총 4가지를 사용합니다.
대체 서체는 한, 중, 영 공통 Noto Sans CJK입니다.
Font Download
기본 서체
기본 서체는 디지털 문서, 홍보물, 인쇄물 등 주로 디자인 작업 시 사용합니다.
SD Gothic Neo와 Sofia Pro는 각각 산돌구름과 Adobe Typekit에 포함되어 있습니다.
유료 폰트의 불법 사용 및 기본 라이선스 이외 용도의 사용을 금합니다.
-
SD Gothic Neo
-
Pingfang
-
Sofia Pro
대체 서체
대체 서체는 라이선스가 필요치 않아 범용적으로 사용 가능합니다.
Noto Sans CJK SC(Simplified Character)에는 한국어, 간체, 영어, 일본어가 포함되어 있습니다.
Noto Sans CJK TC(Traditional Character)에는 한국어, 번체, 영어, 일본어가 포함되어 있습니다.
-
Noto Sans CJK
-
Noto Sans CJK
-
Noto Sans CJK
Mobile
모바일 서체는 OS 기본 서체를 사용합니다.
프로모션 배너 및 팝업 등의 특수한 경우를 제외하고 일반적인 경우 아래의 규정에 따릅니다.
-
DisplayLorem ipsum dolor sit ametSize 28, Leading 34, Bold, Gray 1
-
Heading 1Lorem ipsum dolor sit ametSize 22, Leading 28, Bold, Gray 1
-
Heading 2Lorem ipsum dolor sit ametSize 22, Leading 34, Bold, Gray 4
-
SubheadingLorem ipsum dolor sit ametSize 20, Leading 24, Bold, Gray 1
-
UL TitleLorem ipsum dolor sit ametSize 16, Leading 23, Medium, Gray 1
-
Body 1Lorem ipsum dolor sit ametSize 16, Leading 23, Regular, Gray 2
-
Body 2Lorem ipsum dolor sit ametSize 16, Leading 23, Regular, Gray 3
-
Body 3Lorem ipsum dolor sit ametSize 16, Leading 23, Regular, Gray 4
-
Caption 1Lorem ipsum dolor sit ametSize 13, Leading 18, Regular, Gray 2
-
Caption 2Lorem ipsum dolor sit ametSize 13, Leading 18, Regular, Gray 3