글자

TDS는 글꼴 하나(Pretendard)와 글자 스타일 11종을 쓴다. 굵기로 위계를 나누고, 한글 제목은 글자 사이를 살짝 좁힌다. 글자 스타일은 서비스가 바뀌어도 같다.

이 페이지의 목차

글꼴
글자 스타일 11종
글자 크기 설정
한국어 줄바꿈
시험지 서체
웹에서 쓰기

글꼴#

본문, 제목, 버튼, 숫자 모두 Pretendard 하나로 쓴다. 굵기는 5가지이고, 앱은 굵기마다 별도 글꼴 파일을 쓴다(Pretendard-Regular 등). 웹에서는 가변 글꼴 하나로 같은 굵기를 만든다.

가나다라 Aa 1234regular · 400 · Pretendard-Regular

가나다라 Aa 1234medium · 500 · Pretendard-Medium

가나다라 Aa 1234semibold · 600 · Pretendard-SemiBold

가나다라 Aa 1234bold · 700 · Pretendard-Bold

가나다라 Aa 1234extrabold · 800 · Pretendard-ExtraBold

글꼴 굵기
토큰	굵기	앱의 글꼴 이름	주로 쓰는 곳
`regular`	400	`Pretendard-Regular`	앱의 글자 스타일에서는 쓰지 않는다. 온보딩 입력 칸 한 곳에서만 직접 쓴다.
`medium`	500	`Pretendard-Medium`	본문, 작은 본문, 캡션
`semibold`	600	`Pretendard-SemiBold`	강조 본문, 작은 강조
`bold`	700	`Pretendard-Bold`	제목, 카드 제목, 버튼
`extrabold`	800	`Pretendard-ExtraBold`	가장 큰 제목, 큰 숫자

Pretendard는 SIL Open Font License 1.1로 배포되는 글꼴이라 앱과 웹 모두 무료로 쓸 수 있다.

글자 스타일 11종#

아래 글자는 앱과 같은 픽셀 크기로 그렸다. “앱에서 쓴 횟수”는 Mordy 앱 코드에서 이 스타일을 지정한 횟수다. 0이면 정의만 있고 쓰지 않는다.

display복습할 문제가 3개 있어요

title복습할 문제가 3개 있어요

headline복습할 문제가 3개 있어요

bodyStrong복습할 문제가 3개 있어요

body복습할 문제가 3개 있어요

small복습할 문제가 3개 있어요

smallStrong복습할 문제가 3개 있어요

caption복습할 문제가 3개 있어요

button복습할 문제가 3개 있어요

metric복습할 문제가 3개 있어요

question복습할 문제가 3개 있어요

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

한 화면에서 글자 스타일은 3~4종만 쓴다. 제목(title 또는 headline), 본문(body), 보조(small 또는 caption)가 기본 조합이다.
숫자나 워드마크를 display(26)보다 크게 보여 줄 때는 style={{ fontSize, lineHeight }}로 직접 지정한다. 앱은 28~52를 쓰고, 이때 줄 높이를 반드시 같이 지정한다.
크기가 바뀌어도 줄 높이는 글자 스타일이 정한 값을 쓴다. 글자 크기만 직접 바꾸면 줄 높이가 모자라 글자가 잘린다. 앱의 AppText는 크기만 바꾸면 줄 높이를 크기의 1.34배로 자동 보정한다.

글자 크기 설정#

사용자는 앱 설정에서 글자 크기를 4단계로 고른다. 모든 글자 스타일의 크기와 줄 높이에 이 배율이 곱해지고, 소수 첫째 자리에서 반올림된다. 시스템 글자 크기도 함께 적용되지만 최대 1.6배에서 멈춘다(maxFontSizeMultiplier=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

한국어 줄바꿈#

Android는 한국어를 단어 중간에서 줄바꿈하는 경우가 있다(“무엇인가/요?”). 앱은 keepWords()로 글자 사이에 보이지 않는 연결 문자(U+2060)를 넣어 단어가 쪼개지지 않게 한다. 웹에서는 CSS word-break: keep-all을 쓴다.

웹 한국어 줄바꿈

.text {
  word-break: keep-all;      /* 단어 중간에서 줄을 바꾸지 않는다 */
  overflow-wrap: break-word; /* 한 단어가 줄보다 길면 그때만 자른다 */
}

시험지 서체#

모의고사 시험지처럼 보여야 하는 화면에서는 PaperType으로 감싼다. 안쪽의 모든 AppText가 Noto Serif KR(Regular, Bold)로 바뀐다. 굵기가 Bold, SemiBold, ExtraBold이면 Bold를, 그 밖에는 Regular를 쓴다. 시험지 화면이 아니면 쓰지 않는다.

다음 중 광합성이 일어나는 장소로 옳은 것은?

Noto Serif KR Regular (본문)

1. 다음 글을 읽고 물음에 답하시오.

Noto Serif KR Bold (제목·강조)

웹에서 쓰기#

글자 스타일마다 CSS 변수 4개(크기, 줄 높이, 굵기, 자간)를 tokens.css에 담았다. 글꼴은 --tds-font-sans다.

글자 스타일 적용 (headline)

.card-title {
  font-family: var(--tds-font-sans);
  font-size: var(--tds-text-headline-size);
  line-height: var(--tds-text-headline-line);
  font-weight: var(--tds-text-headline-weight);
  letter-spacing: var(--tds-text-headline-tracking);
}

앱에서 쓰기

import { AppText } from '@/ui/AppText';

<AppText variant="headline">오늘의 복습</AppText>
<AppText variant="small" color={color.textSecondary}>자료 18개 · 복습 12개</AppText>