Appearance
Typography
타이포그래피를 정의하는 목적은 일관성 있는 디자인을 구축하고, 글을 쉽게 읽을 수 있게 하며, 시각적으로 구분되는 계층을 만들고 브랜드 아이덴티티를 강화하며, 디자인 작업을 더욱 효율적으로 관리하는 데 있습니다.
Display
Display Large
Display Medium
Display Small
vue
<template>
<div class="typo-display-large">Display Large</div>
<div class="typo-display-medium">Display Medium</div>
<div class="typo-display-small">Display Small</div>
</template>Headline
Headline Large
Headline Medium
Headline Small
vue
<template>
<div class="typo-headline-large">Headline Large</div>
<div class="typo-headline-medium">Headline Medium</div>
<div class="typo-headline-small">Headline Small</div>
</template>Title
Title Large
Title Medium
Title Small
vue
<template>
<div class="typo-title-large">Title Large</div>
<div class="typo-title-medium">Title Medium</div>
<div class="typo-title-small">Title Small</div>
</template>Body
Body Large
Body Medium
Body Small
Body XSmall
Body Tiny
vue
<template>
<div class="typo-body-large">Body Large</div>
<div class="typo-body-medium">Body Medium</div>
<div class="typo-body-small">Body Small</div>
<div class="typo-body-xsmall">Body XSmall</div>
<div class="typo-body-tiny">Body Tiny</div>
</template>SourceCode
Source Code Large
Source Code Medium
Source Code Small
Source Code tiny
vue
<template>
<div class="typo-code-large">Source Code Large</div>
<div class="typo-code-medium">Source Code Medium</div>
<div class="typo-code-small">Source Code Small</div>
<div class="typo-code-tiny">Source Code tiny</div>
</template>