@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
221 lines (172 loc) • 8.13 kB
Markdown
---
title: 'Typography'
description: 'DNB Headings and paragraphs, their properties and styling.'
version: 10.104.0
generatedAt: 2026-04-17T18:46:12.789Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---
# Typography
## 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/uilib/typography)
## Typography components
The two main components used to set typography are:
- [Span](/uilib/elements/span)
- [P](/uilib/elements/paragraph)
([Lead](/uilib/elements/lead) and [Ingress](uilib/elements/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](/uilib/typography/font-weight)
- [font-size](/uilib/typography/font-size)
- [line-height](/uilib/typography/line-height)
### 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.Provider`
Use `Typography.Provider` to apply `proseMaxWidth` to multiple typography components at once:
```tsx
<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:
```css
.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](/uilib/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
- `.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](/uilib/components/anchor).
## 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
.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`