Font family
AaBb
가나다
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 ,./(){}[]\|:;"'?
가나다라마바사
abcdefghijklmnopqrstuvwxyz
1234567890 ,./(){}[]\|:;"'?
가나다라마바사
Font weight
| Name | Class name | Usage |
|---|---|---|
| Light | light | Frontend render on Grid |
| Regular | - | Frontend render on Grid |
| Bold | bold | Frontend render on Grid |
| Bolder | bolder | Frontend render on Grid |
<div class="light"></div>
<div class="bold"></div>
<div class="bolder"></div>
Letter spacing
| Name | Class name | Usage |
|---|---|---|
| Wider | spacing-wider | Frontend render on Grid |
| Wide | spacing-wide | Frontend render on Grid |
| Normal | - | Frontend render on Grid |
| Narrow | spacing-narrow | Frontend render on Grid |
| Narrower | spacing-narrower | Frontend render on Grid |
<div class="light"></div>
<div class="bold"></div>
<div class="bolder"></div>
Heading
[H1]Frontend renders on grid
[H2]Frontend renders on grid
[H3]Frontend renders on grid
[H4]Frontend renders on grid
[H5]Frontend renders on grid
<h1>...</h1>
<div class="h1 header">...</div>
<div class="h2 header">...</div>
Hero
FROG
Frontend renders on grid
<div class="hero large">...</div>
<div class="heror">...</div>
Size
[Tiny]Frontend renders on grid
[Small]Frontend renders on grid
[Medium]Frontend renders on grid
[Large]Frontend renders on grid
[Huge]Frontend renders on grid
[Massive]Frontend renders on grid
<div class="tiny">...</div>
<div class="small">...</div>
<div class="medium">...</div>
<div class="large">...</div>
<div class="huge">...</div>
<div class="massive">...</div>