All Typography Styles

Comprehensive

모든 타이포그래피 스타일을 한 번에 확인

Preview

Headlines

Headline 1 - 가장 큰 제목 (26px, Regular) - typography-headline1
Headline 1 Bold - 가장 큰 제목 (26px, Bold) - typography-headline1-bold
Headline 2 - 중간 제목 (24px, Regular) - typography-headline2
Headline 2 Bold - 중간 제목 (24px, Bold) - typography-headline2-bold
Headline 3 - 작은 제목 (22px, Regular) - typography-headline3
Headline 3 Bold - 작은 제목 (22px, Bold) - typography-headline3-bold

Body Text

Body 1 - 큰 본문 텍스트입니다 (16px, Regular). 주요 콘텐츠나 중요한 설명에 사용됩니다. - typography-body1
Body 1 Bold - 큰 본문 텍스트 (16px, Bold)입니다. 강조가 필요한 부분에 사용합니다. - typography-body1-bold
Body 2 - 작은 본문 텍스트입니다 (14px, Regular). 보조 설명이나 부가 정보에 사용됩니다. - typography-body2
Body 2 Bold - 작은 본문 텍스트 (14px, Bold)입니다. - typography-body2-bold

Captions

Caption 1 - 캡션이나 라벨 텍스트 (12px, Regular) - typography-caption1
Caption 1 Bold - 캡션이나 라벨 텍스트 (12px, Bold) - typography-caption1-bold
Caption 2 - 가장 작은 캡션 텍스트 (11px, Regular) - typography-caption2
Caption 2 Bold - 가장 작은 캡션 텍스트 (11px, Bold) - typography-caption2-bold

Code Example


      <div className="space-y-6">
        <section>
          <h3 className="text-lg font-semibold mb-4">Headlines</h3>
          <div className="space-y-3">
            <div className="typography-headline1">Headline 1</div>
            <div className="typography-headline2-bold">Headline 2 Bold</div>
            {/* ... 더 많은 스타일들 */}
          </div>
        </section>
      </div>
    

다른 스토리 보기