---
title: Web typography in code
description: DNB Headings and paragraphs, their properties and styling.
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.087Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Web typography in code

## Relevant links

- [Figma](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/%F0%9F%92%BB-Eufemia---Web?node-id=530-49)
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/style)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/web/layout-and-typography/typography)

## Font roles

The [Eufemia Web Figma library](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/)
is the source for interface typography, including component weights and sizes.
The [brand guidelines](https://bc.dnb.no/point/no/dnbvisualguidelines/component/default/763)
describe the broader roles of Text, Display and Mono across communication and print.
**Text** is a font variant designed for readability.

| Font                        | Use                                                       |
| --------------------------- | --------------------------------------------------------- |
| DNB Sans Text Regular       | Body text, button labels and everyday UI content          |
| DNB Sans Text Medium / Bold | Lead and headings use Medium; Bold for explicit emphasis  |
| DNB Sans Display            | Experimental opt-in for short, expressive headlines       |
| DNB Sans Mono               | Selected eyebrow labels, short captions and table details |
| Arial                       | Fallback when DNB Sans Text cannot load                   |

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.


```tsx
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](/about/contact) 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:

```tsx
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>
```


```tsx
render(<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](https://bc.dnb.no/point/no/dnbvisualguidelines/component/default/763)
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](/web/components/skeleton/info/#generate-a-skeleton-font)
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](/web/layout-and-typography/elements/span)
- [P](/web/layout-and-typography/elements/paragraph)

([Lead](/web/layout-and-typography/elements/lead) and [Ingress](/web/layout-and-typography/elements/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](/web/layout-and-typography/typography/css-reference)
- [font-size](/web/layout-and-typography/typography/font-size)
- [line-height](/web/layout-and-typography/typography/css-reference)

For embedded app pages, use `<Theme typography="native">` to select the brand's native basis font size. See [native typography](/web/layout-and-typography/typography/font-size#typography-for-native-app-pages).

### Typography Examples


```tsx
render(<div style={{
  maxWidth: '30rem'
}}>
        <Code>Heading xx-large</Code>
        <H4 size="xx-large" space={0}>
          Dette er en heading på over to linjer
        </H4>
        <Code top="large">Heading x-large</Code>
        <H4 size="x-large" space={0}>
          Og dette er en heading small tittel som også går over to linjer,
          nei vent, tre linjer.
        </H4>
        <Code top="large">Heading large</Code>
        <H4 size="large" space={0}>
          Hva har vi her, en liten heading som mot alle odds går over flere
          linjer.
        </H4>
        <Code top="large">Text Lead</Code>
        <Lead space={0}>
          Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei,
          appetere oporteat eam te.
        </Lead>
        <Code top="large">Text basis</Code>
        <P space={0}>
          Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei,
          appetere oporteat eam te. Vel in deleniti sensibus, officiis
          menandri efficiantur no cum. Per et habemus gubergren. Mundi
          copiosae pertinax ea pro, vidit fierent mentitum in est, ex
          fabellas senserit inciderint vim.
        </P>
        <Code top="large">Text basis (Medium)</Code>
        <P weight="medium" space={0}>
          Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei,
          appetere oporteat eam te. Vel in deleniti sensibus, officiis
          menandri efficiantur no cum. Per et habemus gubergren. Mundi
          copiosae pertinax ea pro, vidit fierent mentitum in est, ex
          fabellas senserit inciderint vim.
        </P>
        <Code top="large">Text small</Code>
        <P size="small" space={0}>
          Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei,
          appetere oporteat eam te. Vel in deleniti sensibus, officiis
          menandri efficiantur no cum. Per et habemus gubergren. Mundi
          copiosae pertinax ea pro, vidit fierent mentitum in est, ex
          fabellas senserit inciderint vim.
        </P>
        <Code top="large">Text small (Medium)</Code>
        <P size="small" weight="medium" space={0}>
          Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei,
          appetere oporteat eam te. Vel in deleniti sensibus, officiis
          menandri efficiantur no cum. Per et habemus gubergren. Mundi
          copiosae pertinax ea pro, vidit fierent mentitum in est, ex
          fabellas senserit inciderint vim.
        </P>
        <Code top="large">Text x-small</Code>
        <P size="x-small" space={0}>
          Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei.
        </P>
        <Code top="large">Text x-small (Medium)</Code>
        <P size="x-small" weight="medium" space={0}>
          Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei.
        </P>
      </div>)
```


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

```tsx
<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`

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

#### Setting `proseMaxWidth`

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

```tsx
<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:

```css
.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.


```tsx
<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](/web/releases-and-upgrades/versions/eufemia/v11-info/#dnb-font-update).

- 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](/web/layout-and-typography/layout/space/properties) inside every Eufemia React Element, but keep in mind that [margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) can sometimes be a little tricky to get right.

```jsx
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

| Class                 | Example                                                                |
| --------------------- | ---------------------------------------------------------------------- |
| `.dnb-anchor`         | <a href="/" className="dnb-anchor">Anchor with default style</a>       |
| `.dnb-anchor--hover`  | <a href="/" className="dnb-anchor dnb-anchor--hover">Hover style</a>   |
| `.dnb-anchor--active` | <a href="/" className="dnb-anchor dnb-anchor--active">Active style</a> |
| `.dnb-anchor--focus`  | <a href="/" className="dnb-anchor dnb-anchor--focus">Focus style</a>   |

Read more about the [Anchor / Text Link](/web/components/anchor).

## DNB Sans Mono (monospace) \{#dnb-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
.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](https://assets.eufemia.dnb.no/fonts/dnb/DNBSansText.zip)
- [DNB Sans Mono](https://assets.eufemia.dnb.no/fonts/dnb/DNBSansMono.zip)
- [DNB Sans Display](https://assets.eufemia.dnb.no/fonts/dnb/DNBSansDisplay.zip)

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](/web/ai-tools-and-resources/asset-cdn/) for the immutable URL
contract and other published assets.


  
```tsx
render(<MarginReset>
    <ComponentBox scope={{
    Typography
  }} data-visual-test="typography-responsive">
      <Typography.Context responsive>
        <Heading.Level reset={1}>
          <H1>H1</H1>
          <H2>H2</H2>
          <H3>H3</H3>
          <H4>H4</H4>
          <H5>H5</H5>
          <H6>H6</H6>

          <Heading level="1">Heading 1</Heading>
          <Heading level="2">Heading 2</Heading>
          <Heading level="3">Heading 3</Heading>
          <Heading level="4">Heading 4</Heading>
          <Heading level="5">Heading 5</Heading>
          <Heading level="6">Heading 6</Heading>

          <Span>Span default</Span>
          <br />
          <Span size="x-small">Span x-small</Span>
          <br />
          <Span size="small">Span small</Span>
          <br />
          <Span size="basis">Span basis</Span>
          <br />
          <Span size="medium">Span medium</Span>
          <br />
          <Span size="large">Span large</Span>
          <br />
          <Span size="x-large">Span x-large</Span>
          <br />
          <Span size="xx-large">Span xx-large</Span>

          <P>P default</P>
          <P size="x-small">P x-small</P>
          <P size="small">P small</P>
          <P size="basis">P basis</P>
          <P size="medium">P medium</P>
          <P size="large">P large</P>
          <P size="x-large">P x-large</P>
          <P size="xx-large">P xx-large</P>
        </Heading.Level>
      </Typography.Context>
    </ComponentBox>
  </MarginReset>)
```