Skip to content

Typography

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.

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

The default font-weight is currently Book, alongside Demi and Medium.

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


Next - Color usageCancel