---
version: 0.0.0-development
generatedAt: 2026-10-23T12:32:44.498Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

## Typography

The Figma brand exports supply Eufemia's font sizes and line heights. Use the existing `--font-size-*` and `--line-height-*` CSS properties; their values follow the selected brand. These properties are Eufemia's established typography API. Light and dark mode use the same typography values.

- [Font sizes](/uilib/typography/font-size/) – CSS properties, values by brand, and responsive sizes.
- [Line heights](/uilib/typography/line-height/) – CSS properties, values by brand, and responsive line heights.
- [Font weights](/uilib/typography/font-weight/) – the weight scale and its CSS properties.
- [Typography for designers](/quickguide-designer/fonts#typographic-elements) – DNB typographic examples.

Responsive typography uses these brand values at Eufemia's existing breakpoints. See the font-size and line-height tables for the values used by `<Typography.Context responsive>`.

### One brand stylesheet per page

Each brand stylesheet sets its font sizes and line heights on `:root`, so that apps can override them there. When a page loads the stylesheets of several brands, the brand that loads last sets the sizes for the whole page. For example, Carnegie's larger `xx-large` size then also applies to content inside `<Theme brand="ui">`. Colors and font families still follow each Theme.