# 글자

글꼴은 Pretendard 하나다(굵기 400~800). 글자 스타일은 11종이고 서비스가 바뀌어도 같다.

## 글자 스타일 11종

| 이름 | 크기 | 줄 높이 | 굵기 | 자간 | 용도 | CSS 변수 | 앱에서 쓴 횟수 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| `display` (가장 큰 제목) | 26 | 34 | 800 | -0.4 | 온보딩의 큰 제목, 완료 화면 제목 | `--tds-text-display-size` 등 | 11 |
| `title` (화면 제목) | 21 | 29 | 700 | -0.3 | "내 과목", "복습 스케줄" 같은 `TitleHeader` | `--tds-text-title-size` 등 | 38 |
| `headline` (카드 제목) | 17 | 24 | 700 | -0.2 | `Panel` 제목, 대화상자 제목, 빈 화면 제목 | `--tds-text-headline-size` 등 | 88 |
| `bodyStrong` (강조 본문) | 15 | 22 | 600 | -0.1 | 목록 행의 제목, 설정 행 이름 | `--tds-text-body-strong-size` 등 | 155 |
| `body` (본문) | 15 | 22 | 500 | -0.1 | 문제 보기, 해설, 대화상자 본문 | `--tds-text-body-size` 등 | 62 |
| `small` (작은 본문) | 13 | 19 | 500 | -0.1 | 행 아래 보조 설명, 안내(`Notice`) 글자 | `--tds-text-small-size` 등 | 248 |
| `smallStrong` (작은 강조) | 13 | 19 | 600 | -0.1 | 칩, 작은 버튼, 입력 칸 라벨 | `--tds-text-small-strong-size` 등 | 201 |
| `caption` (아주 작은 글자) | 11.5 | 16 | 500 | 0 | 차트 축 숫자, 탭 이름, 행의 보조 줄 | `--tds-text-caption-size` 등 | 248 |
| `button` (버튼 글자) | 15 | 20 | 700 | -0.1 | `PrimaryButton`, `SecondaryButton` | `--tds-text-button-size` 등 | 15 |
| `metric` (큰 숫자) | 24 | 30 | 800 | -0.4 | 정의만 있고 앱 코드에서는 아직 쓰지 않는다. | `--tds-text-metric-size` 등 | 0 |
| `question` (문제 본문) | 18 | 27 | 700 | -0.2 | 문제 풀이 화면의 질문 글 | `--tds-text-question-size` 등 | 4 |

## 글자 크기 설정

앱 설정에서 글자 크기를 4단계로 고른다. 크기와 줄 높이에 배율을 곱하고 소수 첫째 자리에서 반올림한다. 시스템 글자 크기는 최대 1.6배까지 적용한다.

| 글자 스타일 | 작게 (0.92배) | 기본 (1배) | 크게 (1.12배) | 아주 크게 (1.24배) |
| --- | --- | --- | --- | --- |
| `display` | 23.9 / 31 | 26 / 34 | 29.1 / 38 | 32.2 / 42 |
| `title` | 19.3 / 27 | 21 / 29 | 23.5 / 32 | 26 / 36 |
| `headline` | 15.6 / 22 | 17 / 24 | 19 / 27 | 21.1 / 30 |
| `bodyStrong` | 13.8 / 20 | 15 / 22 | 16.8 / 25 | 18.6 / 27 |
| `body` | 13.8 / 20 | 15 / 22 | 16.8 / 25 | 18.6 / 27 |
| `small` | 12 / 17 | 13 / 19 | 14.6 / 21 | 16.1 / 24 |
| `smallStrong` | 12 / 17 | 13 / 19 | 14.6 / 21 | 16.1 / 24 |
| `caption` | 10.6 / 15 | 11.5 / 16 | 12.9 / 18 | 14.3 / 20 |
| `button` | 13.8 / 18 | 15 / 20 | 16.8 / 22 | 18.6 / 25 |
| `metric` | 22.1 / 28 | 24 / 30 | 26.9 / 34 | 29.8 / 37 |
| `question` | 16.6 / 25 | 18 / 27 | 20.2 / 30 | 22.3 / 33 |

## 한국어 줄바꿈

앱은 `keepWords()`로 글자 사이에 U+2060을 넣어 단어가 쪼개지지 않게 한다. 웹은 `word-break: keep-all`과 `overflow-wrap: break-word`를 쓴다.

## 시험지 서체

`PaperType`으로 감싸면 안쪽의 `AppText`가 Noto Serif KR(Regular, Bold)로 바뀐다. 시험지 화면에서만 쓴다.