The typography system defines a 12-level type scale and 3 font weights. Mobile and desktop automatically adapt to different font sizes via the @media (min-width: 1024px) breakpoint.
Type Scale
Font Weight
Regular400
ELFBAR Design System — The quick brown fox jumps over the lazy dog
--ds-font-weight-regularMedium500
ELFBAR Design System — The quick brown fox jumps over the lazy dog
--ds-font-weight-mediumSemibold600
ELFBAR Design System — The quick brown fox jumps over the lazy dog
--ds-font-weight-semiboldToken Reference
| Token Type | CSS Variable Format | Example |
|---|---|---|
| Font size | --ds-font-size-{scale} | --ds-font-size-body-md |
| Line height | --ds-font-height-{scale} | --ds-font-height-body-md |
| Font weight | --ds-font-weight-{weight} | --ds-font-weight-semibold |
| Font family | --ds-font-family-fonts | SF Pro / system font |