Typography#

Fonts are registered by the selected brand basis stylesheet. Load it together with dnb-ui-core or dnb-ui-basis.

Every typography HTML element, like headings and paragraphs, have a defined height, respective line-height so everything falls exactly into the 8 pixel grid.

Eufemia selects the brand's text font automatically. For everyday content you don't need to define the font-family, but rather use CSS Custom Properties for font-weight, font-size and line-height.

.selector {
  font-weight: var(--font-weight-medium);
}

The default DNB typeface is DNB Sans Text Regular. Text and Mono include Light, Regular, Medium and Bold with italics. Follow the Eufemia Web Figma library for UI typography: button labels use Regular, and Lead and headings use Medium. Display is experimental and opt-in for short, expressive headlines.

The default font lining is Proportional Lining. But in some circumstances you may use, alongside with the UX designer, Tabular Lining.

Read more about Typography