ssuport 디자인 시스템의 타이포그래피 사용 가이드입니다.

구조

타이포그래피는 Variant 방식으로 구성되어 있으며, 모든 스타일이 완성된 형태로 제공됩니다.

// 권장
${({ theme }) => theme.typography.variants.heading1}

// Alias 사용 (더 간편)
${({ theme }) => theme.typography.alias.h1}

기본 사용법

방법 1: Alias 사용 (권장)

가장 많이 사용되는 스타일에 짧은 이름이 제공됩니다.

import styled from '@emotion/styled';

const Title = styled.h1`
  ${({ theme }) => theme.typography.alias.h1};
  color: ${({ theme }) => theme.colors.text.primary};
`;

const Body = styled.p`
  ${({ theme }) => theme.typography.alias.body};
  color: ${({ theme }) => theme.colors.text.secondary};
`;

const Caption = styled.span`
  ${({ theme }) => theme.typography.alias.caption};
  color: ${({ theme }) => theme.colors.text.tertiary};
`;

방법 2: Variant 직접 사용

세밀한 제어가 필요한 경우 사용합니다.

const Title = styled.h2`
  ${({ theme }) => theme.typography.variants.heading2Bold};
`;

const Subtitle = styled.h2`
  ${({ theme }) => theme.typography.variants.heading2Semibold};
`;

방법 3: 토큰 직접 사용 (커스텀)

const CustomText = styled.span`
  font-family: ${({ theme }) => theme.typography.fontFamily.base};
  font-size: ${({ theme }) => theme.typography.fontSize[20]};
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
  line-height: ${({ theme }) => theme.typography.lineHeight.normal};
  letter-spacing: ${({ theme }) => theme.typography.letterSpacing.tight};
`;

일관성을 위해 Alias 또는 Variant 사용을 권장합니다.

Alias 목록

전체 Variant 목록

Heading1 (32px)

heading1 // Bold, 150%