Typography
타이포그래피는 정보의 위계질서를 명확히 하고, 서비스와 사용자 간의 커뮤니케이션을 원활히 할 수 있도록 돕는 주요 요소입니다.
텍스트 목적과 기능에 따라 서체 및 스타일을 유의해 사용합니다.
Typeface
에이프리카 국문, 영문 서체는 로고타입과 조화를 이룰 수 있는 서체입니다. Pretendard(국문), Poppins(영문)를 ‘권장’ 서체로 제시하되,
서체를 지정하면 디자인 자유도가 제약받을 수 있으므로, 매체의 특성에 따라 자유롭게 사용할 수 있도록 합니다.
단, 오픈 라이센스 서체만 사용 가능합니다.
본 라이선스로 제공되는 사용권한 외 사용 시 법적인 책임은 사용자에 있음을 알려드립니다.
Typography Components
위 서체를 기반으로 타이포그래피 컴포넌트를 쓰임새 및 맥락에 따라 적절히 사용합니다.
컴포넌트를 통해 제목, 본문 등의 시각적 계층성을 구성할 수 있습니다.
-
AIFRICA
Heading
페이지 및 템플릿, 기능 강조 시 사용하는 타이포그래피 요소입니다. -
누구나 쉽게 AI와 클라우드를 활용하고 우리의 삶에 가치와 효용을 더하는 세상으로 만들어 가겠습니다.
Body
가장 보편적으로 사용하는 타이포그래피 요소로 일반적으로 줄글에 사용합니다. -
㈜에이프리카
Detail
추가 정보 또는 작은 항목 텍스트에 사용되는 타이포그래피 요소입니다.
Text Style Name Text Style Name은 4가지 요소로 구성됩니다. Figma Library와 CSS Library에서 같은 요소의 이름을 사용하는 것을 권장합니다.
- 1.Language : 국문, 영문의 언어를 제공하며 국문은 Kr, 영문은 En으로 표기합니다. 2.Type : 타이포그래피의 타입을 나타냅니다. Heading, Body, Detail의 세 가지 타입이 있습니다. 3.Font Size : 폰트 사이즈의 절댓값을 나타내며 숫자로 표기합니다. 4.Font Weight : 폰트의 굵기를 나타냅니다.
Type Scale
텍스트의 위계에 따라 폰트 크기 및 굵기를 아래와 같이 제시하되, 제시된 스케일은 ‘권장’ 사항입니다.
타입 스케일을 지정하면 디자인 자유도가 제약받을 수 있으므로, 자유롭게 조합하여 사용할 수 있도록 합니다.
단, 12px 보다 작은 사이즈는 권장하지 않습니다.
- Heading 1 44px, Bold
- En / Heading 1 / 44 / Bold
- AIFRICA
- Heading 2 28px, SemiBold
- En / Heading 2 / 28 / SemiBold
- AI and Cloud by Your Side
- Heading 3 24px, Medium
- En / Heading 3 / 24 / Medium
- AI and Cloud by Your Side
- Heading 4 20px, Medium
- En / Heading 4 / 20 / Medium
- AI and Cloud by Your Side
- Heading 5 18px, Medium
- En / Heading 5 / 18 / Medium
- AI and Cloud by Your Side
- Body 1 16px, regular
- Kr / Body 1 / 16 / Regular
-
누구나 쉽게 AI와 클라우드를 활용하고
우리의 삶에 가치와 효용을 더하는 세상으로 만들어 가겠습니다.
- Body 2 14px, regular
- Kr / Body 2 / 14 / Regular
-
누구나 쉽게 AI와 클라우드를 활용하고
우리의 삶에 가치와 효용을 더하는 세상으로 만들어 가겠습니다.
- Detail 12px, regular
- Kr / Detail / 12 / Regular
- (주)에이프리카