AAtomic CSS

Typography

Controls font size, weight, style, line height, letter spacing, and more.

Font Size

Prefix: fs + number + unit

ClassCSS
fs12pxfont-size: 12px
fs14pxfont-size: 14px
fs16pxfont-size: 16px
fs18pxfont-size: 18px
fs2remfont-size: 2rem (20px)
fs2-4remfont-size: 2.4rem (24px)
fs3-2remfont-size: 3.2rem (32px)
fs4-8remfont-size: 4.8rem (48px)

Note: fs0 is flex-shrink: 0. font-size must always include a unit.

Font Weight

ClassCSS
fw100font-weight: 100 (Thin)
fw300font-weight: 300 (Light)
fw400font-weight: 400 (Normal)
fw500font-weight: 500 (Medium)
fw600font-weight: 600 (Semi Bold)
fw700font-weight: 700 (Bold)
fw800font-weight: 800 (Extra Bold)
fw900font-weight: 900 (Black)

Font Style

ClassCSS
fsnfont-style: normal
fsifont-style: italic
fsofont-style: oblique
fsinifont-style: initial
fsinhfont-style: inherit

Font Variant

ClassCSS
fvnfont-variant: normal
fvscfont-variant: small-caps
fvascfont-variant: all-small-caps

Font Kerning

ClassCSS
fkafont-kerning: auto
fknfont-kerning: none
fknlfont-kerning: normal

Line Height / Letter Spacing / Others

PrefixPropertyExample
lhline-heightlh1-7, lh2rem
lsletter-spacingls0-05em, ls1px
wsword-spacingws2px
titext-indentti2rem
tuotext-underline-offsettuo2px
tdttext-decoration-thicknesstdt2px
tbstab-sizetbs4