Text

본문과 보조 글의 크기·톤·언어를 정하는 기본 단위.

출시 화면에서 사용

개요

미리보기

예시 언어동작 줄이기

기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.

size

weight

tone

align

leading

lineClamp

italicunderlinestrike

as

children

예시

상태

본문
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.
보조 톤
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.
2줄 말줄임
10월 7일 회의록, 메일 3통, 캘린더 일정 1개에서 같은 프로젝트 이름이 나왔어요. 원문은 상세에서 그대로 볼 수 있어요. 정리 결과는 언제든 고칠 수 있어요.
가장 긴 문구 (es)
연결한 출처에서 읽은 기록만 여기에 보여요.
사용자 원문 (dir=auto)
회의 메모: Q4 roadmap 검토 — 다음 주 화요일

쓰임 예

각주
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.
콜아웃
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.
리드
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.
강조
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.
가운데 정렬
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.
좁은 행간
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.

이렇게 · 이렇게 하지 않기

이렇게 화면의 모든 글은 Text나 그 위에 만든 역할 컴포넌트로 쓴다. 13px 미만은 쓰지 않는다. 사용자가 쓴 원문은 번역하지 않고 lang 또는 dir="auto"를 붙인다.
이렇게 의미(요소)와 크기를 따로 정한다. 문장 안 강조는 span, 독립 문단은 p.
이렇게 긴 본문은 body 이상, 행간 normal 이상.
이렇게 하지 않기 사용자 원문을 번역하거나 언어를 추정해 lang을 붙이지 않는다.
이렇게 하지 않기 말줄임한 글을 title 툴팁으로 보충하지 않는다.
이렇게 하지 않기 12px 이하 글자를 만들지 않는다.

Apple HIG — 타이포그래피 ↗

토큰과 속성

이름	타입	기본값	설명
`size?`	`'footnote' \| 'callout' \| 'body' \| 'lead'`	`body`	역할 이름 크기. footnote도 13px 아래로 내려가지 않는다. 픽셀 값은 토큰이 정한다.
`weight?`	`'regular' \| 'medium' \| 'semibold'`	`regular`	굵기 3단계.
`tone?`	`'ink' \| 'muted'`	`ink`	muted는 보조 정보용. Material·Light·그라디언트 위에서는 쓰지 않는다.
`align?`	`'start' \| 'center' \| 'end'`	`start`	논리 방향 정렬. 양쪽 맞춤은 없다.
`leading?`	`'tight' \| 'normal' \| 'relaxed'`	`normal`	행간. 긴 본문은 normal 이상.
`lineClamp?`	`0 \| 1 \| 2 \| 3`	`0`	0 = 자르지 않음. CSS로만 자른다. 전문은 DOM에 남아 스크린리더가 읽는다. 전문을 볼 곳(상세)이 있어야 한다.
`italic?`	`boolean`	`false`	기울임.
`underline?`	`boolean`	`false`	밑줄. 링크로 오해되지 않게 드물게.
`strike?`	`boolean`	`false`	취소선. 뜻은 텍스트로도 전한다.
`as?`	`'p' \| 'span' \| 'div' \| 'label'`	`p`	렌더 요소. 제목 요소는 고를 수 없다(Title을 쓴다). label이면 htmlFor를 전달한다.
`children`	`ReactNode`	`기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.`	내용.
`ref`	—	—	ref는 렌더된 요소로 전달된다.
그 밖의 속성	—	—	id, lang, dir, aria-* 등 네이티브 속성은 그대로 전달된다. 사용자 원문은 dir="auto"를 준다. className·style은 받지 않는다.

개요

미리보기

예시 언어동작 줄이기

기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.

size

weight

tone

align

leading

lineClamp

italicunderlinestrike

as

children

예시

상태

본문
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.
보조 톤
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.
2줄 말줄임
10월 7일 회의록, 메일 3통, 캘린더 일정 1개에서 같은 프로젝트 이름이 나왔어요. 원문은 상세에서 그대로 볼 수 있어요. 정리 결과는 언제든 고칠 수 있어요.
가장 긴 문구 (es)
연결한 출처에서 읽은 기록만 여기에 보여요.
사용자 원문 (dir=auto)
회의 메모: Q4 roadmap 검토 — 다음 주 화요일

쓰임 예

각주
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.
콜아웃
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.
리드
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.
강조
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.
가운데 정렬
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.
좁은 행간
기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.

이렇게 · 이렇게 하지 않기

이렇게 화면의 모든 글은 Text나 그 위에 만든 역할 컴포넌트로 쓴다. 13px 미만은 쓰지 않는다. 사용자가 쓴 원문은 번역하지 않고 lang 또는 dir="auto"를 붙인다.

이렇게 의미(요소)와 크기를 따로 정한다. 문장 안 강조는 span, 독립 문단은 p.

이렇게 긴 본문은 body 이상, 행간 normal 이상.

이렇게 하지 않기 사용자 원문을 번역하거나 언어를 추정해 lang을 붙이지 않는다.

이렇게 하지 않기 말줄임한 글을 title 툴팁으로 보충하지 않는다.

이렇게 하지 않기 12px 이하 글자를 만들지 않는다.

토큰과 속성

이름	타입	기본값	설명
`size?`	`'footnote' \| 'callout' \| 'body' \| 'lead'`	`body`	역할 이름 크기. footnote도 13px 아래로 내려가지 않는다. 픽셀 값은 토큰이 정한다.
`weight?`	`'regular' \| 'medium' \| 'semibold'`	`regular`	굵기 3단계.
`tone?`	`'ink' \| 'muted'`	`ink`	muted는 보조 정보용. Material·Light·그라디언트 위에서는 쓰지 않는다.
`align?`	`'start' \| 'center' \| 'end'`	`start`	논리 방향 정렬. 양쪽 맞춤은 없다.
`leading?`	`'tight' \| 'normal' \| 'relaxed'`	`normal`	행간. 긴 본문은 normal 이상.
`lineClamp?`	`0 \| 1 \| 2 \| 3`	`0`	0 = 자르지 않음. CSS로만 자른다. 전문은 DOM에 남아 스크린리더가 읽는다. 전문을 볼 곳(상세)이 있어야 한다.
`italic?`	`boolean`	`false`	기울임.
`underline?`	`boolean`	`false`	밑줄. 링크로 오해되지 않게 드물게.
`strike?`	`boolean`	`false`	취소선. 뜻은 텍스트로도 전한다.
`as?`	`'p' \| 'span' \| 'div' \| 'label'`	`p`	렌더 요소. 제목 요소는 고를 수 없다(Title을 쓴다). label이면 htmlFor를 전달한다.
`children`	`ReactNode`	`기록은 바뀌지 않고, 정리는 언제든 다시 할 수 있어요.`	내용.
`ref`	—	—	ref는 렌더된 요소로 전달된다.
그 밖의 속성	—	—	id, lang, dir, aria-* 등 네이티브 속성은 그대로 전달된다. 사용자 원문은 dir="auto"를 준다. className·style은 받지 않는다.

개요

예시

상태

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

예시

상태

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기