Skip to content

Font Weights

Eufemia has three (3) font-weights

  • Regular (as for now also: Book) (normal)
  • Medium (as for now also: Demi) (500)
  • Bold (as for now also: Medium) (600)

font-weight table

TypeCustom PropertyInfo
Regular--font-weight-regular
Medium--font-weight-medium
Bold--font-weight-bold
Book--font-weight-bookDeprecated
Demi--font-weight-demiDeprecated
Medium--font-weight-mediumDeprecated

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

(Fedra Sans Book) Sans 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.

(Fedra Sans Demi) Sans 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.

(Fedra Sans Medium) Sans 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.