#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 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

• 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 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, P etc. 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.Provider

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

<Typography.Provider 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.Provider>

CSS example:

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

#Font Face

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

• Sbanken uses its own fonts, declared and loaded in @dnb/eufemia/src/style/themes/theme-sbanken/fonts.scss and applied via Sbanken-specific properties.
• Carnegie uses the ArizonaFlare font family, declared and loaded in @dnb/eufemia/src/style/themes/theme-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, 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

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