Typography

텍스트 스타일은 <Text> 컴포넌트의 variant로 지정합니다. 정해진 스타일만 사용하면 화면 전체의 타이포그래피가 일관되게 유지됩니다.

개요

각 스타일은 글꼴·크기·행간·굵기를 하나로 묶은 값이며, 크기와 용도에 따라 이름이 정해져 있습니다. 신규 화면에서는 아래 다섯 계열 중 하나를 사용합니다.

• 헤드라인: 페이지 최상단의 대형 제목 (headline-lg~headline-sm)
• 제목: 섹션·카드 제목 (title-2xl~title-xs, 일부에 중간 굵기 -medium 짝)
• 본문: 일반 UI 텍스트 (body-xl~body-sm, 강조는 -semibold)
• 보조: 라벨·헬프텍스트 등 작은 텍스트 (caption-lg~caption-sm, 강조는 -medium)
• 긴 글: 아티클·에디터 본문처럼 여러 줄을 이어 읽는 글 (contents-xl~contents-sm)

스타일

헤드라인

페이지 최상단에 쓰는 가장 큰 제목입니다.

제목

섹션·카드의 제목에 사용합니다.

본문

일반 UI 텍스트에 사용합니다.

보조

라벨·헬프텍스트 등 작은 텍스트에 사용합니다.

긴 글

여러 줄을 이어 읽는 아티클·에디터 본문에 사용합니다. body-*보다 행간이 넓고 화면 크기에 따라 변하지 않아 긴 글에 적합합니다.

사용법

기본: <Text> 컴포넌트에 variant를 지정합니다. 생략하면 기본값 body-xl이 적용됩니다.

import { Text } from '@mildang/design-system/Text';

<Text variant="title-lg">섹션 제목</Text>
<Text variant="body-md">본문 내용</Text>

스타일 조정: 색상 등 세부는 CSS 변수로 조정합니다. 다른 텍스트 스타일이 필요하면 variant를 바꿉니다.

.note {
  color: var(--ids-colors-neutral-text-low);
}

mildang-frontend 저장소에서 DS 소스를 직접 사용하는 경우에는 color·textStyle 같은 style prop으로도 개별 조정할 수 있습니다.

<Text variant="body-md" color="neutral.text.low">보조 설명 텍스트</Text>

부분 강조: 문장 일부만 강조할 때는 <b>로 감쌉니다. 굵기는 부모 variant가 결정하므로 따로 지정하지 않습니다.

<Text variant="body-md">
  중요한 <b>이 부분</b>만 굵게 표시됩니다.
</Text>

시맨틱 요소: variant는 시각 스타일만 지정합니다. 헤드라인처럼 보인다고 해서 실제 제목 요소가 되는 것은 아니므로, 제목에는 as로 의미에 맞는 태그(h1~h6)를 함께 지정해야 접근성과 SEO가 유지됩니다.

<Text as="h1" variant="headline-lg">페이지 제목</Text>
<Text as="h2" variant="title-lg">섹션 제목</Text>

권장 사항