Web typography#
In general#
The default DNB typeface for applications and documents is DNB Sans Text. Display is an explicit choice for short, expressive headlines. See font roles.
Download DNB font family#
You can download the latest stable DNB Sans Text font files as a ZIP package. Use the matching versioned Asset CDN URL when a build must stay tied to one Eufemia release.
Use the current DNB Sans Text files when installing fonts for local design tools. In the shared Figma Eufemia Web library, check that the font family and styles match the current brand files. Eufemia's CSS family alias remains DNB; the desktop font is named DNB Sans Text.
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.
The specifications below show DNB values. See font size and line height for the values in each brand.
Heading xx-large#
Specs:#
- font-weight: DNB Sans Text 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 Sans Text 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 Sans Text 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 Sans Text Medium
- font-size: 1.25rem (20px)
- line-height: 1.5rem (24px)
- (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 Sans Text Regular or DNB Sans Text 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 Sans Text Regular or DNB Sans Text 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#
DNB Sans Text and Mono include Light, Regular, Medium and Bold with italics. Follow the Eufemia Web Figma library: Regular for body text and button labels, Medium for Lead and headings. Light has no assigned brand role.
Achieved with HTML classes: .dnb-t__weight--light, .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#
Use Bold only where the design calls for stronger emphasis.
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#
Display is experimental. Contact the Eufemia team before using it in an application.
Use DNB Sans Display explicitly for short, expressive headlines. Everyday headings and letters keep Text. Mono is for selected details, captions and table values. Arial is the fallback when technical limitations prevent loading Text.
Carnegie retains ArizonaFlare for headings. Sbanken retains its own fonts.
The DNB text family is DNB Sans Text. Follow the Eufemia Web Figma library: Regular for body text and button labels, Medium for Lead and headings. Text and Mono provide Light, Regular, Medium and Bold with italics.
DNB Sans Text 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 Sans Text 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 Sans Text Bold#
Use Bold only where the design calls for stronger emphasis.
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 Sans Mono 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.