타이포그래피

시스템 글꼴과 크기·행간·굵기 토큰으로 읽기 위계를 만듭니다.

목적

v0.1은 font/family/sans 시스템 스택을 사용합니다. 크기와 행간은 같은 이름의 단계로 조합하고, 굵기는 의미 있는 위계에만 사용합니다.

사용 문법

font-family: var(--ds-font-family-sans);
font-size: var(--ds-font-size-body);
line-height: var(--ds-font-line-height-body);

생성된 스케일

읽기 쉬운 문장이 제품의 결정을 돕습니다.

font/size/caption · 12px / 16px

읽기 쉬운 문장이 제품의 결정을 돕습니다.

font/size/body-sm · 14px / 20px

읽기 쉬운 문장이 제품의 결정을 돕습니다.

font/size/body · 16px / 24px

읽기 쉬운 문장이 제품의 결정을 돕습니다.

font/size/body-lg · 18px / 28px

읽기 쉬운 문장이 제품의 결정을 돕습니다.

font/size/title-sm · 20px / 28px

읽기 쉬운 문장이 제품의 결정을 돕습니다.

font/size/title · 24px / 32px

읽기 쉬운 문장이 제품의 결정을 돕습니다.

font/size/heading · 32px / 40px

읽기 쉬운 문장이 제품의 결정을 돕습니다.

font/size/display · 40px / 48px