---
description: >-
title: Web typography
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.085Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Web typography

## In general

The default DNB typeface for applications and documents is DNB Sans Text. Display is an explicit choice for short, expressive headlines. See [font roles](/web/layout-and-typography/typography/#font-roles).

### Download DNB font family

You can download the [latest stable DNB Sans Text font files as a ZIP package](https://assets.eufemia.dnb.no/fonts/dnb/DNBSansText.zip). Use the matching [versioned Asset CDN URL](/web/ai-tools-and-resources/asset-cdn/#stable-and-versioned-urls) when a build must stay tied to one Eufemia release.

Use the current DNB Sans Text files when installing fonts for local design tools. In the shared Figma **Eufemia Web** library, check that the font family and styles match the current brand files. Eufemia's CSS family alias remains DNB; the desktop font is named DNB Sans Text.

## Typographic scale

The Eufemia typographic scale is as follows:

_16px, 18px, 20px, 26px, 34px, 48px_





## In general

Sbanken has two fonts in its profile; Roboto and Maison Neue. The latter is used mainly for headlines,
Roboto for everything else.

You can download these fonts from the <a href="https://bc.dnb.no/brandcenter/no/sbanken/typografi">Brand Center</a>.

## Typographic scale

The Eufemia typographic scale for Sbanken is as follows:

_12px, 14px, 16px, 20px, 26px, 34px, 48px_



**NB!** we use `rem` for setting the size in code **not** pixels.

Line-heights vary depending on context but adhere to the Eufemia space units (multiples of 8 including halves (4px)).

## Typographic styling

Refer to the Figma style guides for styling typography with color.

## Margins & Padding

Blocks of text (headings and body etc.) do not have TOP, RIGHT, BOTTOM or LEFT margins by default. This is usually set by the containing element and based on context. However, there is a helper class to enable the "default" spacing:

```html
<div class="dnb-spacing">
  <h1 class="dnb-h--xx-large">...</h1>
  <p class="dnb-p">...</p>
</div>
```

The reason for this is to provide an out-of-the-box style which looks good before any customizing is applied.

Make sure to stick to the Eufemia spacing system when adding or removing bottom margins.

Padding is also not something applied to blocks of text by default.


## Typographic elements

This is an overview of the default, basic typographic elements such as **headings**, **sub-headings**, **body text**, etc.

The specifications below show DNB values. See [font size](/web/layout-and-typography/typography/font-size/) and [line height](/web/layout-and-typography/typography/css-reference/) for the values in each brand.

## Heading xx-large

### Specs: \{#heading-xx-large-specs\}

- font-weight: DNB Sans Text Medium
- font-size: 3rem (48px)
- line-height: 3.5rem (56px)
- (optional) margin-top: 3rem (48px)
- (optional) margin-bottom: 2.5rem (40px)

### Example: \{#heading-xx-large-example\}

<TypographyBox>
  <h1 className="dnb-h--xx-large skip-anchor">
    Quem facilisi moderatius id eam, id tamquam albucius per.
  </h1>
  <p className="dnb-p">
    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
    congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
    exerci tacimates pro, aliquam pertinacia eu vim.
  </p>
</TypographyBox>

## Heading x-large

### Specs: \{#heading-x-large-specs\}

- font-weight: DNB Sans Text Medium
- font-size: 2.125rem (34px)
- line-height: 2.5rem (40px)
- (optional) margin-top: 3rem (48px)
- (optional) margin-bottom: 2.5rem (40px)

### Example: \{#heading-x-large-example\}

<TypographyBox>
  <h4 className="dnb-h--x-large skip-anchor">
    Facilisi moderatius id eam, id tamquam albucius per. Vel quem congue
    appareat cu, mei te eros convenire
  </h4>
  <p className="dnb-p">
    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
    congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
    exerci tacimates pro, aliquam pertinacia eu vim.
  </p>
</TypographyBox>

## Heading large

### Specs: \{#heading-large-specs\}

- font-weight: DNB Sans Text Medium
- font-size: 1.625rem (26px)
- line-height: 2rem (32px)
- (optional) margin-top: 3rem (48px)
- (optional) margin-bottom: 1rem (16px)

### Example: \{#heading-large-example\}

<TypographyBox>
  <h4 className="dnb-h--large skip-anchor">
    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
    congue appareat cu, mei te eros convenire.
  </h4>
  <p className="dnb-p">
    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
    congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
    exerci tacimates pro, aliquam pertinacia eu vim.
  </p>
</TypographyBox>

## Text lead

### Specs: \{#text-lead-specs\}

- font-weight: DNB Sans Text Medium
- font-size: 1.25rem (20px)
- line-height: 1.5rem (24px)
- (optional) margin-top: 2rem (32px)
- (optional) margin-bottom: 1rem (16px)

### Example: \{#text-lead-example\}

<TypographyBox>
  <h4 className="dnb-lead skip-anchor">
    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
    congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
    exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
    Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
    Dico purto nullam sea an.
  </h4>
  <p className="dnb-p">
    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
    congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
    exerci tacimates pro, aliquam pertinacia eu vim.
  </p>
</TypographyBox>

## Text basis (paragraph)

### Specs: \{#text-basis-paragraph-specs\}

- font-weight: DNB Sans Text Regular or DNB Sans Text Medium
- font-size: 1.125rem (18px)
- line-height: 1.5rem (24px)
- (optional) margin-bottom: 1.5rem (24px)

### Example: \{#text-basis-paragraph-example\}

<TypographyBox>
  <p className="dnb-p">
    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
    congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
    exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
    Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
    Dico purto nullam sea an.
  </p>
  <p className="dnb-p">
    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
    congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
    exerci tacimates pro, aliquam pertinacia eu vim.
  </p>
</TypographyBox>

## Text basis - small

### Specs: \{#text-basis-small-specs\}

- font-weight: DNB Sans Text Regular or DNB Sans Text Medium
- font-size: 1rem (16px)
- line-height: 1.25rem (20px)
- (optional) margin-bottom: 1.5rem (24px)

### Note:

There are two methods to create small text. One, is to use the `.dnb-t__size--small` modifier class. The other method is to just use a `<small>` tag.

### Example \{#text-basis-small-example\}

<TypographyBox>
  <p className="dnb-p dnb-t__size--small">
    This is a paragraph with a <b>modifier class</b> `.dnb-t__size--small`.
    This is the small content. Quem facilisi moderatius id eam, id tamquam
    albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea
    bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.
  </p>
  <p className="dnb-p">
    <small>
      This is a paragraph with a <b>small tag</b> inserted here: this is
      the small content. Quem facilisi moderatius id eam, id tamquam
      albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea
      bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu
      vim.
    </small>
  </p>
</TypographyBox>


## Font Weights

DNB Sans Text and Mono include Light, Regular, Medium and Bold with italics. Follow the Eufemia Web Figma library: Regular for body text and button labels, Medium for Lead and headings. Light has no assigned brand role.

Achieved with HTML classes: `.dnb-t__weight--light`, `.dnb-t__weight--regular`,`.dnb-t__weight--medium` or `.dnb-t__weight--bold`.

The old classes, `.dnb-typo-regular`, `.dnb-typo-medium` and `.dnb-typo-bold`, still work, but will also set font-family and font-style.

### Body Regular

**NB!** body text is automatically set to use **regular** weight so there is
no need to use a class.

<TypographyBox>
  <p className="dnb-t__weight--regular">
    Here is a paragraph with some nonsense lipsum text. Contrary to popular
    belief, Lorem Ipsum passage, and going through the cites of the word in
    classical literature, discovered the undoubtable source. Lorem Ipsum
    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
  </p>
</TypographyBox>

### Body Medium

<TypographyBox>
  <p className="dnb-t__weight--medium">
    Here is a paragraph with some nonsense lipsum text. Contrary to popular
    belief, Lorem Ipsum passage, and going through the cites of the word in
    classical literature, discovered the undoubtable source. Lorem Ipsum
    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
  </p>
</TypographyBox>

### Body Bold

Use Bold only where the design calls for stronger emphasis.

<TypographyBox>
  <p className="dnb-t__weight--bold">
    Here is a paragraph with some nonsense lipsum text. Contrary to popular
    belief, Lorem Ipsum passage, and going through the cites of the word in
    classical literature, discovered the undoubtable source. Lorem Ipsum
    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
  </p>
</TypographyBox>


## Line height and the baseline grid

The following examples show how different line heights look and behave (whether they sit on the 8px grid or not) for a default paragraph of 16px (1rem).

When line heights are multiples of 8px (0.5rem), they will cause the content block to break on the base grid. If smaller space units are used to set line height such as 4px (0.25rem), the content block will break alternatively on and halfway between the base grid.

### These break _*neatly*_ on the grid (line heights 1rem, 1.5rem and 2rem)

Because their line-height **is** evenly divisible by 8.


### Line height = 1rem (16px)

<TypographyBox>
  <p className="dnb-p lh-16">
    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
    congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
    exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
    Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
    Dico purto nullam sea an.
  </p>
</TypographyBox>

### Line height = 1.5rem (24px)

<TypographyBox>
  <p className="dnb-p lh-24">
    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
    congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
    exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
    Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
    Dico purto nullam sea an.
  </p>
</TypographyBox>

### Line height = 2rem (32px)

<TypographyBox>
  <p className="dnb-p lh-32">
    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
    congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
    exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
    Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
    Dico purto nullam sea an.
  </p>
</TypographyBox>

### These break alternatively on/off the grid (line heights 0.75rem, 1.25rem and 1.75rem)

Because their line-height **is not** evenly divisible by 8.
Try resizing the browser - you will see the 'off-grid' result.

### Line height = 0.75rem (12px)

<TypographyBox>
  <p className="dnb-p lh-12">
    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
    congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
    exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
    Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
    Dico purto nullam sea an.
  </p>
</TypographyBox>

### Line height = 1.25rem (20px)

<TypographyBox>
  <p className="dnb-p lh-20">
    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
    congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
    exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
    Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
    Dico purto nullam sea an.
  </p>
</TypographyBox>

### Line height = 1.75rem (28px)

<TypographyBox>
  <p className="dnb-p lh-28">
    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
    congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
    exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
    Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
    Dico purto nullam sea an.
  </p>
</TypographyBox>


## Font Families

Display is **experimental**. [Contact the Eufemia team](/about/contact)
before using it in an application.

Use [DNB Sans Display](/web/layout-and-typography/typography/#display-headlines) explicitly for
short, expressive headlines. Everyday headings and letters keep Text.
Mono is for selected details, captions and table values. Arial is the
fallback when technical limitations prevent loading Text.

Carnegie retains ArizonaFlare for headings. Sbanken retains its own fonts.



The DNB text family is DNB Sans Text. Follow the Eufemia Web Figma library: Regular for body text and button labels, Medium for Lead and headings. Text and Mono provide Light, Regular, Medium and Bold with italics.

### DNB Sans Text Regular \{#dnb-regular\}

<TypographyBox>
  <p className="dnb-p dnb-t__weight--regular dnb-t__family--default">
    Here is a paragraph with some nonsense lipsum text. Contrary to popular
    belief, Lorem Ipsum passage, and going through the cites of the word in
    classical literature, discovered the undoubtable source. Lorem Ipsum
    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
  </p>
</TypographyBox>

### DNB Sans Text Medium \{#dnb-medium\}

<TypographyBox>
  <p className="dnb-p dnb-t__weight--medium dnb-t__family--default">
    Here is a paragraph with some nonsense lipsum text. Contrary to popular
    belief, Lorem Ipsum passage, and going through the cites of the word in
    classical literature, discovered the undoubtable source. Lorem Ipsum
    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
  </p>
</TypographyBox>

### DNB Sans Text Bold \{#dnb-bold\}

Use Bold only where the design calls for stronger emphasis.

<TypographyBox>
  <p className="dnb-p dnb-t__weight--bold dnb-t__family--default">
    Here is a paragraph with some nonsense lipsum text. Contrary to popular
    belief, Lorem Ipsum passage, and going through the cites of the word in
    classical literature, discovered the undoubtable source. Lorem Ipsum
    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
  </p>
</TypographyBox>

### DNB Sans Mono Regular \{#dnbmono-regular\}

<TypographyBox>
  <p className="dnb-p dnb-t__weight--regular dnb-t__family--monospace">
    Here is a paragraph with some nonsense lipsum text. Contrary to popular
    belief, Lorem Ipsum passage, and going through the cites of the word in
    classical literature, discovered the undoubtable source. Lorem Ipsum
    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
  </p>
</TypographyBox>




The default font family for all web applications is `Roboto`; however, for headlines and some other items, we use `Maison Neue`.

### Maison Neue

<TypographyBox>
  <p className="dnb-p dnb-t__size--large dnb-t__line-height--large dnb-t__family--heading">
    This is a paragraph using the headline font Maison Neue.
  </p>
</TypographyBox>

### Roboto Regular

<TypographyBox>
  <p className="dnb-p dnb-t__weight--regular dnb-t__family--default">
    Here is a paragraph with some nonsense lipsum text. Contrary to popular
    belief, Lorem Ipsum passage, and going through the cites of the word in
    classical literature, discovered the undoubtable source. Lorem Ipsum
    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
  </p>
</TypographyBox>

### Roboto Medium

<TypographyBox>
  <p className="dnb-p dnb-t__weight--medium dnb-t__family--default">
    Here is a paragraph with some nonsense lipsum text. Contrary to popular
    belief, Lorem Ipsum passage, and going through the cites of the word in
    classical literature, discovered the undoubtable source. Lorem Ipsum
    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
  </p>
</TypographyBox>

### Roboto Bold

**NB!** bold is generally not used, use medium, unless there is a specific unique use case.

<TypographyBox>
  <p className="dnb-p dnb-t__weight--bold dnb-t__family--default">
    Here is a paragraph with some nonsense lipsum text. Contrary to popular
    belief, Lorem Ipsum passage, and going through the cites of the word in
    classical literature, discovered the undoubtable source. Lorem Ipsum
    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
  </p>
</TypographyBox>