---
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.933Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Typography

<Intro>

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](/web/layout-and-typography/typography/css-reference), [font-size](/web/layout-and-typography/typography/font-size) and [line-height](/web/layout-and-typography/typography/css-reference).

```css
.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](/web/layout-and-typography/typography/#display-headlines) 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](/web/components/number-format).

Read [more about Typography](/web/layout-and-typography/typography)

---

<IntroFooter
  href="/web/get-started/guided-introduction/08-color-usage"
  text="Next - Color usage"
/>

</Intro>