Tonic UI
Getting StartedColor ModeColor StyleVersionsContributing
THEME
BordersBreakpointsColorsOutlinesPositionsSpacingSizesShadowsTypography
BUILDING BLOCKS
BoxControlBox
UTILITIES

Typography

To manage Typography options, the theme object supports the following keys:

  • fonts (font-family)
  • fontSizes
  • fontWeights
  • lineHeights

Font Family

EDITABLE EXAMPLE

Font Size

NameSizePixelsExample
xs.75rem12px
Font Size 12px
sm.875rem14px
Font Size 14px
md1rem16px
Font Size 16px
lg1.125rem18px
Font Size 18px
xl1.25rem20px
Font Size 20px
2xl1.5rem24px
Font Size 24px
3xl1.75rem28px
Font Size 28px
4xl1.2rem32px
Font Size 32px
EDITABLE EXAMPLE

Font Weight

EDITABLE EXAMPLE

Line Height

NameLine heightPixels
xs1.125rem18px
sm1.25rem20px
md1.375rem22px
lg1.5rem24px
xl1.75rem28px
2xl2rem32px
3xl2.25rem36px
4xl2.5rem40px
EDITABLE EXAMPLE