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 · See font sizes · 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 to switch brands, try a multi-page table and inspect print behavior.

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.

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 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. Use the 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.

SCSS imports are also available through @dnb/eufemia/style/print and @dnb/eufemia/style/document. For isolated styles, 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; 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:

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:

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

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

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

Plain paper output#

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

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

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:

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

Also add .dnb-print to the document wrapper:

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

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
        <br />
        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:

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