Typography CSS reference#

Font weights#

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

Supported weights#

DNB Sans Text and Mono support Light, Regular, Medium and Bold, each with italics. The existing public values for Regular, Medium and Bold are unchanged. Other brands retain their own fonts and weights; Light is only provided by the DNB faces.

Follow the Eufemia Web Figma library for UI typography: body text and button labels use Regular; Lead and headings use Medium. Use Bold for explicit emphasis where the design calls for it. Display has one upright weight and ignores weight and italic modifiers when selected with its helper class.

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 (in Ui theme) */
}

/* 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-t__weight--regular">Heading</h3>
<p class="dnb-t__weight--medium">Paragraph</p>
<span class="dnb-t__weight--bold">Third Tag</span>

DNB weight examples#

Line height#

The values below come from Figma for the selected brand, using Eufemia's existing CSS variable names. The Fonts & Typography guide shows the DNB scale.

Line heights are the same in light and dark mode.

Default line-height rem table#

Responsive typography (BETA)#

NB: This feature is in beta and may be subject to change.

Wrap a section of your UI in <Typography.Context responsive> to enable typography that adapts automatically across breakpoints. Typography components inside the wrapper, like H2, Span, P, Heading, will start using the responsive variables in the table below.

You can turn it off for a section using <Typography.Context responsive={false}>.

All --responsive-line-height-* CSS variables are scoped to typography components (P, Heading, Span, Lead, H1, H2, etc.) as of now. If you need to use them elsewhere you can use the .dnb-t class.

Code Editor Extensions#

You may be interested in installing an Eufemia code editor extension that allows you to quickly auto complete the correct line-height.

Additional line-height em table#

* For example: if we sum 1.33333333333*18 we get 24. Browsers do round CSS values, so we do not need all the decimal numbers for now.

How to use the line heights (CSS)#

/* I have a default height */
.dnb-p {
  line-height: var(--line-height-basis); /* 1.5rem = 24px (in Ui theme) */
}

Typography helpers#

This is a list of all the typography helper classes available. They are used by the Span and Paragraph components, but can also be used on their own.

For visual examples, see the Paragraph demos.

For details on sizes and weights, see the Font weights, Font size and Line Height documentation.

CSS classes .dnb-t#

Font weight#

  .dnb-t__weight--light
  .dnb-t__weight--regular
  .dnb-t__weight--medium
  .dnb-t__weight--bold

Font size#

  .dnb-t__size--xx-large
  .dnb-t__size--x-large
  .dnb-t__size--large
  .dnb-t__size--basis
  .dnb-t__size--medium
  .dnb-t__size--small
  .dnb-t__size--x-small

Line heights#

  .dnb-t__line-height--xx-large
  .dnb-t__line-height--x-large
  .dnb-t__line-height--large
  .dnb-t__line-height--basis
  .dnb-t__line-height--medium
  .dnb-t__line-height--small
  .dnb-t__line-height--x-small

Text alignment#

  .dnb-t__align--center
  .dnb-t__align--left
  .dnb-t__align--right

Font family#

  .dnb-t__family--basis
  .dnb-t__family--default
  .dnb-t__family--heading
  .dnb-t__family--monospace
  .dnb-t__family--display

The basis and default families both select the default text family. Use display only for short, expressive headlines. Display is experimental. Contact the Eufemia team before using it. It uses the single upright weight and a 110% line height.

Underline / italic#

  .dnb-t__decoration--underline
  .dnb-t__slant--italic