Typography

타이포그래피는 가독성과 명료성에 영향을 주며, 화면 내 요소들 간 위계를 만듭니다.

Font

Primary

일반적으로 UI에 사용되는 서체들이에요. 가독성이 중요한 대부분의 텍스트 영역은 이 서체를 사용해요.

GDSC Hongik

Product Sans_Bold

GDSC Hongik

Product Sans_Regular

지뎃시 홍익

SUIT_v1_Bold

지뎃시 홍익

SUIT_v1_Semibold

지뎃시 홍익

SUIT_v1_Medium

Secondary

강조되거나 특별한 때에 사용되는 포인트 서체예요.

GDSC Hongik

Roboto Mono_Regular

Typography System

Display

랜딩페이지나 배너 등 주요 타이틀을 크게 배치할 때 사용해요.

Display1 : SUIT v1_Bold, 40px, 130%, -1%

Display2 : SUIT v1_Bold, 32px, 130%, -1%

Heading

타 플랫폼 관련 정보가 들어갈 시 해당 키컬러를 따로 사용할 수 있어요.

Heading1 : SUIT v1_Semibold, 24px, 130%, -1%

Heading2 : SUIT v1_Semibold, 18px, 130%, -1%

Heading3 : SUIT v1_Semibold, 16px, 130%, -1%

Body

많은 양의 글이 있는 단락, 본문에 주로 활용해요.

Body0 : SUIT v1_Medium, 18px, 160%, -1%

Body1 : SUIT v1_Medium, 16px, 160%, -1%

Body2 : SUIT v1_Medium, 14px, 160%, -1%

Body3 : SUIT v1_Medium, 12px, 140%, 0%

Label

버튼이나 부가적인 내용 등을 표시하는 데 사용해요.

Label1 : SUIT v1_Semibold, 16px, 100%, -1%

Label1_U : SUIT v1_Semibold, 16px, 100%, -1%

Label2 : SUIT v1_Semibold, 14px, 100%, -1%

Label2_U : SUIT v1_Semibold, 14px, 100%, -1%

링크 버튼 등에 활용해요.

Label2_U2 : SUIT v1_Medium, 14px, 160%, -1%

링크 버튼 등에 활용해요.

Label2_Mono : Roboto Mono_Regular, 14px, 100%, -3%

포인트 텍스트로 자유롭게 활용하되, 영문으로만 사용해요.

문장 단위로 사용하지 않아요.

Label3 : SUIT v1_Semibold, 12px, 100%, 0%

Header

헤더 내의 GDSC 이름을 표시하는 데 사용해요.

Header1 : Product Sans, 20px, 130%, 0%

Header2 : Product Sans, 14px, 130%, 0%