Typography

Font styles and text formatting

Typography System

Podo UI provides Display, Paragraph, and Heading styles, each automatically adjusted for mobile environments. Pretendard is used as the default font.

Display Styles

Display styles used for large headings and hero sections.

Paragraph Styles

Paragraph styles used for body text and descriptions.

Heading Styles

Styles automatically applied to default HTML tags.

Using with CSS Classes

You can directly apply typography classes to HTML elements:

<!-- Display 스타일 -->
<div class="display1">대형 제목</div>
<div class="display4">중형 제목</div>
<div class="display7">소형 제목</div>

<!-- Paragraph 스타일 -->
<p class="p1">큰 본문 텍스트</p>
<p class="p3">일반 본문 텍스트</p>
<p class="p3-semibold">강조된 본문 텍스트</p>
<p class="p5">작은 본문 텍스트</p>

Using in SCSS

You can apply typography using mixins in SCSS modules:

@use 'podo-ui/mixin' as *;

.title {
  @include display3;
  margin-bottom: s(5);
}

.subtitle {
  @include display6;
  color: color(default-deep);
}

.body {
  @include p3;
  line-height: 1.8;
}

.caption {
  @include p5;
  color: color(default);
}

Font Family

Pretendard is used as the default font, customizable via CSS variables:

:root {
  --base-font-family: 'Pretendard', sans-serif;
}

/* 커스텀 폰트 사용 */
:root {
  --base-font-family: 'Your Custom Font', -apple-system, sans-serif;
}

Responsive

All typography styles automatically adjust for mobile environments.