Typography

텍스트 스타일, 배열, 크기, 간격 등을 포함하여 시각적 표현을 다루는 요소입니다. 타이포그래피는 브랜드 아이덴티티를 강화하고 정보의 가독성을 높여 사용자 경험을 향상시키는 데 중요한 역할을 합니다.

Overview

국문 Noto Sans KR
영문, 숫자는 Roboto를 사용합니다.
교보문고의 타이포그래피 시스템은 시각적 계층 구조를 통해 정보의 전달력을 높입니다.

Common style

Type	Value
h1	$font-title-xlsize: 32pxline height: 44pxletter spacing: -0.01em
h2	$font-title-lsize: 28pxline height: 38pxletter spacing: -0.01em
h3	$font-title-msize: 24pxline height: 34pxletter spacing: -0.01em
h4	$font-title-ssize: 20pxline height: 30pxletter spacing: -0.01em
h5	$font-title-xssize: 18pxline height: 28pxletter spacing: -0.01em
b1	$font-text-xlsize: 16pxline height: 24pxletter spacing: -0.01em
b2	$font-text-lsize: 14pxline height: 22pxletter spacing: -0.01em
b3	$font-text-msize: 12pxline height: 18pxletter spacing: -0.01em

	Token	Size	Line height	Letter spacing
h1	$font-title-xl	32px	44px	-0.01em
h2	$font-title-l	28px	38px	-0.01em
h3	$font-title-m	24px	34px	-0.01em
h4	$font-title-s	20px	30px	-0.01em
h5	$font-title-xs	18px	28px	-0.01em
b1	$font-text-xl	16px	24px	-0.01em
b2	$font-text-l	14px	22px	-0.01em
b3	$font-text-m	12px	18px	-0.01em

Head는 화면에서 가장 큰 텍스트로, 중요한 정보를 짧고 간결하게 전달하는 데 사용됩니다. Body는 본문에 사용되는 서체로, UI 구성 요소의 일반적인 크기 조정 토큰 규모입니다. 이는 가장 보편적으로 사용되는 타이포그래피 요소입니다. 타입스케일은 ‘권장’ 사항입니다. 타입스케일을 지정하면 디자인의 자유도가 제약될 수 있으므로 굵기 종류를 제시하되, 디자이너가 자유롭게 조합하여 사용할 수 있도록 합니다. 단, 12pt 이하의 폰트 크기는 사용을 권장하지 않습니다.

Font style

Type	Size Unit
$font-weight-regular	FontWeight400
$font-weight-medium	FontWeight500
$font-weight-bold	FontWeight700

Token	Type	Value
$font-weight-regular	FontWeight	400
$font-weight-medium	FontWeight	500
$font-weight-bold	FontWeight	700

글꼴 가중치는 글꼴의 두께를 조정하여, 텍스트의 시각적 강조를 설정하는 요소입니다. 글꼴 가중치를 변경함으로써 텍스트의 가독성이나 강조 정도를 제어할 수 있습니다.

App

iOS	Android
영문 SF Pro 한글 Apple SD Gothic Neo iOS의 폰트는 동적 유형으로 독자가 선호하는 텍스트 크기를 선택할 수 있도록 하여 추가적인 유연성을 제공한다.	영문 ROBOTO 한글 NotoSans 안드로이드에서는 큰 텍스트 블록과 14pt 미만의 텍스트에는 기본 시스템 서체를 사용해야 한다.
17pt	16pt
본문 16pt~18pt 캡션 10pt~12pt 타이틀 18pt~32pt 10pt이하의 폰트크기는 사용하지 않는다. 헤드라인은 평균적으로 2~3줄을 채울 수 있는 정도의 크기를 권장한다.

	iOS	Android
Typography	영문 SF Pro 한글 Apple SD Gothic Neo iOS의 폰트는 동적 유형으로 독자가 선호하는 텍스트 크기를 선택할 수 있도록 하여 추가적인 유연성을 제공한다.	영문 ROBOTO 한글 NotoSans 안드로이드에서는 큰 텍스트 블록과 14pt 미만의 텍스트에는 기본 시스템 서체를 사용해야 한다.
본문폰트	17pt	16pt
공통 권장사항	본문 16pt~18pt 캡션 10pt~12pt 타이틀 18pt~32pt 10pt이하의 폰트크기는 사용하지 않는다. 헤드라인은 평균적으로 2~3줄을 채울 수 있는 정도의 크기를 권장한다.

iOS에서 Apple SD Gothic Neo는 SF Pro에서 보여주지 못하는 한글 글씨들을 보여줍니다. 영문, 숫자 등은 대부분 SF Pro를 따르고, 한글에만 Apple SD Gothic Neo를 따르는 방식입니다. iOS용 화면 시안을 Figma, Sketch, Photoshop 등에서 디자인 할 때는 영문, 숫자 용으로 SF Pro와 한글 용으로 Apple SD Gothic Neo를 섞어서 사용해줘야 합니다. 어플 내부에선 자동으로 전환이 이루어지기 때문에 size, weight만 지정합니다.