타이포그래피 · Tinyrack Design System

위계 선택

읽는 순서를 먼저 정한 뒤 그 순서를 표현하는 가장 작은 역할을 선택하세요. displayLg는 브랜드나 캠페인을 대표하는 강한 문장에만 사용하고, 그 밖의 드문 페이지 수준 문장에는 display를 사용해요. 제목 역할은 중첩 섹션에, body와 bodySm은 본문에, caption은 보조 정보에, label은 짧은 식별자에 사용해요.

글자 역할

클러스터 상태와 용량caption

랙 상태label

클러스터 상태와 용량body

클러스터 상태와 용량bodySm

rack.deploy()code

클러스터 상태와 용량headingSm

클러스터 상태와 용량headingMd

클러스터 상태와 용량headingLg

클러스터 상태와 용량display

클러스터 상태와 용량displayLg

줄 길이와 현지화

문단은 훑어보기 좋은 너비로 제한하고 레이블은 늘어날 수 있게 만드세요. 한국어와 일본어는 영어와 다른 위치에서 줄바꿈될 수 있어요. 영어 문자열을 기준으로 너비를 고정하거나 설명 문장을 한 줄로 강제하지 마세요. 대문자 자간은 짧은 라틴 레이블에만 사용하고 한국어 본문에는 적용하지 마세요.

적용 예시

랙 A

클러스터 상태

모든 노드가 응답하고 있어요. 다음 백업은 03:18에 시작해요.

2분 전에 업데이트

폰트 로딩 책임

Tinyrack 코어는 body와 heading 토큰에 "IBM Plex Sans"를, mono 토큰에 "IBM Plex Mono"를 글꼴 모음 이름으로만 선언해요. 폰트 파일을 제공하거나 불러오지 않아요. 사용하는 앱에서 필요한 굵기와 언어별 하위 집합을 불러와야 해요. 이 문서 앱은 IBM Plex Sans와 한국어·일본어 글꼴 모음, 그리고 IBM Plex Mono를 불러와요.

code나 TRCode, TRCodeBlock, TRFileTree를 렌더링하는 곳에서는 IBM Plex Mono를 불러오세요. mono 토큰은 일반 monospace 모음으로 대체되도록 되어 있어서, 웹폰트가 도착하기 전에도 고정폭이 유지돼요.

구현과 참고

@import "@tinyrack/ui/core.css";
.rack-title { font: var(--tinyrack-weight-heading) var(--tinyrack-text-2xl) / var(--tinyrack-leading-sm) var(--tinyrack-font-heading); }

역할	크기	줄 높이	굵기	자간
caption	`0.75rem`	`1.2`	`400`	`0`
label	`0.75rem`	`1`	`700`	`0.08em`
body	`1rem`	`1.5`	`400`	`0`
bodySm	`0.875rem`	`1.5`	`400`	`0`
code	`0.875rem`	`1.65`	`400`	`0`
headingSm	`1.125rem`	`1.2`	`650`	`0`
headingMd	`1.5rem`	`1.2`	`650`	`0`
headingLg	`1.875rem`	`1.2`	`650`	`0`
display	`2.75rem`	`1.2`	`650`	`0`
displayLg	`3.5rem`	`1`	`650`	`0`

Tailwind 타이포그래피 매핑도 확인하세요.