Typography#

Relevant links#

• Figma
• Source code
• Docs code

Typography components#

The two main components used to set typography are:

• Span
• P

(Lead and Ingress also work 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, has a defined height and line-height so everything falls exactly into the 8-pixel grid.

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

Typography property tables#

• font-weight
• font-size
• line-height

Typography Examples#

Line length#

For readable paragraphs and inline help text, keep line length constrained to a comfortable character count.

• Use var(--prose-max-width) as the canonical token for maximum text width. Default is 60ch.
• Base styles and some components expose var(--prose-max-width), which maps to var(--prose-max-width).

Using the proseMaxWidth property (max width in characters)#

Prose refers to written text in its natural form, particularly paragraphs and other continuous writing. Typography components like H2, H3, and P support the proseMaxWidth property to limit text width based on character count:

<H2 proseMaxWidth={80}>
  This heading will be limited to approximately 80 characters wide
</H2>
<P proseMaxWidth={60}>
  This paragraph will be limited to approximately 60 characters wide
</P>

Using Typography.Context#

import { Typography } from '@dnb/eufemia/elements'

Setting proseMaxWidth#

Use Typography.Context to apply proseMaxWidth to multiple typography components at once:

<Typography.Context proseMaxWidth={60}>
  <P>This paragraph will be limited to approximately 60 characters wide</P>
  <P>
    This paragraph will also be limited to approximately 60 characters wide
  </P>
  <H2 proseMaxWidth={80}>This heading overrides with its own value</H2>
</Typography.Context>

CSS example:

.prose {
  max-width: var(--prose-max-width); /* 60ch by default */
}

Setting responsive#

Use Typography.Context to make typography components, or all components use responsive font size and line heights.

<H2>Fixed H2</H2>
<Span size="medium">Fixed Span</Span>
<Heading level="3">Fixed Heading</Heading>
<P>Fixed P</P>
<Typography.Context responsive>
  <H2>Responsive H2</H2>
  <Span size="medium">Responsive Span</Span>
  <Heading level="3">Responsive Heading</Heading>
  <P>Responsive P</P>
</Typography.Context>

Font Face#

The default DNB font family is DNB, loaded via @font-face in @dnb/eufemia/src/style/themes/ui/fonts.scss.

• Sbanken uses its own fonts, declared and loaded in @dnb/eufemia/src/style/themes/sbanken/fonts.scss and applied via Sbanken-specific properties.
• Carnegie uses the ArizonaFlare font family, declared and loaded in @dnb/eufemia/src/style/themes/carnegie/fonts.scss, and applied through the Carnegie theme’s typography variables.
• Eiendom uses the default DNB font family.

Spacing and margin collapsing#

You can use the Spacing properties inside every Eufemia React Element, but keep in mind that margin collapsing can sometimes be 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

Read more about the Anchor / Text Link.

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;
}

Hosted Fonts (CDN)#

The font files are hosted under the following URLs:

DNB#

• https://eufemia.dnb.no/fonts/dnb/DNB-Regular.woff2
• https://eufemia.dnb.no/fonts/dnb/DNB-Medium.woff2
• https://eufemia.dnb.no/fonts/dnb/DNB-Bold.woff2
• https://eufemia.dnb.no/fonts/dnb/DNBMono-Regular.woff2
• https://eufemia.dnb.no/fonts/dnb/DNBMono-Medium.woff2
• https://eufemia.dnb.no/fonts/dnb/DNBMono-Bold.woff2

Sbanken#

• https://eufemia.dnb.no/fonts/sbanken/MaisonNeue.woff2
• https://eufemia.dnb.no/fonts/sbanken/Roboto-Regular.woff2
• https://eufemia.dnb.no/fonts/sbanken/Roboto-Medium.woff2
• https://eufemia.dnb.no/fonts/sbanken/Roboto-Bold.woff2

DNB Carnegie#

• https://eufemia.dnb.no/fonts/carnegie/ArizonaFlare-Regular.woff2
• https://eufemia.dnb.no/fonts/carnegie/ArizonaFlare-Medium.woff2
• https://eufemia.dnb.no/fonts/carnegie/ArizonaFlare-Bold.woff2