Skip to content
HHydro UIdocs
Navigate
FoundationHydro UI

Typography

A platform-friendly scale for product UI and code.

Families

  • --hui-font-family-sans is the default UI and body family.
  • --hui-font-family-mono is for code, tokens, and technical values.

Type scale

TokenValueUse
--hui-font-size-xs0.75remCompact metadata.
--hui-font-size-sm0.875remSupporting text and controls where space is limited.
--hui-font-size-md1remBody and default control text.
--hui-font-size-lg1.125remLead or emphasized body text.
--hui-font-size-xl1.25remSubheadings.
--hui-font-size-2xl1.5remPage/fixture headings.

Weights and line heights

PurposeToken
Regular--hui-font-weight-regular
Medium--hui-font-weight-medium
Semibold--hui-font-weight-semibold
Bold--hui-font-weight-bold
Tight--hui-line-height-tight
Normal--hui-line-height-normal
Relaxed--hui-line-height-relaxed

Use a size, weight, and line-height token together. Do not use a raw font-size, numeric font-weight, or numeric line-height in component CSS. The system font stack is deliberately platform-friendly and does not require a webfont download.