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
| Scale | Preview | Size / Height |
|---|
Font Weight
Regular
400ELFBAR Design System — The quick brown fox jumps over the lazy dog
Medium
500ELFBAR Design System — The quick brown fox jumps over the lazy dog
Semibold
600ELFBAR Design System — The quick brown fox jumps over the lazy dog
Token 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 |