Skip to content

Fonts & Typography

In General

The default font for all web applications is Fedra Sans Standard.

You will need to request use and download of the font due to licensing.

Make sure it is installed on your system so you can use the design resources.

Typographic scale

The Eufemia typographic scale is as follows:

14px, 16px, 20px, 24px, 32px, 48px

NB! we use ems and rems for setting the size in code not pixels.

Line-heights vary depending on context but adhere to the Eufemia space units (multiples of 8 including halves (4px)).

Typographic styling

Refer to the Figma style guides for styling typography with color.

Margins & Padding

Blocks of text (headings and body etc.) do not have TOP, LEFT or RIGHT margins by default. This is usually set by the containing element and based on context. However, they do have a default BOTTOM margin of 1rem ( 16px ). This can be adjusted depending on context.

The reason for this is to provide an out-of-the-box style which looks good before any customising is applied.

Make sure to stick to the Eufemia spacing system when adding or removing bottom margins.

Padding is also not something applied to blocks of text by default.

Typographic elements

This is an overview of the default, basic typographic elements such as headings, sub-headings, body text etc.

Note, the following have a 16px (1 rem) default bottom margin. This can be adjusted to suite the context. Increase or decrease in Eufemia space units (4,8,16...etc,).



H1 heading

Specs:
  • font-size: 3em (48px)
  • line-height: 3.5rem (56px)
  • margin-bottom: 1rem (16px)
Example:

Quem facilisi moderatius id eam, id tamquam albucius per.

This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.

H1 small heading

Specs:
  • font-size: var(--font-size-x-large) (32px)
  • line-height: 3rem (48px)
  • margin-bottom: 1rem (16px)
Example:

This part is small facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire

This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.

H2 Heading

Use when:

You wish to.....

Specs:
  • font-size: 1.5em (24px)
  • line-height: 2rem (32px)
  • margin-top: 1.5rem (24px)
  • margin-bottom: 1rem (16px)
Example:

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro.

This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.

H3 - Heading

Specs:
  • font-size: 1.25em (20px)
  • line-height: 2rem (32px)
  • margin-bottom: 1rem (16px)
Example:

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an.

This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.

Lead - Block of text

Specs:
  • font-size: 1.25em (20px)
  • line-height: 2rem (32px)
  • margin-bottom: 1rem (16px)
Example:

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an.

This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.

Body text (paragraph)

Specs:
  • font-size: 1em (16px)
  • line-height: var(--line-height-basis) (24px)
  • margin-bottom: 1rem (16px)
Example:

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an.

This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.

Small Text

Specs:

  • font-size: 0.875em
  • line-height: 1.375rem
Note:

There are two methods to create 'small' text. One, is to use the 'dnb-small' class which can be used on paragraphs etc. and allows you to use a bottom margin. The other method is to just use a 'small' tag which is inline and cannot have a margin.

Example #1 - small tag embedded in a p tag:

This is a paragraph with a small tag inserted here: this is the small content. This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.

Example #2 text wrapped in a small tag:
This is just with a small tag. This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.

Font Weights

Achieved with HTML classes: .dnb-typo-regular, .dnb-typo-medium, .dnb-typo-bold

Body Regular

NB! body text is automatically set to use regular (as for now also: book) weight so there is no need to use a class.

Here is a paragraph with some nonsense lipsum text. Contrary to popular belief, Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

Body Medium

Here is a paragraph with some nonsense lipsum text. Contrary to popular belief, Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

Body Bold

Here is a paragraph with some nonsense lipsum text. Contrary to popular belief, Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

Line height and the baseline grid

The following examples show how different line heights look and behave (whether they sit on the 8px grid or not) for a default paragraph of 16px (1em).

When line heights are multiples of 8px (0.5rem), they will cause the content block to break on the base grid. If smaller space units are used to set line height such as 4px (0.25rem), the content block will break alternatively on and halfway between the base grid.

These break neatly on the grid (line heights 1rem, 1.5rem and 2rem)

Because their line-height is evenly divisible by 8.


Line height = 1rem (16px)

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an.

Line height = 1.5rem (24px)

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an.

Line height = 2rem (32px)

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an.

These break alternatively on/off the grid (line heights 0.75rem, 1.25rem and 1.75rem)

Because their line-height **is not** evenly divisible by 8.
Try resizing the browser - you will see the 'off-grid' result.

Line height = 0.75rem (12px)

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an.

Line height = 1.25rem (20px)

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an.

Line height = 1.75rem (28px)

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an.

Font Families

Currently, Fedra Sans is used. But soon DNB will use a custom crated DNB font.

(Fedra Sans Book) Sans Book

Here is a paragraph with some nonsense lipsum text. Contrary to popular belief, Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

Here are some numbers:

Lining: 123456789

Old style: 123456789

(Fedra Sans Demi) Sans Medium

Here is a paragraph with some nonsense lipsum text. Contrary to popular belief, Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

Here are some numbers:

Lining: 123456789

Old style: 123456789

(Fedra Sans Medium) Sans Bold

Here is a paragraph with some nonsense lipsum text. Contrary to popular belief, Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

Here are some numbers:

Lining: 123456789

Old style: 123456789