Typography in general

Fonts are handled automatically once the CSS packages dnb-ui-core or dnb-ui-basis are loaded.

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

You don't need to define the font-family ever, but rather use CSS Custom Properties for font-weight, font-size and line-height.

Typography property tables

Font Face

The DNB default Font Family is DNB. This font, together with it's weights is loaded and imported with @font-face in /css/core/fonts.scss. The font family is included in the library package.

Spacing and margin collapsing

You can use the Spacing properties inside every Eufemia React Element, but keep in mind, margin collapsing can some times a little tricky to get right.

import { H1, H2, ... } from '@dnb/eufemia/elements'
<H1 bottom="x-large">Heading with bottom margin: x-large</H1>
<H2 top="x-large">Heading with top margin: x-large</H2>


Read more about the Anchor / Text Link

DNB Mono (monospace)

DNB hast it's own monospace typeface (font-family).

Use it either by a CSS class .dnb-typo-mono-regular or define your own like so:

.css-selector {
font-family: var(--font-family-monospace);
font-weight: normal;
font-style: normal;