Typography

타이포그래피를 정의하는 목적은 일관성 있는 디자인을 구축하고, 글을 쉽게 읽을 수 있게 하며, 시각적으로 구분되는 계층을 만들고 브랜드 아이덴티티를 강화하며, 디자인 작업을 더욱 효율적으로 관리하는 데 있습니다.

Display

Display Large

Display Medium

Display Small

<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

<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

<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

<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 (deprecate)

Source Code Large

Source Code Medium

Source Code Small

Source Code tiny

<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>

InlineCode

Inline Code Large

Inline Code Medium

Inline Code Small

Inline Code XSmall

Inline Code Tiny

<template>
    <div class="typo-inlinecode-large">Inline Code Large</div>
    <div class="typo-inlinecode-medium">Inline Code Medium</div>
    <div class="typo-inlinecode-small">Inline Code Small</div>
    <div class="typo-inlinecode-xsmall">Inline Code XSmall</div>
    <div class="typo-inlinecode-tiny">Inline Code Tiny</div>
</template>

CodeBlocks

Code Blocks Large

Code Blocks Medium

Code Blocks Small

Code Blocks XSmall

Code Blocks Tiny

<template>
    <div class="typo-codeblocks-large">Code Blocks Large</div>
    <div class="typo-codeblocks-medium">Code Blocks Medium</div>
    <div class="typo-codeblocks-small">Code Blocks Small</div>
    <div class="typo-codeblocks-xsmall">Code Blocks XSmall</div>
    <div class="typo-codeblocks-tiny">Code Blocks Tiny</div>
</template>