---
description: >-
title: Typography guidelines
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.559Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Typography guidelines

## Headings and styling

Never use headings (like `<h3>`) for purely styling purposes. Headings have a defined purpose and place in a web document. Using them correctly benefits all users.

Use headings where you think that someone with a **screen reader** would have the benefit of finding and reading a title.

### Think semantics first

Heading levels should have their logical hierarchy and only **increase by one**: `<h1>` followed by `<h2>` followed by `<h3>` and so on.

For styling purposes, use these classes `.dnb-h--xx-large`, `.dnb-h--x-large`, `.dnb-h--large`, `.dnb-h--medium` (`.dnb-lead`) or style your typography according to the UX prototypes.

## Choose the font for the content

DNB Sans Text is the default for everyday content and headings in interfaces
and documents. Follow the Eufemia Web Figma library for UI typography:
Regular for body text and button labels, Medium for Lead and headings.
The font family does not change
the semantic heading level. Use Mono sparingly for selected details.

Display is **experimental**. [Contact the Eufemia team](/about/contact)
before using it. Select [Display](/web/layout-and-typography/typography/#display-headlines) explicitly for short,
expressive headlines, such as a campaign, welcome message, or celebration.
Keep Text for 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; the
font choice does not change the semantic heading hierarchy.

## Line length and readability

For optimal readability and accessibility, maintain appropriate line lengths for text content. Long lines can be difficult to read, especially for users with dyslexia or visual impairments.

### Using proseMaxWidth for optimal line length

Typography components like `H2` and `P` support the `proseMaxWidth` property to limit text width based on character count, creating optimal reading line lengths:

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

### Accessibility benefits

- **Improved readability**: Optimal line length reduces eye strain and improves comprehension
- **Better for screen readers**: Shorter lines are easier to navigate with assistive technologies
- **Responsive design**: Character-based width adapts to different font sizes and zoom levels
- **Dyslexia-friendly**: Shorter lines help users with reading difficulties

### Recommended line lengths

- **Headings**: 60-80 characters for optimal impact
- **Body text**: 45-75 characters for comfortable reading
- **Captions and small text**: 40-60 characters

## Disable local fonts

If you are actively developing, testing or measuring your web app, make sure you disable locally installed fonts which are being used as web fonts. This way you can ensure that the browser will not use these locally installed fonts and display the fonts the end user will actually see.