Typography

Typography components

The two main components used to set typography are:

Span
P

(Lead and Ingress also works in the same way)

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

Typography Examples

Heading xx-large

Dette er en heading på over to linjer

Heading x-large

Og dette er en heading small tittel som også går over to linjer, nei vent, tre linjer.

Heading large

Hva har vi her, en liten heading som mot alle odds går over flere linjer.

Text Lead

Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei, appetere oporteat eam te.

Text basis

Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei, appetere oporteat eam te. Vel in deleniti sensibus, officiis menandri efficiantur no cum. Per et habemus gubergren. Mundi copiosae pertinax ea pro, vidit fierent mentitum in est, ex fabellas senserit inciderint vim.

Text basis (Medium)

Text small

Text small (Medium)

Text x-small

Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei.

Text x-small (Medium)

Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei.

Font Face

The DNB default Font Family is DNB. This font, together with it's weights is loaded and imported with @font-face in /style/themes/theme-ui/ui-theme-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'

<H1 bottom="x-large">Heading with bottom margin: x-large</H1>
<H2 top="x-large">Heading with top margin: x-large</H2>

Anchor

.dnb-anchor Anchor with default style
.dnb-anchor--hover Hover Style
.dnb-anchor--active Active Style
.dnb-anchor--focus Focus Style

DNB Mono (monospace)

DNB has its own monospace typeface (font-family).

Use it either by a CSS class .dnb-t__family--monospace or define your own like so:

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

#Typography

#Typography components

#Typography in general

#Typography property tables

#Typography Examples