Skip to content

Font Weights

Eufemia has three (3) font-weights

  • Regular (normal)
  • Medium (500)
  • Bold (600)

font-weight table

TypeCustom PropertyInfo
Regular--font-weight-regularBody text
Medium--font-weight-mediumHeadings
Bold--font-weight-bold

How to use the weights (CSS)

/* I am Regular */
p {
font-weight: normal;
}
/* I am Medium */
p {
font-weight: var(--font-weight-medium); /* 500 */
}
/* I am Bold */
p {
font-weight: var(--font-weight-bold); /* 600 */
}
/* This will result in loading the Bold Font */
.my-new-class {
font-weight: var(--font-weight-bold);
}

Usage in HTML (Helper Classes)

<!-- Example usage of Weights in Markup -->
<h3 class="dnb-typo-regular">Heading</h3>
<p class="dnb-typo-medium">Paragraph</p>
<span class="dnb-typo-bold">Third Tag</span>

Examples

DNB Regular

Here is a paragraph with some nonsense Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "deFinibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

DNB Medium

Here is a paragraph with some nonsense Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "deFinibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

DNB Bold

Here is a paragraph with some nonsense Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "deFinibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

DNB Mono Regular

Here is a paragraph with some nonsense Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "deFinibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.