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 – CSS properties, values by brand, and responsive sizes.
- Line heights – CSS properties, values by brand, and responsive line heights.
- Font weights – the weight scale and its CSS properties.
- Typography for designers – 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.