타이포그래피
폰트 크기, 굵기, 스타일, 줄 높이, 자간 등을 제어합니다.
Font Size
프리픽스: fs + 숫자 + 단위
| 클래스 | CSS |
|---|
fs12px | font-size: 12px |
fs14px | font-size: 14px |
fs16px | font-size: 16px |
fs18px | font-size: 18px |
fs2rem | font-size: 2rem (20px) |
fs2-4rem | font-size: 2.4rem (24px) |
fs3-2rem | font-size: 3.2rem (32px) |
fs4-8rem | font-size: 4.8rem (48px) |
주의: fs0은 flex-shrink: 0입니다. font-size는 반드시 단위를 포함하세요.
Font Weight
| 클래스 | CSS |
|---|
fw100 | font-weight: 100 (Thin) |
fw300 | font-weight: 300 (Light) |
fw400 | font-weight: 400 (Normal) |
fw500 | font-weight: 500 (Medium) |
fw600 | font-weight: 600 (Semi Bold) |
fw700 | font-weight: 700 (Bold) |
fw800 | font-weight: 800 (Extra Bold) |
fw900 | font-weight: 900 (Black) |
Font Style
| 클래스 | CSS |
|---|
fsn | font-style: normal |
fsi | font-style: italic |
fso | font-style: oblique |
fsini | font-style: initial |
fsinh | font-style: inherit |
Font Variant
| 클래스 | CSS |
|---|
fvn | font-variant: normal |
fvsc | font-variant: small-caps |
fvasc | font-variant: all-small-caps |
Font Kerning
| 클래스 | CSS |
|---|
fka | font-kerning: auto |
fkn | font-kerning: none |
fknl | font-kerning: normal |
Line Height / Letter Spacing / 기타
| 프리픽스 | 속성 | 예시 |
|---|
lh | line-height | lh1-7, lh2rem |
ls | letter-spacing | ls0-05em, ls1px |
ws | word-spacing | ws2px |
ti | text-indent | ti2rem |
tuo | text-underline-offset | tuo2px |
tdt | text-decoration-thickness | tdt2px |
tbs | tab-size | tbs4 |