Skip to content
Home

Font Weights

For details about what values Typographic elements do use, have a look at the Fonts & Typography documentation.

Eufemia has three (3) font-weights

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

font-weight table

TypeCustom Property
Regular--font-weight-regular
Medium--font-weight-medium
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.