Skip to content
Home

Fonts & Typography

In General

The default font for all web applications is the DNB font.

Download DNB font family

You can download the DNB font files as a ZIP package Last update: November 8, 2020.

If you get access to Figma Eufemia Web main file, then you don't need to install the DNB font. Figma will provide the font automatically for you inside Figma. If you use other designer tools, make sure it is installed on your system so you can use the design resources.

Typographic scale

The Eufemia typographic scale is as follows:

16px, 18px, 20px, 26px, 34px, 48px

NB! we use rem 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, RIGHT, BOTTOM or LEFT margins by default. This is usually set by the containing element and based on context. However, there is a helper class to enable the "default" spacing:

<div class="dnb-spacing">
  <h1 class="dnb-h--xx-large">...</h1>
  <p class="dnb-p">...</p>
</div>

The reason for this is to provide an out-of-the-box style which looks good before any customizing 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.

Heading xx-large

Specs:

  • font-weight: DNB Medium
  • font-size: 3rem (48px)
  • line-height: 3.5rem (56px)
  • (optional) margin-top: 3rem (48px)
  • (optional) margin-bottom: 2.5rem (40px)

Example:

Quem facilisi moderatius id eam, id tamquam albucius per.

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.

Heading x-large

Specs:

  • font-weight: DNB Medium
  • font-size: 2.125rem (34px)
  • line-height: 2.5rem (40px)
  • (optional) margin-top: 3rem (48px)
  • (optional) margin-bottom: 2.5rem (40px)

Example:

Facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire

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.

Heading large

Specs:

  • font-weight: DNB Medium
  • font-size: 1.625rem (26px)
  • line-height: 2rem (32px)
  • (optional) margin-top: 3rem (48px)
  • (optional) margin-bottom: 1rem (16px)

Example:

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire.

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.

Text lead

Specs:

  • font-weight: DNB Medium
  • font-size: 1.25rem (20px)
  • line-height: 1.75rem (28px)
  • (optional) margin-top: 2rem (32px)
  • (optional) 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.

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.

Text basis (paragraph)

Specs:

  • font-weight: DNB Regular or DNB Medium
  • font-size: 1.125rem (18px)
  • line-height: 1.5rem (24px)
  • (optional) margin-bottom: 1.5rem (24px)

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.

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.

Text basis - small

Specs:

  • font-weight: DNB Regular or DNB Medium
  • font-size: 1rem (16px)
  • line-height: 1.25rem (20px)
  • (optional) margin-bottom: 1.5rem (24px)

Note:

There are two methods to create small text. One, is to use the .dnb-t__size--small modifier class. The other method is to just use a <small> tag.

Example

This is a paragraph with a modifier class .dnb-t__size--small. This is the small content. 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.

This is a paragraph with a small tag inserted here: this is the small content. 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-t__weight--regular,.dnb-t__weight--medium or .dnb-t__weight--bold.

The old classes, .dnb-typo-regular, .dnb-typo-medium and .dnb-typo-bold, still work, but will also set font-family and font-style.

Body Regular

NB! body text is automatically set to use regular 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

NB! bold is generally not used, use medium, unless there is a specific unique use case.

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 (1rem).

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

The default font family for all web applications is the DNB font.

DNB Regular

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.

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

DNB Bold

NB! bold is generally not used, use medium, unless there is a specific unique use case.

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.

DNBMono Regular

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.