Web typography in code#

Relevant links#

• Figma
• Source code
• Docs code

Font roles#

The Eufemia Web Figma library is the source for interface typography, including component weights and sizes. The brand guidelines describe the broader roles of Text, Display and Mono across communication and print. Text is a font variant designed for readability.

Text and Mono provide Light, Regular, Medium and Bold, each with a genuine italic. The brand guidelines do not assign a specific role to Light. Use Regular for normal content and ensure sufficient readability when choosing Light. Display has one upright weight.

Eufemia keeps Text as the default for DNB headings, paragraphs, UI and letters. Sbanken retains Roboto and Maison Neue. Carnegie retains its ArizonaFlare headings. Eiendom continues to use the DNB text family.

function Example() {
  const theme = useTheme()
  const supportsDnbFaces = theme?.brand !== 'sbanken'
  const weights: TypographyWeight[] = [
    'light',
    'regular',
    'medium',
    'bold',
  ]
  return (
    <Flex.Stack>
      <P>Everyday text: ÆØÅ æøå, 0123456789</P>
      {supportsDnbFaces &&
        weights.map((weight) => (
          <P key={weight}>
            <Typography element="span" weight={weight}>
              Text {weight}: ÆØÅ æøå
            </Typography>{' '}
            <Typography element="span" weight={weight} slant="italic">
              Italic: ÆØÅ æøå
            </Typography>
          </P>
        ))}
      <P family="monospace">Selected details: 1 234,50 NOK</P>
      <Button text="Continue" />
    </Flex.Stack>
  )
}
render(<Example />)

Display headlines#

Experimental: DNB Sans Display is an opt-in. Before using it in your application, contact the Eufemia team to review the use case and typography together. Its guidance and styling may change.

Choose Display for the message, not the heading level#

DNB Sans Text is the default for interface and document headings. Choose DNB Sans Display for short, punchy headings, especially to celebrate something or draw extra attention to a message.

The following examples apply the brand guidance to interfaces:

• Consider Display: a campaign headline, a prominent welcome message, or a celebratory announcement.
• Keep Text: everyday page and section headings, form steps, dialog titles, help content, and letters.

Use Display sparingly so it retains its emphasis. A large heading or an <H1> does not automatically call for Display. Keep the semantic heading hierarchy independent of the font choice.

Use the font-family option to select Display for a specific headline:

import { H1, H2 } from '@dnb/eufemia/elements'
import { Heading } from '@dnb/eufemia/components'

<H1 family="display">En god start</H1>
<H2>Everyday content uses Text</H2>
<Heading family="display">Et steg videre</Heading>

<Flex.Stack>
  <H2 family="display" size="xx-large">
    En god start
    <br />
    på noe større
  </H2>
  <P>Ordinary paragraphs and headings keep the brand's text font.</P>
  <H2>En god start på noe større</H2>
</Flex.Stack>

The equivalent helper is .dnb-t__family--display. Custom CSS can use font-family: var(--font-family-display). The helper uses the single upright weight and disables synthesized bold and italic.

The brand guidelines specify 100% line height, increased to 110–118% when accents and descenders collide. Eufemia defaults to 110% to reduce collisions in web headlines. Accented capitals can still touch descenders on the line above. Check multiline headlines at all supported widths and adjust as needed, for example style={{ lineHeight: 1 }} for a compact headline or style={{ lineHeight: 1.25 }} for a narrow, accented multiline headline. At small sizes, native glyph hinting can still make 118% overlap; test the actual words and widths rather than treating a percentage as a guarantee. An explicit line-height helper or the Typography lineHeight property also overrides the default.

Display reuses Eufemia's existing heading-size tokens. The Eufemia Figma library does not yet have a dedicated Display text style or variable. The web default is an implementation choice, not a synchronized Display token.

DNB Display headings use a matching skeleton font so loading placeholders keep the same wrapping. Display uses geometric text precision so source and skeleton keep the same design advances, including at small sizes where native outline hinting can otherwise move a word onto another line. Text, Mono and other brands keep their existing rendering policy. The skeleton font generator reproduces it from the current DNBSansDisplay.ttf, including its own line metrics, kerning and substitutions. Left-align or center Display headlines. Check wrapping and accented characters at smaller widths.

Display is never selected automatically by heading level or document styles. Sbanken and Carnegie map the Display option to their own heading family. Do not use Display for body text, form labels or controls.

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 registered by the selected brand basis stylesheet. Load it together with dnb-ui-core or dnb-ui-basis. Browsers download only the faces used on the page.

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

For embedded app pages, use <Theme typography="native"> to select the brand's native basis font size. See native typography.

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#

NB: This feature is in beta and may be subject to change.

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 typeface is DNB Sans Text, registered under the existing CSS family name DNB. DNB Sans Mono retains the CSS name DNBMono. Keeping these names preserves existing custom CSS and font-family variables. The stylesheet loads DNBSansText-* and DNBSansMono-* official 26.302.1 webfonts, including Light and italics. Display is registered separately as DNB Sans Display.

The existing weights remain Regular (400), Medium (500) and Bold (600). CSS bold (700) also selects the genuine DNB Bold face. Light uses 300. Use slant="italic" or .dnb-t__slant--italic for Text and Mono italics. DNB button labels use Regular, including primary, secondary and tertiary buttons, selection controls, navigation, upload and load-more actions. Lead and Ingress use Medium in the DNB UI theme, matching Eufemia Web in Figma. Other brands retain their existing typography. Use weight="regular" only when an introductory text design explicitly calls for it.

The faces are declared in @dnb/eufemia/src/style/themes/ui/fonts.scss. The official Text and Mono files have matching embedded line metrics across TTF, WOFF and WOFF2. Eufemia loads them unchanged from assets/fonts/dnb/ and generates matching skeleton fonts. Identical rendering across browsers and operating systems is not guaranteed.

Updating from legacy DNB fonts#

Update manual font preloads, copied font stylesheets and self-hosted assets to the DNBSansText-* and DNBSansMono-* files under fonts/dnb/ together. Use the official 26.302.1 files. Regular Italic files are named DNBSansText-Italic and DNBSansMono-Italic. Existing DNB-* and DNBMono-* assets remain available for compatibility. Avoid mixing old and current declarations under the same CSS family name.

Review text wrapping, control alignment and visual snapshots on your supported browsers and operating systems. Genuine italics, updated Medium and Bold details, font metrics and rasterization can change the result. Mono now keeps consistent character widths, including italic characters and ligatures; this can change code and table wrapping. See the v11 font update guidance.

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

Read more about the Anchor / Text Link.

DNB Sans Mono (monospace)#

Use Mono for selected details, such as eyebrow labels, short captions and table values. It is also used for code. Tables keep Text by default; select Mono where it helps the content.

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

New Eufemia releases load fonts from an immutable CDN path matching the package version, for example https://assets.eufemia.dnb.no/v<version>/fonts/dnb/DNBSansText-Regular.woff2.

The stable URLs below always serve the latest stable release and are convenient when linking fonts manually:

DNB#

• https://assets.eufemia.dnb.no/fonts/dnb/DNBSansText-Regular.woff2
• https://assets.eufemia.dnb.no/fonts/dnb/DNBSansText-Medium.woff2
• https://assets.eufemia.dnb.no/fonts/dnb/DNBSansText-Bold.woff2
• https://assets.eufemia.dnb.no/fonts/dnb/DNBSansMono-Regular.woff2
• https://assets.eufemia.dnb.no/fonts/dnb/DNBSansMono-Medium.woff2
• https://assets.eufemia.dnb.no/fonts/dnb/DNBSansMono-Bold.woff2

Text and Mono filenames use Light, Regular, Medium and Bold. Italic files append Italic to the weight, except Regular Italic, which is named DNBSansText-Italic.woff2 or DNBSansMono-Italic.woff2. Matching official WOFF and TTF files are included in the same directory. Display uses DNBSansDisplay.woff2. The current release does not include OTF files.

Download the complete families:

• DNB Sans Text
• DNB Sans Mono
• DNB Sans Display

These URLs become available with the release containing these files. For local previews, Eufemia loads the bundled files. The old DNB-* and DNBMono-* asset URLs remain available for existing consumers; new code should use the current filenames. Update manual preloads and self-hosted copies together with the stylesheet to avoid downloading both generations.

Sbanken#

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

DNB Carnegie#

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

See the Asset CDN documentation for the immutable URL contract and other published assets.