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 (sample & token) |
|---|
| Font weights (sample & token) |
|---|
Regular CSS weight: 400 Sample ELFBAR Design System — The quick brown fox jumps over the lazy dog |
Medium CSS weight: 500 Sample ELFBAR Design System — The quick brown fox jumps over the lazy dog |
Semibold CSS weight: 600 Sample ELFBAR Design System — The quick brown fox jumps over the lazy dog |
| 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 |