Typography

DDS 타이포그래피 시스템은 일관된 텍스트 스타일을 제공합니다.

Installation

Terminal

$ pnpm add @b1nd/dodam-design-system/typography

Usage

Emotion (CSS-in-JS)

tsx

import { typoCss } from "@b1nd/dodam-design-system/typography/emotion";
import styled from "@emotion/styled";

const Title = styled.h1`
  ${typoCss("Title1", "Bold")}
`;

const Body = styled.p`
  ${typoCss("Body1", "Regular")}
`;

Tailwind CSS

css

/* globals.css */
@import "@b1nd/dodam-design-system/typography/tokens.tailwind.css";

tsx

// 사용 예시
<h1 className="text-title1 font-extrabold">제목</h1>
<p className="text-body1 font-normal">본문</p>

Typography Scale

Titles

대제목에 사용됩니다. ExtraBold, Medium, Regular weight를 지원합니다.

Title1 · 36px · ExtraBold

대시보드 디자인 시스템

Title2 · 28px · ExtraBold

대시보드 디자인 시스템

Title3 · 24px · ExtraBold

대시보드 디자인 시스템

Headings

섹션 제목에 사용됩니다. ExtraBold, Medium, Regular weight를 지원합니다.

Heading1 · 22px · ExtraBold

섹션 헤딩 텍스트

Heading2 · 20px · ExtraBold

섹션 헤딩 텍스트

Headline · 18px · Bold

섹션 헤딩 텍스트

Body

본문에 사용됩니다. SemiBold, Medium, Regular weight를 지원합니다.

Body1 · 16px · Regular

본문 텍스트입니다. 일반적인 문장에 사용됩니다.

Body2 · 15px · Regular

본문 텍스트입니다. 일반적인 문장에 사용됩니다.

Label & Caption

레이블, 캡션 등 작은 텍스트에 사용됩니다. SemiBold, Medium, Regular weight를 지원합니다.

Label · 14px · Medium

레이블 텍스트

Caption1 · 13px · Regular

캡션 텍스트입니다.

Caption2 · 12px · Regular

작은 캡션 텍스트입니다.

Token Reference

Typography Levels

Level	Size	Line Height	Letter Spacing	Weights
`Title1`	36px	130%	-0.03em	ExtraBold, Medium, Regular
`Title2`	28px	130%	-0.03em	ExtraBold, Medium, Regular
`Title3`	24px	130%	-0.03em	ExtraBold, Medium, Regular
`Heading1`	22px	130%	-0.02em	ExtraBold, Medium, Regular
`Heading2`	20px	140%	-0.01em	ExtraBold, Medium, Regular
`Headline`	18px	150%	0em	Bold, Medium, Regular
`Body1`	16px	150%	0.01em	SemiBold, Medium, Regular
`Body2`	15px	140%	0.01em	SemiBold, Medium, Regular
`Label`	14px	140%	0.02em	SemiBold, Medium, Regular
`Caption1`	13px	130%	0.03em	SemiBold, Medium, Regular
`Caption2`	12px	130%	0.03em	SemiBold, Medium, Regular

Font Weights

Weight	Value	Preview
`ExtraBold`	800	Typography
`Bold`	700	Typography
`SemiBold`	600	Typography
`Medium`	500	Typography
`Regular`	400	Typography

Examples

페이지 레이아웃

tsx

import styled from "@emotion/styled";
import { typoCss } from "@b1nd/dodam-design-system/typography/emotion";
import { colors } from "@b1nd/dodam-design-system/colors";

const PageTitle = styled.h1`
  ${typoCss("Title1", "Bold")}
  color: ${colors.text.primary};
`;

const SectionTitle = styled.h2`
  ${typoCss("Heading1", "Bold")}
  color: ${colors.text.primary};
`;

const Paragraph = styled.p`
  ${typoCss("Body1", "Regular")}
  color: ${colors.text.secondary};
`;

페이지 제목

섹션 제목

본문 텍스트입니다. 일반적인 설명이나 안내 문구에 사용됩니다.

카드 컴포넌트

tsx

import styled from "@emotion/styled";
import { typoCss } from "@b1nd/dodam-design-system/typography/emotion";

const CardTitle = styled.h3`
  ${typoCss("Headline", "Bold")}
`;

const CardDescription = styled.p`
  ${typoCss("Body2", "Regular")}
`;

const CardMeta = styled.span`
  ${typoCss("Caption1", "Regular")}
`;

카드 제목

카드 설명 텍스트입니다. 간단한 내용을 담습니다.

2025.01.11