Typography
글자 스타일은 읽기 쉽고 조화로운 화면을 만들고, 정보의 구조를 드러내요.
heading.xxlarge프로젝트 일정 공유32px/36pxheading.xlarge프로젝트 일정 공유28px/32pxheading.large프로젝트 일정 공유24px/28pxheading.medium프로젝트 일정 공유20px/24pxheading.small프로젝트 일정 공유16px/20pxheading.xsmall프로젝트 일정 공유14px/20pxheading.xxsmall프로젝트 일정 공유12px/16pxbody.large이번 주 검토 중인 이슈를 확인해 주세요.16px/24pxbody이번 주 검토 중인 이슈를 확인해 주세요.14px/20pxbody.small이번 주 검토 중인 이슈를 확인해 주세요.12px/16px원칙
- 읽기 쉽게 — 정보가 많은 협업 화면에서도 글이 편하게 읽히도록 크기와 행간을 맞췄어요.
- 조화롭게 — 제목과 본문의 크기·굵기 차이로 시각적 위계를 만들어요.
- 맥락에 맞게 — 긴 글, 컴포넌트 안의 짧은 레이블, 숫자 지표처럼 쓰임새마다 다른 스타일을 써요.
텍스트 스타일과 토큰
글자 토큰 하나에 크기·행간·굵기·서체가 함께 들어 있어요. CSS font 단축 속성 값이라서 Tailwind 에서는 ds-font-* 유틸 하나로 적용해요.
<h2 className="ds-font-heading-medium text-ds-text">스프린트 계획</h2>
<p className="ds-font-body text-ds-text-subtle">담당자를 지정하면 이슈가 보드에 표시돼요.</p>크기와 행간은 rem 기준으로 정해져 있어요(1rem = 16px). 사용자가 브라우저 글자 크기를 키우면 함께 커져서 접근성에 도움이 돼요.
Heading
큰 제목(xxlarge · xlarge · large)은 bold(653), 작은 제목(medium · small · xsmall · xxsmall)은 medium(500) 굵기예요. Steel 은 최신 Atlassian 모습(FY27 Finesse)을 따라서, 작은 제목을 예전보다 가볍게 써요.
| 토큰 | 미리보기 | 크기 / 행간 | 굵기 | 설명 |
|---|---|---|---|---|
| 스프린트 계획 | 32px / 36px 2rem / 2.25rem | 653 | 브랜드·홍보 성격의 가장 큰 제목For overlapping brand with app promotions, such as marketplace content. Migrate instances of H900 to Heading XXL. | |
| 스프린트 계획 | 28px / 32px 1.75rem / 2rem | 653 | 브랜드·홍보, 큰 페이지 제목For overlapping brand with app promotions, such as marketplace content. Migrate instances of H800 to Heading XL. | |
| 스프린트 계획 | 24px / 28px 1.5rem / 1.75rem | 653 | 폼 같은 앱 페이지 제목App page titles, such as forms. Migrate instances of H700 to Heading L. | |
| 스프린트 계획 | 20px / 24px 1.25rem / 1.5rem | 500 | 모달 다이얼로그처럼 큰 컴포넌트의 제목Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M. | |
| 스프린트 계획 | 16px / 20px 1rem / 1.25rem | 500 | 플래그처럼 공간이 좁은 컴포넌트 제목For headers in small components where space is limited. Migrate instances of H500 to Heading S. | |
| 스프린트 계획 | 14px / 20px 0.875rem / 1.25rem | 500 | 작은 컴포넌트 제목For headers in small components where space is limited. Migrate instances of H400 to Heading XS. | |
| 스프린트 계획 | 12px / 16px 0.75rem / 1rem | 500 | 작은 글씨·좁은 공간의 제목. 아껴 써요For headers in fine print or tight spaces. Use sparingly. Migrate instances of H100, H200 and H300 to Heading XXS. |
| 크기 | 쓰는 곳 |
|---|---|
xxlarge, xlarge | 브랜드·홍보 성격의 화면 |
xlarge, large | 폼 같은 페이지 제목 |
medium | 모달처럼 큰 컴포넌트의 제목 |
small, xsmall | 플래그처럼 작은 컴포넌트의 제목 |
xxsmall | 작은 글씨와 함께 쓰는 좁은 공간의 제목. 아껴 써요 |
Body
본문은 기본 regular(400) 굵기예요.
| 토큰 | 미리보기 | 크기 / 행간 | 굵기 | 설명 |
|---|---|---|---|---|
| 담당자를 지정하면 이슈가 보드에 표시돼요. | 16px / 24px 1rem / 1.5rem | 400 | 블로그 같은 긴 글For long-form text, such as in blogs. | |
| 담당자를 지정하면 이슈가 보드에 표시돼요. | 14px / 20px 0.875rem / 1.25rem | 400 | 컴포넌트와 짧은 설명의 기본 본문Use in short descriptions or labels. The default size for text in components. Migrate instances of Paragraph Default and UI Text to Body M. | |
| 담당자를 지정하면 이슈가 보드에 표시돼요. | 12px / 16px 0.75rem / 1rem | 400 | 작은 글씨, 의미 메시지 같은 보조 내용Use in secondary level content such as fine print or semantic messaging. Use sparingly. Migrate instances of Small text to Body S. |
body.large— 문서, 블로그처럼 긴 글을 읽을 때 기본이에요.body— 컴포넌트 안이나 공간이 좁을 때 기본이에요.body.small— 작은 글씨, 의미 메시지 같은 보조 내용에만 아껴서 써요.
문단 간격은 토큰에 들어 있지 않아요. 코드에서는 문단마다 텍스트 요소를 따로 두고 gap-ds-* 같은 간격으로 사이를 띄워요. 권장 문단 간격은 body.large 16px, body 12px, body.small 8px 이에요.
Metric
숫자를 강조할 때만 써요. 도넛 차트 가운데의 숫자, 단일 값 타일처럼요.
| 토큰 | 미리보기 | 크기 / 행간 | 굵기 | 설명 |
|---|---|---|---|---|
| 1,284 | 28px / 32px 1.75rem / 2rem | 653 | 큰 도넛 차트 안의 숫자Use to emphasize a number within a large donut. | |
| 1,284 | 24px / 28px 1.5rem / 1.75rem | 653 | 중간 도넛 차트 안의 숫자Use to emphasize a number within a medium donut. | |
| 1,284 | 16px / 20px 1rem / 1.25rem | 653 | 단일 값 타일의 숫자Use to emphasize a number and words in single-value tiles, or small donuts. |
Code
코드 블록 컴포넌트와 인라인 코드 전용이에요. 크기가 0.875em 이라서 주변 글자 크기를 따라가요. 14px 본문 안에서는 12.25px 로 보여요.
| 토큰 | 미리보기 | 크기 / 행간 | 굵기 | 설명 |
|---|---|---|---|---|
| const issue = await getIssue("PRJ-42"); | 0.875em / 1 0.875em / 1 | 400 | 인라인·블록 코드 전용For representing code only, either inline or in code blocks. |
굵기
| 토큰 | 값 | 미리보기 | 설명 |
|---|---|---|---|
| 400 | 담당자 변경됨 | 본문 기본 굵기Default font weight for body text styles. | |
| 500 | 담당자 변경됨 | 버튼처럼 아이콘 옆에 놓이는 텍스트For all text that may appear beside iconography, such as in a button. | |
| 600 | 담당자 변경됨 | 대체 서체가 지원하지 않을 수 있어 주의해서 사용Use with caution as fallback fonts do not support this font weight and will default to bold weight. | |
| 653 | 담당자 변경됨 | 로젠지처럼 강조가 필요할 때 아껴서Use sparingly for emphasising text, such as in a lozenge. |
회의록을 정리해서 프로젝트 페이지에 올려 두었어요.
- 제목 — 토큰에 든 굵기(큰 제목 bold, 작은 제목 medium)를 그대로 써요. 따로 덮어쓰지 않아요.
- 본문 — 일반 문단은 regular, 대부분의 컴포넌트와 선 아이콘 옆 텍스트는 medium, 아주 드물게 강조가 필요할 때만 bold 를 써요.
- 지표 — bold, 코드 — regular.
font-ds-* 유틸을 ds-font-* 와 함께 쓰면 굵기만 바꿀 수 있어요.
<span className="ds-font-body font-ds-medium">담당자 지정</span>서체
| 토큰 | 서체 스택 | 설명 |
|---|---|---|
UI 제목 서체For our default UI heading text. | ||
UI 본문 서체For our default UI body text. | ||
코드 서체For representing code only. | ||
브랜드 제목 서체For our brand heading text. | ||
브랜드 본문 서체For our brand body text. |
Inter 로 대체한 이유
원본 디자인 시스템은 자체 전용 서체를 쓰는데, 이 서체는 라이선스상 다른 제품에서 쓸 수 없어요. Steel 은 비슷한 인상의 오픈 라이선스 서체인 Inter 를 쓰고, 한글은 Pretendard 로 이어지도록 서체 스택을 구성했어요. 코드에는 JetBrains Mono 를 써요. 크기·행간·굵기 값은 원본 토큰과 같아요.
굵기 653 은 가변 서체(variable font)에서 정확히 표현되고, 가변 서체가 없는 환경에서는 가장 가까운 bold 로 보여요. font.weight.semibold(600)는 대체 서체에서 지원되지 않을 수 있어 주의해서 써요.
사용 규칙
섹션을 시작할 때 heading 스타일과 실제 제목 요소(h1~h6)를 함께 써요.
bold 본문은 화면 읽기 프로그램에 제목으로 전달되지 않아요.
- 한 페이지에
h1은 하나만 둬요. 보통 페이지 제목이에요. - 제목 단계는 순서대로 내려가고 건너뛰지 않아요. 보이는 크기와 제목 단계는 따로 정할 수 있어요.
- bold,
heading.xxsmall,body.small은 아껴 써요. - 코드 스타일은 코드 블록과 인라인 코드 밖에서 쓰지 않아요.
- 글자 색은 Color 의
color.text.*토큰과 함께 써요.
접근성
- rem 기반 크기라서 사용자가 글자 크기를 원하는 대로 조절할 수 있어요.
- 올바른 제목 단계는 화면 읽기 프로그램 사용자가 페이지를 훑고 이동하는 길잡이가 돼요.
- 본문 텍스트는 배경과 4.5 : 1 이상의 대비를 지켜요.
color.text.subtlest도 기본 표면에서 이 기준을 통과해요.