Skip to Content
FoundationsFoundationTypography (타이포그래피)

Typography (타이포그래피)

Foundation의 타이포그래피 시스템은 일관된 텍스트 스타일을 제공하여 가독성과 계층 구조를 명확하게 표현합니다.

타이포그래피 철학

Foundation의 타이포그래피는 다음 원칙을 따릅니다:

  • Readability First: 가독성을 최우선으로 고려
  • Consistency: 일관된 폰트 크기 및 행간 사용
  • Hierarchy: 명확한 시각적 계층 구조
  • Flexibility: 프로젝트 요구사항에 맞게 커스터마이징 가능

Font Size (폰트 크기)

Foundation은 12px부터 32px까지 7단계 폰트 크기를 제공합니다.

실제 토큰 값 (core.css)

@theme {
  /* Typography - Font Size */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
}

사용 가이드

토큰크기사용 사례Tailwind Class
xs12pxCaption, Helper Texttext-xs
sm14pxSmall Text, Labeltext-sm
base16pxBody Text (기본)text-base
lg18pxLead Paragraphtext-lg
xl20pxHeading 3text-xl
2xl24pxHeading 2text-2xl
3xl32pxHeading 1, Hero Titletext-3xl

예제

<div>
  <h1 className="text-3xl font-bold">Main Heading (32px)</h1>
  <h2 className="text-2xl font-semibold">Sub Heading (24px)</h2>
  <h3 className="text-xl font-semibold">Section Title (20px)</h3>
  <p className="text-base">Body text paragraph (16px)</p>
  <p className="text-sm text-gray-500">Secondary text (14px)</p>
  <p className="text-xs text-gray-400">Caption text (12px)</p>
</div>

Font Weight (폰트 가중치)

Foundation은 4단계 폰트 가중치를 제공합니다.

실제 토큰 값 (core.css)

@theme {
  /* Typography - Font Weight */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

사용 가이드

토큰값사용 사례Tailwind Class
normal400Body Textfont-normal
medium500강조 텍스트font-medium
semibold600Heading 3font-semibold
bold700Heading 1, 2font-bold

예제

<div>
  <p className="font-normal">Normal text (400)</p>
  <p className="font-medium">Medium text (500)</p>
  <p className="font-semibold">Semibold text (600)</p>
  <p className="font-bold">Bold text (700)</p>
</div>

Line Height (행간)

Foundation은 3단계 행간을 제공합니다.

실제 토큰 값 (core.css)

@theme {
  /* Typography - Line Height */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}

사용 가이드

토큰값사용 사례Tailwind Class
tight1.25Heading, Titleleading-tight
normal1.5Body Text (기본)leading-normal
relaxed1.75Long Form Contentleading-relaxed

예제

<div>
  <h1 className="text-3xl font-bold leading-tight">Tight Line Height (1.25)</h1>
  <p className="text-base leading-normal">
    Normal line height (1.5) for body text. This is the default line height and
    provides good readability for paragraphs.
  </p>
  <p className="text-base leading-relaxed">
    Relaxed line height (1.75) for long-form content. This provides more
    breathing room between lines and is ideal for articles or documentation.
  </p>
</div>

Font Family (폰트 패밀리)

Foundation은 System Font Stack을 기본으로 사용합니다.

기본 폰트 스택

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
  Arial, sans-serif;

커스터마이징 (한글 폰트 적용)

// tailwind.config.ts
export default {
  presets: [foundationPreset],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Pretendard", "system-ui", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"],
      },
    },
  },
};

Pretendard 폰트 로드

/* src/index.css */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

타이포그래피 스케일

Heading Scale

HeadingFont SizeFont WeightLine Height사용 사례
H132px (3xl)Bold (700)Tight (1.25)Page Title
H224px (2xl)Semibold (600)Tight (1.25)Section Title
H320px (xl)Semibold (600)Normal (1.5)Subsection
H418px (lg)Medium (500)Normal (1.5)Card Title
H516px (base)Medium (500)Normal (1.5)List Item
H614px (sm)Medium (500)Normal (1.5)Label

Body Scale

용도Font SizeFont WeightLine Height
Lead18px (lg)Normal (400)Relaxed (1.75)
Body16px (base)Normal (400)Normal (1.5)
Small14px (sm)Normal (400)Normal (1.5)
Caption12px (xs)Normal (400)Normal (1.5)

사용 방법

CSS Variables로 사용

h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}
 
p {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

Tailwind Utility Classes로 사용

<div>
  <h1 className="text-3xl font-bold leading-tight">Title</h1>
  <p className="text-base font-normal leading-normal">Paragraph</p>
</div>

TypeScript/TSX에서 사용

export default function Article() {
  return (
    <article className="max-w-2xl mx-auto">
      <h1 className="text-3xl font-bold leading-tight text-gray-900 mb-4">
        Article Title
      </h1>
      <p className="text-lg font-normal leading-relaxed text-gray-600 mb-6">
        Lead paragraph with larger font size and relaxed line height.
      </p>
      <p className="text-base font-normal leading-normal text-gray-700 mb-4">
        Body paragraph with normal font size and line height. This is the
        default text style for most content.
      </p>
      <p className="text-sm font-normal leading-normal text-gray-500">
        Smaller secondary text for additional information.
      </p>
    </article>
  );
}

접근성 고려사항

최소 폰트 크기

  • 모바일: 최소 14px (sm) 이상 사용
  • 데스크톱: 최소 16px (base) 이상 사용
  • 작은 텍스트: 12px (xs)는 Caption, Helper Text에만 사용

줄 길이 (Line Length)

  • 최적: 50-75자 (한글 기준 25-35자)
  • 최대: 90자 (한글 기준 45자)
<p className="text-base max-w-2xl">
  Content with optimal line length for readability
</p>

텍스트 대비

  • 일반 텍스트: 최소 4.5:1 대비
  • 큰 텍스트 (18px+): 최소 3:1 대비

실전 예제

Hero Section

export default function Hero() {
  return (
    <section className="py-20 text-center">
      <h1 className="text-3xl font-bold leading-tight text-gray-900 mb-4">
        Welcome to Vortex UI
      </h1>
      <p className="text-lg font-normal leading-relaxed text-gray-600 max-w-2xl mx-auto">
        Build beautiful, accessible interfaces with our design system
      </p>
    </section>
  );
}

Card with Typography Hierarchy

export default function ProductCard() {
  return (
    <div className="p-6 bg-white border border-gray-200 rounded-lg">
      <span className="text-xs font-medium text-gray-500 uppercase">
        Category
      </span>
      <h3 className="text-xl font-semibold text-gray-900 mt-2">Product Name</h3>
      <p className="text-base font-normal text-gray-700 mt-3 leading-relaxed">
        Product description with optimal line height for readability
      </p>
      <p className="text-sm font-normal text-gray-500 mt-4">
        Additional information in smaller text
      </p>
    </div>
  );
}

다음 단계

Last updated on
Spacing (간격)iCignal 디자인 토큰