Typography
타이포그래피는 정보를 효과적으로 전달하고 일관된 사용자 경험을 제공하는 데 필수적인 요소입니다. 글꼴, 크기, 두께, 간격, 계층 구조를 정의하여 가독성을 높이고,
내용을 중요도에 따라 시각적으로 표현합니다. 가이드에 맞춘 타이포그래피는 명확한 정보 전달을 가능하게 하며, 다양한 화면에서도 일관된 경험을 제공합니다.
글로벌 토큰 (Global Token)
Global Text Token은 letter spacing, line height, font size, style, weight와 같은 기본 타이포그래피 속성을 정의하는 토큰입니다.
이러한 토큰을 조합하여 Text Style을 구성하고, 전반적인 텍스트 스타일을 일관되게 관리할 수 있도록 합니다.
Global Token
Font
Noto Sans
Font Size
22pt
20pt
18pt
16pt
...
Line Height
32px
28px
26px
...
Letter Spacing
-1
0
Font Weight
Bold
Regular
Headline
헤드라인(Headline)은 화면에서 가장 큰 텍스트로 주로 헤더나 컴포넌트에 내 타이틀 용도로 사용됩니다. 자유롭게 변형할 수 있으나 과도한 크기 사용은 지양합니다.
Headline 1
올인원 업무 플랫폼 하이웍스 1A!@#
Headline 2
올인원 업무 플랫폼 하이웍스 1A!@#
Headline 3
올인원 업무 플랫폼 하이웍스 1A!@#
Name
Font size
Line height
Letter Spacing
Font weight
Headline 1
22pt
32px
0px
Bold
Headline 2
20pt
28px
0px
Bold
Headline 3
18pt
26px
0px
Bold
Headline 1
올인원 업무 플랫폼 하이웍스 1A!@#
Headline 2
올인원 업무 플랫폼 하이웍스 1A!@#
Headline 3
올인원 업무 플랫폼 하이웍스 1A!@#
Name
Font size
Line height
Letter Spacing
Font weight
Headline 1
22pt
32px
0px
Regular
Headline 2
20pt
28px
0px
Regular
Headline 3
18pt
26px
0px
Regular
Body
바디(Body)는 화면 전반에 사용되는 기본 텍스트 스타일입니다. Bold는 컴포넌트 단위의 역할이나 중요한 정보를 강조할 때 사용하며, Regular는 일반적인 본문 텍스트에 사용됩니다.
Body 1
올인원 업무 플랫폼 하이웍스 1A!@#
Body 2
올인원 업무 플랫폼 하이웍스 1A!@#
Body 3
올인원 업무 플랫폼 하이웍스 1A!@#
Body 4
올인원 업무 플랫폼 하이웍스 1A!@#
Name
Font size
Line height
Letter Spacing
Font weight
Body 1
16pt
24px
0px
Bold
Body 2
15pt
22px
0px
Bold
Body 3
14pt
20px
0px
Bold
Body 2
13pt
20px
0px
Bold
Body 1
올인원 업무 플랫폼 하이웍스 1A!@#
Body 2
올인원 업무 플랫폼 하이웍스 1A!@#
Body 3
올인원 업무 플랫폼 하이웍스 1A!@#
Body 4
올인원 업무 플랫폼 하이웍스 1A!@#
Name
Font size
Line height
Letter Spacing
Font weight
Body 1
16pt
24px
0px
Regular
Body 2
15pt
22px
0px
Regular
Body 3
14pt
20px
0px
Regular
Body 2
13pt
20px
0px
Regular
Caption
Caption은 보조적인 정보를 전달하기 위한 작은 텍스트 스타일입니다. 주로 시간, 날짜, 라벨과 같은 부가 정보나 설명이 필요한 영역에 사용됩니다.
Caption 1
올인원 업무 플랫폼 하이웍스 1A!@#
Caption 2
올인원 업무 플랫폼 하이웍스 1A!@#
Name
Font size
Line height
Letter Spacing
Font weight
Caption 1
12pt
18px
0px
Bold
Caption 2
10pt
16px
0px
Bold
Caption 1
올인원 업무 플랫폼 하이웍스 1A!@#
Caption 2
올인원 업무 플랫폼 하이웍스 1A!@#
Name
Font size
Line height
Letter Spacing
Font weight
Caption 1
12pt
18px
0px
Regular
Caption 2
10pt
16px
0px
Regular