Skip to content

Line Height

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

Default line-height rem table

PixelTypeRemCustom Property
18pxx-small1.125rem--line-height-x-small
20pxsmall1.25rem--line-height-small
24pxbasis1.5rem--line-height-basis
28pxlead1.75rem--line-height-lead
32pxmedium2rem--line-height-medium
40pxlarge2.5rem--line-height-large
56pxx-large3.5rem--line-height-x-large

Code Editor Extensions

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

Additional line-height em table

PixelTypeEmCustom PropertyInfo
16pxxx-small--em1em--line-height-xx-small--em
24pxbasis--em1.333em--line-height-basis--em*

* 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 */
}