---
title: Print and document styles
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.158Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Print and document styles

> **Beta:** These styles are a proposed starting point. Typography, spacing,
> print behavior and the implementation may change as we gather feedback.

Use this page to review how a branded letter could look and compare the
proposed font sizes and spacing. The document style keeps the selected
brand's fonts and weights while using a smaller type scale for letters
and document production. The preview keeps brand colors on screen and
uses pure black text on white paper when printed.

[View the example](#style-preview) · [See font sizes](#typography-and-spacing) ·
[Developer guide](#developer-guide)

## Style preview

The example below shows typography, spacing and branding with fictional
content. Its letter layout is illustrative, not a document template. Each
project owns its content, page layout, logos and envelope positioning.

[Open the interactive style preview](/web/styling-and-themes/css/document-styles/preview/)
to switch brands, try a multi-page table and inspect print behavior.


```tsx
render(<Theme brand={brand} colorScheme="light">
      <article className={`dnb-document dnb-print ${styles.letter}`} lang="nb" id="letter">
        <header className={styles.letterHeader}>
          <Logo svg={logos[brand]} height="2rem" />
          <p className="dnb-document__return-address">
            Returadresse: {brands[brand]}, Postboks 1600 Sentrum, 0021 Oslo
          </p>
        </header>
        <div className={styles.recipient}>
          <p>
            Ola Nordmann
            <br />
            Eksempelveien 12
            <br />
            0123 Oslo
          </p>
          <p>14. oktober 2026</p>
        </div>
        <H1 bottom="small">Informasjon om avtalen din</H1>
        <P>Hei Ola,</P>
        <P>
          Vi har samlet informasjon om avtalen din og hva du bør være
          oppmerksom på. Du finner detaljene i oversikten nedenfor.
        </P>
        <H2 size="x-large">Dette gjelder for deg</H2>
        <ul className="dnb-ul">
          <li>Avtalen fortsetter som før.</li>
          <li>
            Du kan se oppdatert informasjon i appen eller på nettsiden vår.
          </li>
          <li>Ta kontakt dersom du har spørsmål.</li>
        </ul>
        <h3>Oversikt over avtalen</h3>
        <table className="dnb-table">
          <thead>
            <tr>
              <th scope="col">Beskrivelse</th>
              <th scope="col">Dato</th>
              <th scope="col" align="right">
                Beløp
              </th>
            </tr>
          </thead>
          <tbody>
            {Array.from({
          length: long ? 80 : 3
        }, (_, index) => <tr key={index}>
                <td>Avtalepost {index + 1}</td>
                <td>14.10.2026</td>
                <td align="right">1 250,00 kr</td>
              </tr>)}
          </tbody>
        </table>
        <P>
          Har du spørsmål, kan du ta kontakt med oss på 915 04800.
          <br />
          Takk for at du er kunde hos oss.
        </P>
        <P className="dnb-document__signature dnb-print__keep-together">
          Vennlig hilsen
          <br />
          {brands[brand]}
        </P>
        <footer className="dnb-document__footer">
          <P>
            Kun stilforhåndsvisning. Innhold og oppsett er eksempler, ikke
            en brevmal.
          </P>
        </footer>
      </article>
    </Theme>)
```


## Document styles

### Typography and spacing

These proposed sizes apply to the document style on screen and in print.
Regular app content keeps its existing typography.

<Space bottom="medium">

| Role                      | Size at the default root | Line height |
| ------------------------- | ------------------------ | ----------- |
| Body and salutation       | 11pt                     | 1.4         |
| Main heading              | 14pt                     | 1.25        |
| Section heading           | 13pt                     | 1.25        |
| Subheadings and lead text | 12pt                     | 1.3         |
| Signature and table cells | 10pt                     | 1.4         |
| Footer and return address | 9pt                      | 1.4         |

</Space>

Point sizes assume a 16px root font size and normal PDF scaling. The
implementation uses relative units so browser font preferences still work.

Paragraphs, headings, lists and tables have consistent spacing. The return
address and footer use the smallest text; signatures and table content
remain slightly larger. Brand fonts and weights remain part of the design.

Review the result with your actual content and production PDF renderer.
The document-production team's reference stylesheet should guide final
design approval.

### Paper appearance

The `dnb-print` class uses pure black text, borders and form outlines on
white paper without CSS backgrounds. It works regardless of whether the
app is light or dark on screen. No additional color modifier is needed.
Images and artwork may still contain colors and should be checked on paper.

Page margins, footer placement and page numbers belong to the document
layout and PDF renderer. Changing the footer's font size does not correct
a footer positioned outside the page's content area. See
[footer layout and page numbers](#footer-layout-and-page-numbers) for details.

## Developer guide

Eufemia provides independent, opt-in print and document stylesheets. Use
either on its own or combine them. Neither imports the other or is included
in the default Eufemia bundle. Import the stylesheet and apply its scope
to enable it. Both work without React.

For an app, start with the [printable apps guide](/web/styling-and-themes/css/printable-apps/).
Use the [document implementation](#document-implementation) for the smaller
typography shown above. App navigation, content selection and page layout
still need to be handled by the app. These styles do not provide print
representations for every Eufemia component.

<Space bottom="large">

| Need                                                            | Import                                 | Scope                     |
| --------------------------------------------------------------- | -------------------------------------- | ------------------------- |
| Pure black paper output and pagination with existing typography | `dnb-ui-print.min.css`                 | `.dnb-print`              |
| Document typography and spacing on screen and in print          | `dnb-ui-document.min.css`              | `.dnb-document`           |
| Document formatting with print/PDF behavior                     | Both, with `dnb-ui-print.min.css` last | `.dnb-document.dnb-print` |

</Space>

SCSS imports are also available through `@dnb/eufemia/style/print` and
`@dnb/eufemia/style/document`. For [isolated styles](/web/styling-and-themes/css/style-isolation/),
use the corresponding `--isolated.min.css` files within `IsolatedStyleScope`.

DNB document text and headings use DNB Sans Text, with genuine italic faces.
Display is [experimental and opt-in for expressive headlines](/web/layout-and-typography/typography/#display-headlines);
ordinary letters should keep Text. Font loading comes from the selected
brand stylesheet and is shared between screen and print. Wait for
`document.fonts.ready` before generating a PDF.

## Print styles

Import `dnb-ui-print` after Eufemia core and your selected brand styles:

```js
import '@dnb/eufemia/style/dnb-ui-core.min.css'
import '@dnb/eufemia/style/themes/ui/ui-theme-basis.min.css'
import '@dnb/eufemia/style/dnb-ui-print.min.css'
```

Wrap the printable content in `.dnb-print` for pure black paper output
and pagination. This works with existing app typography and does not
require `.dnb-document` or the document stylesheet:

```html
<section class="dnb-print">
  <!-- Your existing content -->
</section>
```

The `.dnb-print` scope preserves your existing typography, spacing and
wrapper layout while making paper output black on white. The print
stylesheet works independently of `dnb-ui-document`. Screen styles remain
unchanged except for elements explicitly marked `dnb-print-only`.
Configure your PDF renderer to use print media. The scope does not exclude
content elsewhere in the app from printing; the app owns that selection.

Pagination applies under `@media print`. Within `.dnb-print`,
it keeps headings with following content, requests repeating table headers
and footers, and asks that table rows stay together when they fit on a page.
It removes scrolling and clipping from Eufemia Table containers so rendered
rows can flow across pages. Long documents and tables can span pages;
pagination depends on the browser or PDF renderer.

- Add `.dnb-print-hidden` to controls and other screen-only content. This
  helper works inside or outside `.dnb-print`.
- Add `.dnb-print-only` to content that should appear only in print. It
  keeps its normal display in print and is hidden on screen.
- Use `.dnb-print__keep-together` inside the scope for a short group, such
  as a signature, that belongs together.
- Use `.dnb-print__page-break` inside the scope to start a section on the
  next page.

The app decides how navigation, buttons, form values, expanded sections,
dialogs and other interactive content appear in print. The stylesheet does
not hide controls automatically, expand collapsed content, render
virtualized rows, or convert interactive components to static content.

Page size, margins, repeated page footers, page numbering and envelope
geometry belong to the app or template and PDF renderer. The shared styles
do not impose an `@page` size or margin. For example, an A4 template can add:

```css
@page letter {
  size: A4;
  margin: 20mm;
}

@media print {
  .letter {
    page: letter;
  }
}
```

### Plain paper output

The same `.dnb-print` class supplies background-free paper output:

```html
<section class="dnb-print">
  <!-- Black text without CSS backgrounds, in either screen color scheme -->
</section>
```

These styles apply only during printing. They make text, links, borders
and form outlines pure black (`#000`) on a white paper surface, remove
descendant CSS backgrounds, gradients and shadows, and disable transitions
and animations in the scope. Fonts and the type scale remain unchanged.
Text inputs, checkboxes, radio buttons, switches and toggle buttons
retain visible boundaries and selection indicators without background
graphics. A selected toggle button gets a thicker black outline. The
screen retains its selected theme and control state.
Input and Textarea placeholders are hidden when printing so an empty
field remains visually distinct from an entered value.

Image pixels, fixed SVG fills, canvas and video are not recolored. Inline
SVGs that use `currentColor` follow the black text color. Provide a printable
alternative for graphics that depend on a dark background. CSS background
images are removed, so essential graphics should use an image element or
a separate printable representation.
Status information must remain understandable without color.

### Color scheme and paper surface

`dnb-print` supplies black text on white paper, including inside nested
dark themes. Screen colors remain unchanged. When inspecting paper
colors in developer tools, enable print media emulation.

The example letter uses `.dnb-document.dnb-print`: the document stylesheet
supplies typography and the print stylesheet supplies paper colors and
pagination. Apps only need `.dnb-print` for paper output with their existing
typography.

For output that retains brand colors, use your own print styles outside
the `.dnb-print` scope and choose a light theme for the printable content.
A complete light brand palette is not generated by the print stylesheet.

Wrapper width and overflow belong to the app or template. Brand artwork
retains fixed colors; background printing depends on the renderer's settings. Check that
text, links, borders and status indicators remain readable with background
graphics disabled and in grayscale. Essential meaning must not depend on color alone.
Load fonts before generating the PDF and verify font embedding and page
breaks in the actual production renderer.

See the [printable apps guide](/web/styling-and-themes/css/printable-apps/)
for app layout, print-only content, and browser testing.

## Document implementation

`dnb-ui-document` applies the document typography and spacing on screen
and in print. It preserves the selected brand's fonts, weights and colors.

### Import document formatting

Import it after Eufemia core and your brand styles:

```js
import '@dnb/eufemia/style/dnb-ui-core.min.css'
import '@dnb/eufemia/style/themes/ui/ui-theme-basis.min.css'
import '@dnb/eufemia/style/dnb-ui-document.min.css'
```

It works without `dnb-ui-print`. To combine document formatting with the
print behavior described above, add the print stylesheet **after** the
document stylesheet:

```js
import '@dnb/eufemia/style/dnb-ui-print.min.css'
```

Also add `.dnb-print` to the document wrapper:

```html
<article class="dnb-document dnb-print">
  <!-- Document typography with print pagination -->
</article>
```

`dnb-print` supplies pure black paper output automatically, regardless of
the document's screen theme. `dnb-ui-document` continues to supply document
typography. The letter preview keeps the selected brand's colors on screen.

### Document scope

Wrap the document in `.dnb-document`, inside the selected brand's theme.
Application content outside this wrapper retains its normal typography.
`.dnb-document` activates document formatting only. Print pagination
requires both the print import and `.dnb-print`. Neither scope imports
styles or enables the other.

### Typography details

The size table maps native `h1` to 14pt, `h2` to 13pt, and `h3` and `h4`
to 12pt. For React headings, the corresponding visual sizes are
`xx-large`, `x-large`, and `large` or `medium`.

Paragraphs have a `0.75rem` bottom gap. Headings have `1.25rem` above and
`0.5rem` below; a first heading has no top gap. Table cells use
`0.375rem 0.5rem` padding. Explicit Eufemia Space properties take precedence
over default paragraph and heading spacing.
Explicit table alignment, vertical alignment and cell spacing options are
also preserved. Table size variants use the document cell padding;
`border={false}` (or `.dnb-table--no-border`) keeps cells borderless.

React heading components retain their brand-specific default size mapping.
For example, `H2` defaults to `large` for DNB and `x-large` for Sbanken.
Set `size="x-large"` on `H2` to select the same 13pt document size across
brands, as shown in the [React example](#react-teams). The native HTML heading sizes are fixed by the
document profile; both approaches retain the selected brand's fonts.

The profile reuses `--font-size-*` and `--line-height-*` variables. Values
are expressed in `rem`, so the point equivalents assume a 16px root and
normal PDF scaling. Browser font preferences still work. The profile does
not change the root font size. Responsive typography modifiers use the
document scale at every viewport size to keep pagination stable.

Use `.dnb-document__signature` for 10pt signature text, and
`.dnb-document__footer` and `.dnb-document__return-address` for 9pt text,
including nested paragraphs. Greeting wording, logos, envelope calculations
and positioning remain part of the template. Existing inline font sizes
should be removed when migrating to the profile.
Eufemia does not provide DNB Light or Noto Sans as part of this profile.

### React teams

Prefer Eufemia's `H1`, `H2`, `H3` and `P` components in React projects.
They render semantic HTML and support Eufemia's spacing props, typography
options and theme context. `H1` renders an `<h1>` by default; it is not a
different heading level.

Keep the brand on the existing Theme component. This example uses
document formatting only:

```tsx
import { H1, H2, P } from '@dnb/eufemia/elements'
import { Theme } from '@dnb/eufemia/shared'

render(
  <Theme brand="sbanken" colorScheme="light">
    <article className="dnb-document" lang="nb">
      <H1 bottom="small">Informasjon om avtalen din</H1>
      <P>Hei Tobias,</P>
      <H2 size="x-large">Dette gjelder for deg</H2>
      <P>Takk for at du er kunde hos oss.</P>
      <P className="dnb-document__signature">
        Vennlig hilsen
        Sbanken
      </P>
    </article>
  </Theme>
)
```

Choose heading levels for the document structure, not the desired font
size. Use the `size` prop to select a visual size independently of the
heading level. The example uses `bottom="small"` to add a `1rem` gap below
the title.

### HTML templates without React

Use native `<h1>`, `<h2>` and `<p>` elements when your document renderer
or templating system does not use React. The stylesheet supports these
elements directly within `.dnb-document`, so React is not required:

```html
<article class="dnb-document" lang="nb">
  <h1>Informasjon om avtalen din</h1>
  <p>Hei Tobias,</p>
  <p>Takk for at du er kunde hos oss.</p>
  <p class="dnb-document__signature">Vennlig hilsen<br />DNB</p>
</article>
```

Both approaches produce semantic headings. Use the approach that fits the
project's rendering technology. To enable print pagination in either
example, import `dnb-ui-print` and add `dnb-print` to the article's classes.
Add `dnb-print__keep-together` to the signature to keep it on one page when
it fits.

### Footer layout and page numbers

`.dnb-document__footer` controls typography only. It does not position the
footer at the bottom of a page, repeat it across pages, or generate page
numbers. The print rules for repeating `<tfoot>` apply to table footers,
not document page footers.

The template and PDF renderer own footer placement and page numbering.
Align the footer with the document's content area and reserve enough space
in the page margins for the footer and page numbers. Keep page numbers in
a separate area from the footer text. Verify the layout with long content,
multiple pages and each supported language.

Use your PDF renderer's supported page-footer and page-counter features
for output such as "Page 1 of 3". Support differs between renderers, so
validate the result with the engine used in production. Reducing the font
size does not correct a footer whose width or position exceeds the page's
content area.