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.

Read more how to use the different weights.

Font Face

The DNB default Font Family is Fedra Sans Std. 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.

Headings

The DNB UX team has currently only defined tree levels of heading styles (h1, h2 and h3). But level 4, 5 and 6 are also supported by the dnb-ui-lib.

Think semantics first

You should think semantics first once you choose what level of heading you use. Always try to start with an <h1>. Later on you can style them properly.

If you have to use a paragraph or a arbitrary heading, and it has to look like a specific heading, you can use these classes:

  • .dnb-h1
  • .dnb-h1--small
  • .dnb-h2
  • .dnb-lead (h3)

Read more about best practices for typography.

Headings in React

import { H1, H2, Lead, P, Link, ... } from 'dnb-ui-lib/elements'
<H1>Title</H1>

H1 small

H1

H2

Lead

Default Heading typography using React JSX

Headings with vanilla HTML

H1

H2

Lead

Default Heading typography

Small H1 Normal H1

Small H1 with class

Normal H2 Small H2

Normal H3/Lead Small H3/Lead

Additional Heading typography

Paragraph

Paragraph comes in several variants. You can use these classes:

  • .dnb-p (Body)
  • .dnb-p--demi
  • .dnb-p--medium
  • .dnb-p--ingress
  • .dnb-p--small

Paragraphs in React

Paragraph (Body)

Paragraph Demi

Paragraph Medium

Paragraph Ingress

Paragraph Small

Paragraph Demi Small

Paragraph Medium Small

Default paragraph typography using React JSX

Paragraphs with vanilla HTML

Here is a paragraph text
Anchor / Text Link
Bold paragraph
Strong paragraph
Italic paragraph
Underline paragraph
Numbers 0123456789
Code paragraph
Cite paragraph

Default Paragraph styles

Here is a small paragraph text
Anchor / Text Link
Bold paragraph
Strong paragraph
Italic paragraph
Underline paragraph
Numbers 0123456789
Code paragraph
Cite paragraph

Paragraph with small font-size

Deleted paragraph
Marked paragraph
Inserted paragraph
Subscript paragraph
Superscript paragraph

Additional Paragraph formatting (not defined yet)

Read more about Fonts in the Designer Guides

Anchor

Read more about the Anchor / Text Link